React.js
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
import React from 'react' 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 ReactDOM.render( <React.StrictMode> <ErrorBoundary> <App /> </ErrorBoundary> </React.StrictMode>, document.getElementById('root'), )
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 https://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: