Star us on GitHub

Using with Remix

Learn how to set up with your Remix application.
Install the npm package & SDK.

Install the @highlight-run/remix npm package in your terminal.

# with npm npm install @highlight-run/remix
# with yarn yarn add @highlight-run/remix
# with pnpm pnpm add @highlight-run/remix
Initialize the client SDK.

Grab your project ID from, inject it into your client application using the loader export from your root.tsx file, and set the projectID in the <HighlightInit/> component.

// 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 projectId={ENV.HIGHLIGHT_PROJECT_ID} serviceName="my-remix-frontend" tracingOrigins networkRecording={{ enabled: true, recordHeadersAndBody: true }} /> {/* Render head, body, <Outlet />, etc. */} </html> ) }
Export a custom ErrorBoundary handler (optional)

The ErrorBoundary component wraps your component tree and catches crashes/exceptions from your react app. When a crash happens, your users will be prompted with a modal to share details about what led up to the crash. Read more here.

// 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>{}</p> </div> ) } else if (error instanceof Error) { return ( <div> <script src=""></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> } }
// app/root.tsx export { ErrorBoundary } from '~/components/error-boundary'
Identify users.

Identify users after the authentication flow of your web app. We recommend doing this in a useEffect call or in any asynchronous, client-side context.

The first argument of identify will be searchable via the property identifier, and the second property is searchable by the key of each item in the object.

For more details, read about session search or how to identify users.

import { H } from '@highlight-run/remix/client'; function RenderFunction() { useEffect(() => { // login logic... H.identify('', { id: 'very-secure-id', phone: '867-5309', bestFriend: 'jenny' }); }, []) return null; // Or your app's rendering code. }
Initialize the server SDK.

Send errors to Highlight from your Remix server using the entry.server.tsx file.

// app/entry.server.tsx import { H, HandleError } from '@highlight-run/remix/server' const nodeOptions = { projectID: process.env.HIGHLIGHT_PROJECT_ID } export const handleError = HandleError(nodeOptions) // Handle server requests
Verify installation

Check your dashboard for a new session. Make sure to remove the Status is Completed filter to see ongoing sessions. Don't see anything? Send us a message in our community and we can help debug.

More Remix features?

See our fullstack Remix guide for more information on how to use Highlight with Remix.