Using highlight.io with Remix
Learn how to set up highlight.io 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 app.highlight.io/setup, 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>{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>
}
}
// 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('jay@highlight.io', {
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.