React SDK

Error monitoring and performance tracking for React applications

The Sentry React SDK extends the Browser SDK with React-specific features including ErrorBoundary, Profiler components, and React Router integrations.

Installation

npm

npm install @sentry/react

Basic Setup

Initialize Sentry before mounting your React application:

import React from 'react';
import { createRoot } from 'react-dom/client';
import * as Sentry from '@sentry/react';
import App from './App';

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  
  // Performance Monitoring
  tracesSampleRate: 1.0,
  
  // Session Replay
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

React 19 Error Handling

Starting with React 19, use the new error hooks for automatic error capture:

import { createRoot } from 'react-dom/client';
import * as Sentry from '@sentry/react';

const container = document.getElementById('root');
const root = createRoot(container, {
  // Callback called when an error is thrown and not caught by an Error Boundary
  onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {
    console.warn('Uncaught error', error, errorInfo.componentStack);
  }),
  
  // Callback called when React catches an error in an Error Boundary
  onCaughtError: Sentry.reactErrorHandler(),
  
  // Callback called when React automatically recovers from errors
  onRecoverableError: Sentry.reactErrorHandler(),
});

root.render(<App />);

ErrorBoundary Component

Catch React component errors and display fallback UI:

Basic Usage

import * as Sentry from '@sentry/react';

function FallbackComponent() {
  return <div>An error has occurred</div>;
}

function App() {
  return (
    <Sentry.ErrorBoundary fallback={FallbackComponent} showDialog>
      <YourComponents />
    </Sentry.ErrorBoundary>
  );
}

Custom Fallback

import * as Sentry from '@sentry/react';

function App() {
  return (
    <Sentry.ErrorBoundary
      fallback={({ error, componentStack, resetError }) => (
        <div>
          <h1>Something went wrong</h1>
          <p>{error.toString()}</p>
          <button onClick={resetError}>Try again</button>
        </div>
      )}
      onError={(error, componentStack, eventId) => {
        console.log('Error captured:', eventId);
      }}
      beforeCapture={(scope, error, errorInfo) => {
        scope.setTag('location', 'app-boundary');
      }}
    >
      <YourComponents />
    </Sentry.ErrorBoundary>
  );
}

HOC Pattern

import * as Sentry from '@sentry/react';

const MyComponent = () => {
  return <div>My Component</div>;
};

// Wrap component with error boundary
export default Sentry.withErrorBoundary(MyComponent, {
  fallback: <div>An error occurred</div>,
  showDialog: true,
});

Profiler Component

Track React component render performance:

withProfiler HOC

import * as Sentry from '@sentry/react';

function MyComponent() {
  return (
    <div>
      <ExpensiveComponent />
      <AnotherComponent />
    </div>
  );
}

// Wrap component to track render performance
export default Sentry.withProfiler(MyComponent);

Profiler Component

import * as Sentry from '@sentry/react';

function Dashboard() {
  return (
    <div>
      <Sentry.Profiler name="Dashboard">
        <Header />
        <Content />
        <Footer />
      </Sentry.Profiler>
    </div>
  );
}

useProfiler Hook

import * as Sentry from '@sentry/react';

function MyComponent() {
  Sentry.useProfiler('MyComponent');
  
  return <div>Content</div>;
}

React Router Integration

Sentry supports all major versions of React Router:

React Router v6

import * as Sentry from '@sentry/react';
import { useEffect } from 'react';
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  integrations: [
    Sentry.reactRouterV6BrowserTracingIntegration({
      useEffect,
    }),
  ],
  tracesSampleRate: 1.0,
});

const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(
  createBrowserRouter
);

const router = sentryCreateBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

React Router v5

import * as Sentry from '@sentry/react';
import { Route, Router, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  integrations: [
    Sentry.reactRouterV5BrowserTracingIntegration({ history }),
  ],
  tracesSampleRate: 1.0,
});

const SentryRoute = Sentry.withSentryRouting(Route);

function App() {
  return (
    <Router history={history}>
      <Switch>
        <SentryRoute path="/" component={Home} exact />
        <SentryRoute path="/about" component={About} />
      </Switch>
    </Router>
  );
}

React Router v4

import * as Sentry from '@sentry/react';
import { Route, BrowserRouter } from 'react-router-dom';

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  integrations: [
    Sentry.reactRouterV4BrowserTracingIntegration(),
  ],
  tracesSampleRate: 1.0,
});

const SentryRoute = Sentry.withSentryRouting(Route);

function App() {
  return (
    <BrowserRouter>
      <SentryRoute path="/" component={Home} exact />
      <SentryRoute path="/about" component={About} />
    </BrowserRouter>
  );
}

TanStack Router Integration

For TanStack Router (formerly React Location):

import * as Sentry from '@sentry/react';
import { createRouter } from '@tanstack/react-router';

const router = createRouter({
  // your router config
});

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  integrations: [
    Sentry.tanstackRouterBrowserTracingIntegration(router),
  ],
  tracesSampleRate: 1.0,
});

Redux Integration

Create a Sentry Redux enhancer:

import * as Sentry from '@sentry/react';
import { createStore, compose } from 'redux';
import rootReducer from './reducers';

const sentryReduxEnhancer = Sentry.createReduxEnhancer({
  // Optionally configure
  actionTransformer: (action) => {
    // Transform or filter actions
    return action;
  },
  stateTransformer: (state) => {
    // Transform or filter state
    return state;
  },
});

const store = createStore(
  rootReducer,
  compose(sentryReduxEnhancer)
);

Performance Monitoring

Component Tracking

import * as Sentry from '@sentry/react';

function ExpensiveComponent() {
  // Track this component's render performance
  Sentry.useProfiler('ExpensiveComponent');
  
  // Component logic
  return <div>Content</div>;
}

Custom Spans

import * as Sentry from '@sentry/react';

function DataFetchingComponent() {
  const fetchData = async () => {
    await Sentry.startSpan(
      {
        name: 'fetch-user-data',
        op: 'http.client',
      },
      async () => {
        const response = await fetch('/api/user');
        return response.json();
      },
    );
  };
  
  return <div>...</div>;
}

ErrorBoundary Configuration

ErrorBoundary Props

The ErrorBoundary component accepts these props:

• fallback: React element or render function to display when error occurs
• showDialog: Show Sentry user feedback dialog
• dialogOptions: Options for the feedback dialog
• onError: Callback when error is caught
• onReset: Callback when error boundary is reset
• onMount: Callback on component mount
• onUnmount: Callback on component unmount
• beforeCapture: Modify scope before error is sent
• handled: Override whether error is marked as handled

<Sentry.ErrorBoundary
  fallback={({ error, componentStack, resetError }) => (
    <ErrorFallback error={error} reset={resetError} />
  )}
  showDialog
  dialogOptions={{
    title: 'Something went wrong',
    subtitle: 'Our team has been notified',
  }}
  onError={(error, componentStack, eventId) => {
    logErrorToService(error, eventId);
  }}
  beforeCapture={(scope) => {
    scope.setLevel('fatal');
  }}
>
  <App />
</Sentry.ErrorBoundary>

Best Practices

Multiple Boundaries

Use multiple ErrorBoundary components at different levels of your component tree.

Profile Wisely

Only wrap components where you need render performance data.

Router Integration

Always use router integrations for accurate transaction names.

User Feedback

Enable showDialog to collect user feedback on errors.

Next Steps

React Router

Set up router performance tracking

Redux

Integrate with state management

Error Boundaries

Advanced error boundary patterns

Profiling

Component performance profiling