# 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(); // also works with hydrateRoot // const domNode = document.getElementById('root'); // const root = hydrateRoot(domNode, reactNode); // root.render(); ``` ### 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(); ``` 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

An error has occurred

; } class App extends React.Component { render() { return ( ); } } 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 ( ); } } export default Sentry.withProfiler(App); ```

パッケージ	ダウンロード数	Stars	サイズ	Issues	公開日時	ライセンス

@sentry/react	5,106,833	8,318	454 kB	431	1日前	MIT