@sentry/browser
Advanced tools
The @sentry/browser package is a JavaScript SDK for Sentry, which is an error tracking service that helps developers monitor and fix crashes in real time. The SDK hooks into the global error handling mechanisms of the browser and captures unhandled exceptions and other errors, providing rich context and insights into the underlying issues.
Error Tracking
This feature automatically captures JavaScript exceptions and sends them to Sentry for analysis and tracking. The code initializes Sentry with a DSN (Data Source Name) and sets up a global error handler to capture exceptions.
Sentry.init({ dsn: 'YOUR_DSN' });
window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
Sentry.captureException(errorObj);
return false;
}Manual Error Reporting
This allows developers to manually report exceptions or errors to Sentry. The code block demonstrates how to catch an error in a try-catch block and manually send it to Sentry using the captureException method.
Sentry.init({ dsn: 'YOUR_DSN' });
try {
// Code that might fail
} catch (error) {
Sentry.captureException(error);
}Performance Monitoring
This feature enables performance monitoring by capturing transactions and spans. The code initializes Sentry with a sample rate for transactions and demonstrates how to start and finish a transaction, which can be used to measure the performance of operations.
Sentry.init({ dsn: 'YOUR_DSN', tracesSampleRate: 1.0 });
const transaction = Sentry.startTransaction({ name: 'test transaction' });
// ... some code ...
transaction.finish();Breadcrumbs
Breadcrumbs are a trail of events that happened prior to an issue. This feature allows you to record breadcrumbs manually. The code shows how to add a breadcrumb for an authentication event.
Sentry.init({ dsn: 'YOUR_DSN' });
Sentry.addBreadcrumb({
category: 'auth',
message: 'User authenticated',
level: Sentry.Severity.Info
});User Feedback
This feature allows you to collect user feedback when an error occurs. The code initializes Sentry and then shows a dialog to the user to collect feedback for a specific event.
Sentry.init({ dsn: 'YOUR_DSN' });
Sentry.showReportDialog({ eventId: 'event_id' });Bugsnag provides similar error tracking and monitoring capabilities as Sentry. It offers real-time error reporting and can be used to monitor application stability. Bugsnag also provides features for error diagnostics and supports multiple platforms.
Raygun is another error monitoring service that offers crash reporting with detailed diagnostics. It supports real-time error tracking and performance monitoring, and it can be used to identify and diagnose software errors and performance issues.
Rollbar offers real-time error tracking and is similar to Sentry in its capabilities. It includes features like telemetry, person tracking, and version tracking. Rollbar provides a comprehensive dashboard for monitoring and analyzing errors.
To use this SDK, call Sentry.init(options) as early as possible after loading the page. This will initialize the SDK
and hook into the environment. Note that you can turn off almost all side effects using the respective options.
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: '__DSN__',
// ...
});
To set context information or send manual events, use the exported functions of @sentry/browser. Note that these
functions will not perform any action before you have called Sentry.init():
import * as Sentry from '@sentry/browser';
// Set user information, as well as tags and further extras
Sentry.setExtra('battery', 0.7);
Sentry.setTag('user_mode', 'admin');
Sentry.setUser({ id: '4711' });
// Add a breadcrumb for future events
Sentry.addBreadcrumb({
message: 'My Breadcrumb',
// ...
});
// Capture exceptions, messages or manual events
Sentry.captureMessage('Hello, world!');
Sentry.captureException(new Error('Good bye'));
Sentry.captureEvent({
message: 'Manual',
stacktrace: [
// ...
],
});
8.8.0
This upgrades the OpenTelemetry dependencies to the latest versions and makes OTEL use import-in-the-middle v1.8.0.
This should fix numerous issues with using OTEL instrumentation with ESM.
High level issues fixed with OTEL + ESM:
tsx or similar libraries.date-fns.openai.ENOENT: no such file or directory bugs that libraries like discord.js
surface.If you are still encountering issues with OpenTelemetry instrumentation and ESM, please let us know.
2.18.0 (#12381)thirdPartyErrorFilterIntegration (#12267)mget command in caching functionality (#12380)clientTraceMetadata option (#12323)sentry property on Next.js config object (#12366)Work in this release contributed by @dohooo, @mohd-akram, and @ykzts. Thank you for your contributions!
FAQs
Official Sentry SDK for browsers
The npm package @sentry/browser receives a total of 6,012,604 weekly downloads. As such, @sentry/browser popularity was classified as popular.
We found that @sentry/browser 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
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.