# @sentry/react

> Official Sentry SDK for React.js

Latest version **10.74.0** (published 2026-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sentry/react
pnpm add @sentry/react
yarn add @sentry/react
bun add @sentry/react
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 10.74.0 |
| Published | 2026-09-09 |
| First published | 2020-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 3 |
| Unpacked size | 718.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8745 |
| Author | Sentry |
| Maintainers | sentry-bot |

## Links

- npm: https://www.npmjs.com/package/@sentry/react
- Repository: https://github.com/getsentry/sentry-javascript
- Homepage: https://github.com/getsentry/sentry-javascript/tree/master/packages/react
- Issues: https://github.com/getsentry/sentry-javascript/issues
- npm.io page: https://npm.io/package/@sentry/react

## Dependencies (3)

- [@sentry/core](https://npm.io/package/@sentry/core.md) 10.74.0
- [@sentry/browser](https://npm.io/package/@sentry/browser.md) 10.74.0
- [@sentry/conventions](https://npm.io/package/@sentry/conventions.md) ^0.16.0

## Recent versions

- 10.74.0 (latest) — 2026-09-09
- 11.0.0-beta.2 (next) — 2026-09-09
- 8.55.2 (v8) — 2026-04-28
- 9.47.1 (v9) — 2025-11-17
- 7.120.4 (v7) — 2025-07-29
- 11.0.0-beta.1 — 2026-09-03
- 11.0.0-beta.0 — 2026-09-02
- 10.73.0 — 2026-08-31
- 11.0.0-alpha.2 — 2026-08-28
- 10.72.0 — 2026-08-28
- 10.71.0 — 2026-08-24
- 11.0.0-alpha.1 — 2026-08-12
- 10.70.0 — 2026-08-10
- 11.0.0-alpha.0 — 2026-08-07
- 10.69.0 — 2026-07-29
- … 572 more at https://npm.io/package/@sentry/react/versions

## README

<p align="center">
  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
  </a>
</p>

# Official Sentry SDK for ReactJS

## Links

- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/react/)

## General

This package is a wrapper around `@sentry/browser`, with added functionality related to React. All methods available in
`@sentry/browser` can be imported from `@sentry/react`.

To use this SDK, call `Sentry.init(options)` before you mount your React component.

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

Sentry.init({
  dsn: '__DSN__',
  // ...
});

// ...

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

// also works with hydrateRoot
// const domNode = document.getElementById('root');
// const root = hydrateRoot(domNode, reactNode);
// root.render(<App />);
```

### React 19

Starting with React 19, the `createRoot` and `hydrateRoot` methods expose error hooks that can be used to capture errors
automatically. Use the `Sentry.reactErrorHandler` function to capture errors in the error hooks you are interested in.

```js
const container = document.getElementById(“app”);
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 />);
```

If you want more finely grained control over error handling, we recommend only adding the `onUncaughtError` and
`onRecoverableError` hooks and using an `ErrorBoundary` component instead of the `onCaughtError` hook.

### ErrorBoundary

`@sentry/react` exports an ErrorBoundary component that will automatically send Javascript errors from inside a
component tree to Sentry, and set a fallback UI.

> app.js

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

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

class App extends React.Component {
  render() {
    return (
      <Sentry.ErrorBoundary fallback={FallbackComponent} showDialog>
        <OtherComponents />
      </Sentry.ErrorBoundary>
    );
  }
}

export default App;
```

### Profiler

`@sentry/react` exports a Profiler component that leverages the tracing features to add React-related spans to
transactions. If tracing is not enabled, the Profiler component will not work. The Profiler tracks component mount,
render duration and updates.

> app.js

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

class App extends React.Component {
  render() {
    return (
      <FancyComponent>
        <InsideComponent someProp={2} />
        <AnotherComponent />
      </FancyComponent>
    );
  }
}

export default Sentry.withProfiler(App);
```

---
_Source: https://npm.io/package/@sentry/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._