Star us on GitHub
Star

Docs

Sign inSign up
Getting Started with Highlight
Fullstack Mapping
Frontend
React.js
Next.js
Remix
Vue.js
Angular
Gatsby.js
SvelteKit
Other
JS SDK Configuration
Backend: Error Monitoring
C# .NET ASP
Go
Java
JS
Python
Ruby
Rust
Backend: Logging
Go
JS
Python
Ruby
Java
Rust
Hosting Providers
curl
Docker / Docker Compose
File
Fluent Forward
Systemd / Journald
Syslog RFC5424
C# .NET ASP
Backend: Tracing
Go
Node.js
Python
Rust
C# .NET ASP
Native OpenTelemetry
Overview
Error Monitoring
Logging
Tracing
Fullstack Frameworks
Overview
Remix Walkthrough
Self Host & Local Dev
Overview
Development deployment guide.
Integrations
Hobby deployment guide.
Menu
Docs / Getting Started / Fullstack Frameworks / Remix Walkthrough

Remix Walkthrough

Overview

Our Remix SDK gives you access to frontend session replays and server-side monitoring, all-in-one.

  • Use <HighlightInit /> to track session replay and client-side errors.
  • Use H.init to instrument Remix's nodejs server.
Installation
 
# with yarn
yarn add @highlight-run/remix

Copy
Client Instrumentation
  • Inject <HighlightInit /> into your app root.
  • Optionally configure excludedHostnames to block a full or partial hostname. For example, excludedHostnames={['staging']} would not initialize Highlight on staging.highlight.io.
  • Configure tracingOrigins and networkRecording

See Fullstack Mapping for details.

// app/root.tsx
import { useLoaderData } from '@remix-run/react'

import { HighlightInit } from '@highlight-run/remix/client'
import { json } from '@remix-run/node'


export async function loader() {
	return json({
		ENV: {
			HIGHLIGHT_PROJECT_ID: process.env.HIGHLIGHT_PROJECT_ID,
		},
	})
}

export default function App() {
	const { ENV } = useLoaderData()

	return (
		<html lang="en">
			<HighlightInit
				excludedHostnames={['localhost']}
				projectId={ENV.HIGHLIGHT_PROJECT_ID}
				serviceName="my-remix-frontend"
				tracingOrigins
				networkRecording={{ enabled: true, recordHeadersAndBody: true }}
			/>
			{/* Render head, body, <Outlet />, etc. */}
		</html>
	)
}


Copy
  • Optionally Create an ErrorBoundary component and export it from app/root.tsx
// app/components/error-boundary.tsx
import { isRouteErrorResponse, useRouteError } from '@remix-run/react'
import { ReportDialog } from '@highlight-run/remix/report-dialog'

export function ErrorBoundary() {
	const error = useRouteError()

	if (isRouteErrorResponse(error)) {
		return (
			<div>
				<h1>
					{error.status} {error.statusText}
				</h1>
				<p>{error.data}</p>
			</div>
		)
	} else if (error instanceof Error) {
		return (
			<div>
				<script src="https://unpkg.com/highlight.run"></script>
				<script
					dangerouslySetInnerHTML={{
						__html: `
							H.init('\${process.env.HIGHLIGHT_PROJECT_ID}');
						`,
					}}
				/>
				<h1>Error</h1>
				<p>{error.message}</p>
				<p>The stack trace is:</p>
				<pre>{error.stack}</pre>

				<ReportDialog />
			</div>
		)
	} else {
		return <h1>Unknown Error</h1>
	}
}

Copy
// app/root.tsx
export { ErrorBoundary } from '~/components/error-boundary'

Copy
Server Instrumentation
  • Use H.init from @highlight-run/remix/server to instrument the Remix server on Node.js.
  • Import HandleError from @highlight-run/remix/server and export handleError after setting nodeOptions.
// app/entry.server.tsx
import { HandleError } from '@highlight-run/remix/server'

const nodeOptions = { projectID: process.env.HIGHLIGHT_PROJECT_ID }

export const handleError = HandleError(nodeOptions)

// Handle server requests


Copy

Alternatively, you can wrap Highlight's error handler and execute your own custom error handling code as well.

// app/entry.server.tsx
import type { DataFunctionArgs } from '@remix-run/node'

import { H, HandleError } from '@highlight-run/remix/server'

const nodeOptions = { projectID: process.env.HIGHLIGHT_PROJECT_ID }

export function handleError(
	error: unknown,
	dataFunctionArgs: DataFunctionArgs,
) {
	const handleError = HandleError(nodeOptions)

	handleError(error, dataFunctionArgs)

	// custom error handling logic here
}

H.init(nodeOptions)

// Handle server requests

Copy

Handle streaming HTML responses using the onError handler of renderToPipeableStream

function handleBrowserRequest(
	request: Request,
	responseStatusCode: number,
	responseHeaders: Headers,
	remixContext: EntryContext,
) {
	return new Promise((resolve, reject) => {
		let shellRendered = false
		const { pipe, abort } = renderToPipeableStream(
			<RemixServer
				context={remixContext}
				url={request.url}
				abortDelay={ABORT_DELAY}
			/>,
			{
				onShellReady() {
					shellRendered = true
					const body = new PassThrough()

					responseHeaders.set('Content-Type', 'text/html')

					resolve(
						new Response(body, {
							headers: responseHeaders,
							status: responseStatusCode,
						}),
					)

					pipe(body)
				},
				onShellError(error: unknown) {
					reject(error)
				},
				onError(error: unknown) {
					if (shellRendered) {
						logError(error, request)
					}
				},
			},
		)

		setTimeout(abort, ABORT_DELAY)
	})
}

function logError(error: unknown, request?: Request) {
	const parsed = request
		? H.parseHeaders(Object.fromEntries(request.headers))
		: undefined

	if (error instanceof Error) {
		H.consumeError(error, parsed?.secureSessionId, parsed?.requestId)
	} else {
		H.consumeError(
			new Error(`Unknown error: ${JSON.stringify(error)}`),
			parsed?.secureSessionId,
			parsed?.requestId,
		)
	}

	console.error(error)
}

Copy
Advanced ConfigSelf Host & Local Dev
Community / SupportSuggest Edits?Follow us!