sentry-react

<Sentry />

sentry-react offers a <Sentry /> component that instantiates Sentry for your React application.

Install

• npm install sentry-react or
• yarn add sentry-react

Use

Mount <Sentry /> around your React application, typically alongside your context providers.

import { render } from 'react-dom';
import Sentry from 'sentry-react';
import { App } from './components';

render(
  <Sentry>
    <App />
  </Sentry>,
  document.getElementById('root'),
);

Exports

In addition to the default <Sentry /> component export, you can also import:

• <MockSentrySdk /> to mock the Sentry SDK during unit tests.
• useSentrySdk() to get the Sentry SDK.
  • e.g. const { captureError } = useSentrySdk();

Props

The Sentry component shares all the same properties as Sentry's init function. Additionally, you can use the following props:

ErrorBoundaryFallback

Type: FunctionComponent<FallbackRenderParams> optional

The ErrorBoundaryFallback component will be mounted as a replacement to your children prop when and if an error is thrown.

beforeErrorBoundaryCapture

Type: (scope: Scope, error: Error | null, componentStack: string | null) => void optional

This callback fires before the error is captured by Sentry, allowing you to add tags or context using the scope.

errorBoundaryDialogOptions

Type: ReportDialogOptions optional

The error boundary dialog options are passed into the Sentry report dialog. These options are ignored if showErrorBoundaryDialog is false.

For the definition of ReportDialogOptions, see @sentry/browser's helpers.ts file.

onErrorBoundaryError

Type: (error: Error, componentStack: string, eventId: string) => void optional

This callback fires when the error boundary encounters an error.

onErrorBoundaryMount

Type: VoidFunction optional

This callback fires when the error boundary mounts.

onErrorBoundaryReset

Type: (error: Error | null, componentStack: string | null, eventId: string | null) => void optional

This callback fires if and when the resetError prop is called from the ErrorBoundaryFallback component.

onErrorBoundaryUnmount

Type: (error: Error | null, componentStack: string | null, eventId: string | null) => void optional

This callback fires when the error boundary unmounts.

showErrorBoundaryDialog

Type: boolean optional

The showErrorBoundaryDialog prop determines if a Sentry report dialog should be rendered on error.

user

Type: User optional

By default, the user will have their IP address automatically assigned by Sentry. While you can associate any key-value pairs to the user prop, Sentry recommends id, email, ip_address, and username.

Integrations

FullStory

To integrate Sentry with FullStory, go to the Sentry website, under organization settings, Security & Privacy, Data Scrubbing, and add fullStoryUrl to "Global Safe Fields."