What is @sentry/browser?
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.
What are @sentry/browser's main functionalities?
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' });
Other packages similar to @sentry/browser
bugsnag-js
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.
raygun4js
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-browser
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.
Official Sentry SDK for Browsers
Links
Usage
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';
Sentry.setExtra('battery', 0.7);
Sentry.setTag('user_mode', 'admin');
Sentry.setUser({ id: '4711' });
Sentry.addBreadcrumb({
message: 'My Breadcrumb',
});
Sentry.captureMessage('Hello, world!');
Sentry.captureException(new Error('Good bye'));
Sentry.captureEvent({
message: 'Manual',
stacktrace: [
],
});
8.35.0
Beta release of the official Nuxt Sentry SDK
This release marks the beta release of the @sentry/nuxt
Sentry SDK. For details on how to use it, check out the
Sentry Nuxt SDK README. Please reach out on
GitHub if you have any feedback or concerns.
- feat(nuxt): Make dynamic import() wrapping default
(#13958) (BREAKING)
- feat(nuxt): Add Rollup plugin to wrap server entry with
import()
(#13945)
It is no longer required to add a Node --import
flag. Please update your start command to avoid initializing Sentry
twice (BREAKING CHANGE). The SDK will now apply modifications during the build of your application to allow for
patching of libraries during runtime. If run into issues with this change, you can disable this behavior in your
nuxt.config.ts
and use the --import
flag instead:
sentry: {
dynamicImportForServerEntry: false;
}
- feat(nuxt): Respect user-provided source map generation settings
(#14020)
We now require you to explicitly enable sourcemaps for the clientside so that Sentry can un-minify your errors. We made
this change so source maps aren't accidentally leaked to the public. Enable source maps on the client as follows:
export default defineNuxtConfig({
sourcemap: {
client: true,
},
});
- feat(nuxt): Log server instrumentation might not work in dev
(#14021)
- feat(nuxt): Add Http
responseHook
with waitUntil
(#13986)
Important Changes
- feat(vue): Add Pinia plugin (#13841)
Support for Pinia is added in this release for @sentry/vue
. To capture Pinia state data,
add createSentryPiniaPlugin()
to your Pinia store:
import { createPinia } from 'pinia';
import { createSentryPiniaPlugin } from '@sentry/vue';
const pinia = createPinia();
pinia.use(createSentryPiniaPlugin());
- feat(node): Implement Sentry-specific http instrumentation
(#13763)
This change introduces a new SentryHttpInstrumentation
to handle non-span related HTTP instrumentation, allowing it to
run side-by-side with OTel's HttpInstrumentation
. This improves support for custom OTel setups and avoids conflicts
with Sentry's instrumentation. Additionally, the spans: false
option is reintroduced for httpIntegration
to disable
span emission while still allowing custom HttpInstrumentation
instances (httpIntegration({ spans: false })
).
- feat(core): Make stream instrumentation opt-in
(#13951)
This change adds a new option trackFetchStreamPerformance
to the browser tracing integration. Only when set to true
,
Sentry will instrument streams via fetch.
Other Changes
- feat(node): Expose
suppressTracing
API (#13875) - feat(replay): Do not log "timeout while trying to read resp body" as exception
(#13965)
- chore(node): Bump
@opentelemetry/instrumentation-express
to 0.43.0
(#13948) - chore(node): Bump
@opentelemetry/instrumentation-fastify
to 0.40.0
(#13983) - fix: Ensure type for
init
is correct in meta frameworks
(#13938) - fix(core):
.set
the sentry-trace
header instead of .append
ing in fetch instrumentation
(#13907) - fix(module): keep version for node ESM package (#13922)
- fix(node): Ensure
ignoreOutgoingRequests
of httpIntegration
applies to breadcrumbs
(#13970) - fix(replay): Fix onError sampling when loading an expired buffered session
(#13962)
- fix(replay): Ignore older performance entries when starting manually
(#13969)
- perf(node): Truncate breadcrumb messages created by console integration
(#14006)
Work in this release was contributed by @ZakrepaShe and @zhiyan114. Thank you for your contributions!