\n\n# Official Sentry SDK for ReactJS\n\n## Links\n\n- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/react/)\n\n## General\n\nThis package is a wrapper around `@sentry/browser`, with added functionality related to React. All methods available in\n`@sentry/browser` can be imported from `@sentry/react`.\n\nTo use this SDK, call `Sentry.init(options)` before you mount your React component.\n\n```javascript\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport * as Sentry from '@sentry/react';\n\nSentry.init({\n dsn: '__DSN__',\n // ...\n});\n\n// ...\n\nconst container = document.getElementById(“app”);\nconst root = createRoot(container);\nroot.render();\n\n// also works with hydrateRoot\n// const domNode = document.getElementById('root');\n// const root = hydrateRoot(domNode, reactNode);\n// root.render();\n```\n\n### React 19\n\nStarting with React 19, the `createRoot` and `hydrateRoot` methods expose error hooks that can be used to capture errors\nautomatically. Use the `Sentry.reactErrorHandler` function to capture errors in the error hooks you are interested in.\n\n```js\nconst container = document.getElementById(“app”);\nconst root = createRoot(container, {\n // Callback called when an error is thrown and not caught by an Error Boundary.\n onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => {\n console.warn('Uncaught error', error, errorInfo.componentStack);\n }),\n // Callback called when React catches an error in an Error Boundary.\n onCaughtError: Sentry.reactErrorHandler(),\n // Callback called when React automatically recovers from errors.\n onRecoverableError: Sentry.reactErrorHandler(),\n});\nroot.render();\n```\n\nIf you want more finely grained control over error handling, we recommend only adding the `onUncaughtError` and\n`onRecoverableError` hooks and using an `ErrorBoundary` component instead of the `onCaughtError` hook.\n\n### ErrorBoundary\n\n`@sentry/react` exports an ErrorBoundary component that will automatically send Javascript errors from inside a\ncomponent tree to Sentry, and set a fallback UI.\n\n> app.js\n\n```javascript\nimport React from 'react';\nimport * as Sentry from '@sentry/react';\n\nfunction FallbackComponent() {\n return
An error has occurred
;\n}\n\nclass App extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n}\n\nexport default App;\n```\n\n### Profiler\n\n`@sentry/react` exports a Profiler component that leverages the tracing features to add React-related spans to\ntransactions. If tracing is not enabled, the Profiler component will not work. The Profiler tracks component mount,\nrender duration and updates.\n\n> app.js\n\n```javascript\nimport React from 'react';\nimport * as Sentry from '@sentry/react';\n\nclass App extends React.Component {\n render() {\n return (\n \n \n \n \n );\n }\n}\n\nexport default Sentry.withProfiler(App);\n```","users":{}}
![\"Sentry\"](\"https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png\")
\n \n