![Introducing Dashboard Analytics](https://cdn.sanity.io/images/cgdhsj6q/production/af327c5bd94708db501516a75da6870aef894c64-2286x1522.png?w=400&fit=max&auto=format)
Product
Introducing Dashboard Analytics
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
@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-beta.5
This beta release contains various bugfixes and improvements for the v8 beta cycle.
We now officially support Svelte 5.
Starting with this version, spans for outgoing fetch/xhr requests will be captured even if no pageload/navigation span is ongoing. This means that you will be able to have a more complete trace, especially for web applications that make a lot of HTTP requests on longer lived pages.
transactionName
to isolation scope for requests (#11786)startInactiveSpan
(#11788)trace
envelope header to span envelope (#11699)start*Span
APIs (#11696)withMonitor
callback in withIsolationScope
(#11797)transactionName
to isolation scope for Next.js server side features (#11782)@opentelemetry/instrumentation
(#11810)wrapHandleErrorWithSentry
(#10370)formData
as action
span data. (#10836)transactionName
for Remix server features (#11784)showReportDialog
in root context (#11703)loader
, action
and documentRequest
errors (#11793)captureException()
, captureMessage()
, and
captureEvent()
(#11805)requestDataIntegration
(#11513)onlyIfParent
for recording component update spans (#11809)FAQs
Official Sentry SDK for React.js
The npm package @sentry/react receives a total of 1,425,966 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.
Product
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.
Security News
A new OpenSSF report uncovers critical gaps in secure software training, with 75% of new developers unfamiliar with secure practices, highlighting urgent educational needs.
Security News
The 2023 Python Developers Survey reveals key trends in packaging, web frameworks, and developer demographics, highlighting a shift toward innovative tools as the Python community diversifies and grows among less experienced developers.