Reference our client-side sdk docs for advanced functionality and our fullstack mapping guide on pairing backend errors with your replay.

Installing the SDK

Install highlight.run and @highlight-run/react using your package manager.

# with npm
npm install highlight.run @highlight-run/react

# with yarn
yarn add highlight.run @highlight-run/react

Initialize

Initialize Highlight where your application starts.

import { H } from 'highlight.run'

H.init(
	'<YOUR_PROJECT_ID>', // Get your project ID from https://app.highlight.io/setup
)

Example

Using the new /app directory in Next.js 13? Refer to this guide to ensure you're using a client component.

import type { AppProps } from 'next/app'
import { H } from 'highlight.run'
import { ErrorBoundary } from '@highlight-run/react'

H.init('<YOUR_PROJECT_ID>') // Get your project ID from https://app.highlight.io/setup

function MyApp({ Component, pageProps }: AppProps) {
	return (
		<ErrorBoundary>
			<Component {...pageProps} />
		</ErrorBoundary>
	)
}
export default MyApp

Verify

Start your app, go to it in the browser, then click around. Highlight will be recording your session and it will show up on app.highlight.io/sessions a few seconds after recording has started.

Next Steps

After installing Highlight for your frontend application, there are a few other things you should check out about our Session Replay product, namely: