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.
import React from 'react';
import ReactDOM from 'react-dom';
import * as Sentry from '@sentry/react';
Sentry.init({
dsn: '__DSN__',
// ...
});
// ...
ReactDOM.render(<App />, rootNode);
// Can also use with React Concurrent Mode
// ReactDOM.createRoot(rootNode).render(<App />);@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
import React from 'react';
import * as Sentry from '@sentry/react';
function FallbackComponent() {
return <div>An error has occured</div>;
}
class App extends React.Component {
render() {
return (
<Sentry.ErrorBoundary fallback={FallbackComponent} showDialog>
<OtherComponents />
</Sentry.ErrorBoundary>
);
}
}
export default App;@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
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);