@sentry/react
Advanced tools
The @sentry/react package is designed for error monitoring and performance tracking in React applications. It provides a comprehensive set of tools to capture exceptions, track performance issues, and improve the overall reliability of React applications. By integrating Sentry into a React project, developers can gain insights into errors and performance bottlenecks, allowing for quicker debugging and optimization.
Error Boundary
This feature automatically catches JavaScript errors anywhere in the child component tree of the Error Boundary and logs them to Sentry. It also displays a fallback UI instead of the component tree that crashed.
import React from 'react';
import * as Sentry from '@sentry/react';
const MyApp = () => (
<Sentry.ErrorBoundary fallback={'An error has occurred'}>
<YourApp />
</Sentry.ErrorBoundary>
);Performance Monitoring
Enables performance monitoring in your React application. By setting the `tracesSampleRate` to a value between 0 and 1, you can control the percentage of transactions sent to Sentry for performance analysis.
import * as Sentry from '@sentry/react';
Sentry.init({
dsn: 'YOUR_DSN',
tracesSampleRate: 1.0,
});Custom Error Tracking
Allows for manual reporting of errors or exceptions to Sentry, giving developers the flexibility to capture specific issues that may not be automatically detected.
import * as Sentry from '@sentry/react';
Sentry.captureException(new Error('This is my custom error.'));LogRocket is a frontend application monitoring solution that provides session replay, performance monitoring, and error tracking. While it offers similar error tracking capabilities to @sentry/react, LogRocket distinguishes itself with its session replay feature, allowing developers to see exactly what users saw when an error occurred.
Bugsnag offers error monitoring and application stability management for various programming languages and frameworks, including React. Compared to @sentry/react, Bugsnag emphasizes application stability metrics and provides detailed error grouping and analysis, making it easier to prioritize and fix critical errors.
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);
8.0.0
The Sentry JS SDK team is proud to announce the release of version 8.0.0 of Sentry's JavaScript SDKs - it's been a
long time coming! Thanks to everyone for your patience and a special shout out to the brave souls testing preview builds
and reporting issues - we appreciate your support!
We recommend reading the migration guide docs to find out how to address any breaking changes in your code for your specific platform or framework.
To automate upgrading to v8 as much as possible, use our migration codemod @sentry/migr8:
npx @sentry/migr8@latest
All deprecations from the v7 cycle, with the exception of getCurrentHub(), have been removed and can no longer be used
in v8. If you have an advanced Sentry SDK setup, we additionally recommend reading the
in-depth migration guide in our repo which highlights all changes with additional details and
information.
The rest of this changelog highlights the most important (breaking) changes and links to more detailed information.
With v8, we dropped support for several old runtimes and browsers
Node SDKs: The Sentry JavaScript SDK v8 now supports Node.js 14.8.0 or higher. This applies to @sentry/node
and all of our node-based server-side sdks (@sentry/nextjs, @sentry/remix, etc.). Furthermore, version 8 now ships
with full support for ESM-based node apps using Node.js 18.19.0 or higher.
Browser SDKs: The browser SDKs now require ES2018+ compatible browsers. New minimum browser versions:
For more details, please see the version support section in our migration guide.
In v8, we support a lot more node-based packages than before. In order to ensure auto-instrumentation works, the SDK now needs to be imported and initialized before any other import in your code.
We recommend creating a new file (e.g. instrumentation.js) to import and initialize the SDK. Then, import the file on
top of your entry file or detailed instructions, check our updated SDK setup docs
initializing the SDK in v8.
The API around performance monitoring and tracing has been streamlined, and we've added support for more integrations out of the box.
Integrations are now simple functions instead of classes. Class-based integrations have been removed:
// old (v7)
Sentry.init({
integrations: [new Sentry.BrowserTracing()],
});
// new (v8)
Sentry.init({
integrations: [Sentry.browserTracingIntegration()],
});
The following packages have been removed or replaced and will no longer be published:
FAQs
Official Sentry SDK for React.js
The npm package @sentry/react receives a total of 2,952,150 weekly downloads. As such, @sentry/react popularity was classified as popular.
We found that @sentry/react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.