Star us on GitHub
Star
Menu

Using highlight.io with React.js

Learn how to set up highlight.io with your React application.
1
Install the npm package & SDK.

Install the npm package highlight.run in your terminal.

# with npm npm install highlight.run @highlight-run/react # with yarn yarn add highlight.run @highlight-run/react
Copy
2
Initialize the SDK in your frontend.

Grab your project ID from app.highlight.io/setup and insert it in place of <YOUR_PROJECT_ID>. To get started, we recommend setting tracingOrigins and networkRecording so that highlight.io can pass a header to pair frontend/backend errors . Refer to our docs on SDK configuration and Fullstack Mapping to read more about these options.

... import { H } from 'highlight.run'; H.init('<YOUR_PROJECT_ID>', { tracingOrigins: true, networkRecording: { enabled: true, recordHeadersAndBody: true, urlBlocklist: [ // insert urls you don't want to record here ], }, }); ... // rendering code.
Copy
3
Add the ErrorBoundary component. (optional)

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

import { ErrorBoundary } from '@highlight-run/react'; ReactDOM.render( <ErrorBoundary> <App /> </ErrorBoundary>, document.getElementById('root') );
Copy
4
Identify users.

Identify users to tie their sessions/errors to their account. We suggest doing this before/after the authentication flow of your web app.

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. Read more about this in our identifying users section.

H.identify('jay@highlight.io', { id: 'very-secure-id', phone: '867-5309', bestFriend: 'jenny' });
Copy
5
Verify installation

Check your dashboard for a new session. Don't see anything? Send us a message in our community and we can help debug.

6
Configure sourcemaps in CI. (optional)

To get properly enhanced stacktraces of your javascript app, we recommend instrumenting sourcemaps. If you deploy public sourcemaps, you can skip this step. Refer to our docs on sourcemaps to read more about this option.

# Upload sourcemaps to Highlight ... npx --yes @highlight-run/sourcemap-uploader upload --apiKey ${YOUR_ORG_API_KEY} --path ./build ...
Copy
7
Instrument your backend.

The next step is instrumenting your backend to tie logs/errors to your frontend sessions. Read more about this in our backend instrumentation section.