---
title: "React"
description: "Learn how to set up Sentry in your React application, capture your first errors and traces, and view them in Sentry."
url: https://docs.sentry.io/platforms/javascript/guides/react/
---

# React | Sentry for React

## [Prerequisites](https://docs.sentry.io/platforms/javascript/guides/react.md#prerequisites)

You need:

* A Sentry [account](https://sentry.io/signup/) and [project](https://docs.sentry.io/product/projects.md)
* Your application up and running

##### Using React Server Components or a React framework?

If you're using Next.js, Remix, or another framework with server-side rendering, use the dedicated SDK instead:

* [Next.js](https://docs.sentry.io/platforms/javascript/guides/nextjs.md)
* [Remix](https://docs.sentry.io/platforms/javascript/guides/remix.md)
* [Gatsby](https://docs.sentry.io/platforms/javascript/guides/gatsby.md)

This guide is for client-side React applications (SPAs) built with tools like Vite or custom bundler configurations.

## [Install](https://docs.sentry.io/platforms/javascript/guides/react.md#install)

Install the Sentry SDK using your preferred package manager:

```bash
npm install @sentry/react --save
```

## [Configure](https://docs.sentry.io/platforms/javascript/guides/react.md#configure)

Choose the features you want to configure:

Error Monitoring\[ ]Tracing\[ ]Session Replay\[ ]Logs\[ ]User Feedback

Want to learn more about these features?

* [**Issues**](https://docs.sentry.io/product/issues.md) (always enabled)
  <!-- -->
  :
  <!-- -->
  Sentry's core error monitoring product that automatically reports errors, uncaught exceptions, and unhandled rejections. If you have something that looks like an exception, Sentry can capture it.
* [**Tracing**](https://docs.sentry.io/product/tracing.md):
  <!-- -->
  Track software performance while seeing the impact of errors across multiple systems. For example, distributed tracing allows you to follow a request from the frontend to the backend and back.
* [**Session Replay**](https://docs.sentry.io/product/explore/session-replay/web.md):
  <!-- -->
  Get to the root cause of an issue faster by viewing a video-like reproduction of what was happening in the user's browser before, during, and after the problem.
* [**Logs**](https://docs.sentry.io/product/explore/logs.md):
  <!-- -->
  Centralize and analyze your application logs to correlate them with errors and performance issues. Search, filter, and visualize log data to understand what's happening in your applications.
* [**User Feedback**](https://docs.sentry.io/product/user-feedback.md):
  <!-- -->
  Collect feedback directly from users when they encounter errors, allowing them to describe what happened and provide context that helps you understand and resolve issues faster.

### [Initialize the Sentry SDK](https://docs.sentry.io/platforms/javascript/guides/react.md#initialize-the-sentry-sdk)

Create a file in your project's root directory (e.g., `instrument.js`) and add your Sentry configuration.

This file must be imported **before** any other imports in your application entry point.

`instrument.js`

```javascript
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "___PUBLIC_DSN___",

  // Adds request headers and IP for users, for more info visit:
  // https://docs.sentry.io/platforms/javascript/guides/react/configuration/options/#sendDefaultPii
  sendDefaultPii: true,

  integrations: [
    // ___PRODUCT_OPTION_START___ performance
    // If you're using react router, use the integration for your react router version instead.
    // Learn more at
    // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
    Sentry.browserTracingIntegration(),
    // ___PRODUCT_OPTION_END___ performance
    // ___PRODUCT_OPTION_START___ session-replay
    Sentry.replayIntegration(),
    // ___PRODUCT_OPTION_END___ session-replay
    // ___PRODUCT_OPTION_START___ user-feedback
    Sentry.feedbackIntegration({
      // Additional SDK configuration goes in here, for example:
      colorScheme: "system",
    }),
    // ___PRODUCT_OPTION_END___ user-feedback
  ],
  // ___PRODUCT_OPTION_START___ logs

  // Enable logs to be sent to Sentry
  enableLogs: true,
  // ___PRODUCT_OPTION_END___ logs
  // ___PRODUCT_OPTION_START___ performance

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // Learn more at
  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
  tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/],
  // ___PRODUCT_OPTION_END___ performance
  // ___PRODUCT_OPTION_START___ session-replay

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  // Learn more at
  // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  // ___PRODUCT_OPTION_END___ session-replay
});
```

### [Apply Instrumentation to Your App](https://docs.sentry.io/platforms/javascript/guides/react.md#apply-instrumentation-to-your-app)

Import your Sentry configuration as the **first import** in your application entry point, then render your app.

`main.jsx`

```javascript
// Sentry initialization should be imported first!
import "./instrument";
import App from "./App";
import { createRoot } from "react-dom/client";

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

### [Capture React Errors (React 19+)](https://docs.sentry.io/platforms/javascript/guides/react.md#capture-react-errors-react-19)

React 19 introduced error hooks that integrate directly with Sentry. Configure `createRoot` or `hydrateRoot` with error handlers using `reactErrorHandler` for comprehensive error capture.

`main.jsx`

```javascript
import "./instrument";
import App from "./App";
import { createRoot } from "react-dom/client";
import * as Sentry from "@sentry/react";

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

Using React 18 or below?

Use the `ErrorBoundary` component to capture rendering errors and display a fallback UI.

`App.jsx`

```javascript
import React from "react";
import * as Sentry from "@sentry/react";

function App() {
  return (
    <Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
      <YourAppContent />
    </Sentry.ErrorBoundary>
  );
}
```

Learn more about [ErrorBoundary options](https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary.md).

### [Add Readable Stack Traces With Source Maps](https://docs.sentry.io/platforms/javascript/guides/react.md#add-readable-stack-traces-with-source-maps)

Source maps are **essential for debugging production errors**. Without them, stack traces point to minified code.

Run the Sentry wizard to configure source map uploads for your bundler:

* **[Vite](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/vite.md)** — Recommended for new projects
* **[Webpack](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/webpack.md)** — Common in existing projects
* **[Rollup](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/rollup.md)** or **[esbuild](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/esbuild.md)** — For custom setups

```bash
npx @sentry/wizard@latest -i sourcemaps
```

### [Set Up Routing (Optional)](https://docs.sentry.io/platforms/javascript/guides/react.md#set-up-routing-optional)

If you're using client-side routing, configure Sentry to capture navigation events for better performance insights.

Select your router:

* [React Router v7](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v7.md)
* [React Router v6](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v6.md)
* [Older versions](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router.md)
* [TanStack Router](https://docs.sentry.io/platforms/javascript/guides/react/features/tanstack-router.md)

`instrument.js`

```javascript
import React from "react";
import * as Sentry from "@sentry/react";
import {
  useLocation,
  useNavigationType,
  createRoutesFromChildren,
  matchRoutes,
} from "react-router";

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  integrations: [
    Sentry.reactRouterV7BrowserTracingIntegration({
      useEffect: React.useEffect,
      useLocation,
      useNavigationType,
      createRoutesFromChildren,
      matchRoutes,
    }),
  ],
});
```

### [Capture Redux State Data (Optional)](https://docs.sentry.io/platforms/javascript/guides/react.md#capture-redux-state-data-optional)

Capture Redux state and actions with your errors using `Sentry.createReduxEnhancer`.

Learn more about [Redux integration options](https://docs.sentry.io/platforms/javascript/guides/react/features/redux.md).

`store.js`

```javascript
import { createStore, compose } from "redux";
import * as Sentry from "@sentry/react";

const sentryEnhancer = Sentry.createReduxEnhancer();

const store = createStore(rootReducer, compose(sentryEnhancer));
```

### [Avoid Ad Blockers With Tunneling (Optional)](https://docs.sentry.io/platforms/javascript/guides/react.md#avoid-ad-blockers-with-tunneling-optional)

Some ad blockers prevent Sentry events from being sent. Use the `tunnel` option to route events through your server.

Learn more about [setting up tunneling](https://docs.sentry.io/platforms/javascript/guides/react/troubleshooting.md#using-the-tunnel-option).

`instrument.js`

```javascript
Sentry.init({
  dsn: "___PUBLIC_DSN___",
  tunnel: "/tunnel",
});
```

## [Verify Your Setup](https://docs.sentry.io/platforms/javascript/guides/react.md#verify-your-setup)

##### Important

Errors triggered from within your browser's developer tools (like the browser console) are sandboxed, so they will not trigger Sentry's error monitoring.

Add a test button to trigger an error, then check Sentry to confirm it's working.

**Errors** — [Open Issues](https://sentry.io/orgredirect/organizations/:orgslug/issues/)

You should see "Sentry Test Error" with a stack trace pointing to your source code (if source maps are configured).

**Tracing** — [Open Traces](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/)

You should see page load traces and the test span. Learn more about [custom instrumentation](https://docs.sentry.io/platforms/javascript/guides/react/tracing/instrumentation/custom-instrumentation.md).

**Session Replay** — [Open Replays](https://sentry.io/orgredirect/organizations/:orgslug/replays/)

Watch a video-like recording of your session, including the moment the error occurred. Learn more about [Session Replay configuration](https://docs.sentry.io/platforms/javascript/guides/react/session-replay.md).

**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) NEW

See structured log entries from your application. Learn more about [Logs configuration](https://docs.sentry.io/platforms/javascript/guides/react/logs.md).

`App.jsx`

```javascript
<button
  type="button"
  onClick={() => {
    throw new Error("Sentry Test Error");
  }}
>
  Break the world
</button>;
```

To test tracing, wrap the error in a span:

```javascript
<button
  type="button"
  onClick={() => {
    Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => {
      setTimeout(() => {
        throw new Error("Sentry Test Error");
      }, 99);
    });
  }}
>
  Break the world
</button>;
```

Send logs from anywhere in your app:

```javascript
Sentry.logger.info("User action", { userId: "123" });
Sentry.logger.warn("Slow response", { duration: 5000 });
Sentry.logger.error("Operation failed", { reason: "timeout" });
```

Not seeing events in Sentry?

**1. Enable debug mode** to see SDK activity in the console:

`instrument.js`

```javascript
Sentry.init({
  dsn: "___PUBLIC_DSN___",
  debug: true,
});
```

**2. Check your DSN** — Ensure it's correctly copied from your [Sentry project settings](https://sentry.io/orgredirect/organizations/:orgslug/projects/).

**3. Disable ad blockers** — Some ad blockers prevent Sentry from sending events. See [tunneling](https://docs.sentry.io/platforms/javascript/guides/react.md#avoid-ad-blockers-with-tunneling-optional) for a workaround.

**4. Check your quota** — View your [usage stats](https://sentry.io/orgredirect/organizations/:orgslug/stats/) to ensure you haven't exceeded your plan limits.

For more help, see the [Troubleshooting page](https://docs.sentry.io/platforms/javascript/guides/react/troubleshooting.md).

## [Next Steps](https://docs.sentry.io/platforms/javascript/guides/react.md#next-steps)

You've successfully integrated Sentry into your React application! Here's what to explore next:

* Explore [practical guides](https://docs.sentry.io/guides.md) on what to monitor, log, track, and investigate after setup
* [Session Replay](https://docs.sentry.io/platforms/javascript/guides/react/session-replay.md) — Watch video-like reproductions of user sessions to debug errors in context
* [Distributed Tracing](https://docs.sentry.io/platforms/javascript/guides/react/tracing/distributed-tracing.md) — Trace requests from your React frontend to backend services
* [Connect GitHub + Seer](https://docs.sentry.io/organization/integrations/source-code-mgmt/github.md#installing-github) — Enable AI-powered [root cause analysis](https://docs.sentry.io/product/ai-in-sentry/seer.md) by connecting your repository
* [Logs](https://docs.sentry.io/platforms/javascript/guides/react/logs.md) — Send structured logs correlated with errors and traces
* [Metrics](https://docs.sentry.io/platforms/javascript/guides/react/metrics.md) BETA— Track custom counters, gauges, and distributions to monitor application health

## Other JavaScript Frameworks

- [Angular](https://docs.sentry.io/platforms/javascript/guides/angular.md)
- [Astro](https://docs.sentry.io/platforms/javascript/guides/astro.md)
- [AWS Lambda](https://docs.sentry.io/platforms/javascript/guides/aws-lambda.md)
- [Azure Functions](https://docs.sentry.io/platforms/javascript/guides/azure-functions.md)
- [Bun](https://docs.sentry.io/platforms/javascript/guides/bun.md)
- [Capacitor](https://docs.sentry.io/platforms/javascript/guides/capacitor.md)
- [Cloud Functions for Firebase](https://docs.sentry.io/platforms/javascript/guides/firebase.md)
- [Cloudflare](https://docs.sentry.io/platforms/javascript/guides/cloudflare.md)
- [Connect](https://docs.sentry.io/platforms/javascript/guides/connect.md)
- [Cordova](https://docs.sentry.io/platforms/javascript/guides/cordova.md)
- [Deno](https://docs.sentry.io/platforms/javascript/guides/deno.md)
- [Effect](https://docs.sentry.io/platforms/javascript/guides/effect.md)
- [Electron](https://docs.sentry.io/platforms/javascript/guides/electron.md)
- [Elysia](https://docs.sentry.io/platforms/javascript/guides/elysia.md)
- [Ember](https://docs.sentry.io/platforms/javascript/guides/ember.md)
- [Express](https://docs.sentry.io/platforms/javascript/guides/express.md)
- [Fastify](https://docs.sentry.io/platforms/javascript/guides/fastify.md)
- [Gatsby](https://docs.sentry.io/platforms/javascript/guides/gatsby.md)
- [Google Cloud Functions](https://docs.sentry.io/platforms/javascript/guides/gcp-functions.md)
- [Hapi](https://docs.sentry.io/platforms/javascript/guides/hapi.md)
- [Hono](https://docs.sentry.io/platforms/javascript/guides/hono.md)
- [Koa](https://docs.sentry.io/platforms/javascript/guides/koa.md)
- [Nest.js](https://docs.sentry.io/platforms/javascript/guides/nestjs.md)
- [Next.js](https://docs.sentry.io/platforms/javascript/guides/nextjs.md)
- [Node.js](https://docs.sentry.io/platforms/javascript/guides/node.md)
- [Nuxt](https://docs.sentry.io/platforms/javascript/guides/nuxt.md)
- [React Router Framework](https://docs.sentry.io/platforms/javascript/guides/react-router.md)
- [Remix](https://docs.sentry.io/platforms/javascript/guides/remix.md)
- [Solid](https://docs.sentry.io/platforms/javascript/guides/solid.md)
- [SolidStart](https://docs.sentry.io/platforms/javascript/guides/solidstart.md)
- [Svelte](https://docs.sentry.io/platforms/javascript/guides/svelte.md)
- [SvelteKit](https://docs.sentry.io/platforms/javascript/guides/sveltekit.md)
- [TanStack Start React](https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react.md)
- [Vue](https://docs.sentry.io/platforms/javascript/guides/vue.md)
- [Wasm](https://docs.sentry.io/platforms/javascript/guides/wasm.md)

## Topics

- [Capturing Errors](https://docs.sentry.io/platforms/javascript/guides/react/usage.md)
- [Source Maps](https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps.md)
- [Logs](https://docs.sentry.io/platforms/javascript/guides/react/logs.md)
- [React Features](https://docs.sentry.io/platforms/javascript/guides/react/features.md)
- [Session Replay](https://docs.sentry.io/platforms/javascript/guides/react/session-replay.md)
- [Tracing](https://docs.sentry.io/platforms/javascript/guides/react/tracing.md)
- [AI Agent Monitoring](https://docs.sentry.io/platforms/javascript/guides/react/ai-agent-monitoring-browser.md)
- [Metrics](https://docs.sentry.io/platforms/javascript/guides/react/metrics.md)
- [Profiling](https://docs.sentry.io/platforms/javascript/guides/react/profiling.md)
- [User Feedback](https://docs.sentry.io/platforms/javascript/guides/react/user-feedback.md)
- [Sampling](https://docs.sentry.io/platforms/javascript/guides/react/sampling.md)
- [Enriching Events](https://docs.sentry.io/platforms/javascript/guides/react/enriching-events.md)
- [Extended Configuration](https://docs.sentry.io/platforms/javascript/guides/react/configuration.md)
- [Feature Flags](https://docs.sentry.io/platforms/javascript/guides/react/feature-flags.md)
- [Data Management](https://docs.sentry.io/platforms/javascript/guides/react/data-management.md)
- [Security Policy Reporting](https://docs.sentry.io/platforms/javascript/guides/react/security-policy-reporting.md)
- [Special Use Cases](https://docs.sentry.io/platforms/javascript/guides/react/best-practices.md)
- [Migration Guide](https://docs.sentry.io/platforms/javascript/guides/react/migration.md)
- [Troubleshooting](https://docs.sentry.io/platforms/javascript/guides/react/troubleshooting.md)