# Official Sentry SDK for ReactJS
## Links
- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/react/)
- [TypeDoc](http://getsentry.github.io/sentry-javascript/)
## 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 ReactDOM from "react-dom";
import * as Sentry from '@sentry/react';
Sentry.init({
dsn: '__DSN__',
// ...
});
// ...
ReactDOM.render(, rootNode);
// Can also use with React Concurrent Mode
// ReactDOM.createRoot(rootNode).render();
```
### 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. Requires React version >= 16.
> app.js
```javascript
import React from 'react';
import * as Sentry from '@sentry/react';
function FallbackComponent() {
return (
An error has occured
)
}
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. Requires React version >= 15.
> 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);
```