Welcome to Highlight
Getting Started
Overview
Backend / Server
Client / Frontend
Fullstack Frameworks
Tips
Content-Security-Policy
Local Development
Monkey Patches
Performance Impact
Proxying Highlight
Session Search Deep Linking
Troubleshooting
Upgrading Highlight
Session Replay
Console Messages
HTML iframe Recording
Identifying Users
Live Mode
Network DevTools
Privacy
Rage Clicks
Recording Network Requests and Responses
Session Sharing
Session Shortcut
Tracking Events
Versioning Sessions
Error Monitoring
Grouping Errors
Sourcemaps
Versioning Errors
Product Features
Alerts
Analytics
Canvas
Comments
Environments
Frontend Observability
Keyboard Shortcuts
Performance Data
Segments
Session Search
Team Management
User Feedback
Web Vitals
WebGL
Integrations
Amplitude Integration
Clearbit Integration
Electron Integration
Front Plugin
Intercom Integration
Linear Integration
Mixpanel Integration
React.js Integration
Segment Integration
Sentry Integration
Slack Integration
Vercel Integration
highlight.run Changelog
5.0.0
5.0.1
5.1.0
5.1.1
5.1.2
5.1.3
5.1.4
5.1.5
Menu
Docs / Integrations / React.js Integration

React.js Integration

Highlight ships @highlight-run/react which can be installed alongside highlight.run for additional functionality for React applications.

Error Boundary

Highlight provides an ErrorBoundary to help you provide a better experience for your users when your application crashes. Using an ErrorBoundary gives your application an opportunity to recover from a bad state.

Highlight also allows you to show a crash report powered by User Feedback. A crash report is shown in the session when the crash happens, giving you the context for the user feedback.

import { ErrorBoundary } from '@highlight-run/react' const App = () => ( <ErrorBoundary showDialog> <YourAwesomeApplication /> </ErrorBoundary> )
Copy
Examples
Showing the feedback modal when a crash happens

import { ErrorBoundary } from '@highlight-run/react' const App = () => ( <ErrorBoundary showDialog> <YourAwesomeApplication /> </ErrorBoundary> )
Copy
Showing a custom feedback modal when a crash happens

You should use this if you would like to replace the feedback modal with your own styles/branding.

import { ErrorBoundary } from '@highlight-run/react' const App = () => ( <ErrorBoundary showDialog customDialog={ <div> <h2>Whoops! Looks like a crash happened.</h2> <p>Don't worry, our team is tracking this down!</p> <form> <label> Feedback <input type="text" /> </label> <button type="submit">Send Feedback</button> </form> </div> } > <YourAwesomeApplication /> </ErrorBoundary> )
Copy
ErrorBoundary API
fallback

A fallback component that gets rendered when the error boundary encounters an error.

showDialog

Enables Highlight's crash report. When the ErrorBoundary is triggered, a form will be prompted to the user asking them for optional feedback.

dialogOptions

The strings used for the Highlight crash report.

user

Allows you to attach additional user information to the feedback report. If you've called H.identify() in your application before, you won't have to set this, Highlight will infer the user's identity.

title

The title for the report dialog.

subtitle

The subtitle for the report dialog.

subtitle2

The secondary subtitle for the report dialog.

labelName

The label for the name field.

labelEmail

The label for the email field.

labelComments

The label for the verbatim field.

labelClose

The label for the close button.

labelSubmit

The label for the submit button.

successMessage

The label for the success message shown after the crash report is submitted.

hideHighlightBranding

Whether to show the Highlight branding attribution in the report dialog.

Default value is false.