Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@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.0.0-alpha.4
This is the fourth Alpha release of the v8 cycle, which includes a variety of breaking changes.
Read the in-depth migration guide to find out how to address any breaking changes in your code.
The minimum Node version required for the SDK is now 14.18.0
.
@sentry/google-cloud-serverless
(#11065)@sentry/serverless
is no longer published, and is replaced by two new packages: @sentry/google-cloud-serverless
and
@sentry/aws-serverless
. These packages are now the recommended way to instrument serverless functions. See the
migration guide for more details.
The Browser SDK and CDN bundles now emits ES2017 compatible code and drops support for IE11. This also means that the
Browser SDKs (@sentry/browser
, @sentry/react
, @sentry/vue
, etc.) requires the fetch API to be available in the
environment. If you need to support older browsers, please transpile your code to ES5 using babel or similar and add
required polyfills.
New minimum supported browsers:
startTransaction
export (#11015)unmask
and unblock
(#11049)replaySession
and errorSampleRates
(#11045)spanRecorder
and all related code (#10977)origin
field on span start options (#11058)startSpan
options (#11054)startTransaction
& finishTransaction
hooks (#11008)sentry
field in Next.js config as a means of configuration (#10839)startChild
deprecations (#10956)getRootSpan()
does not rely on transaction (#10979)getSpanDescendants()
everywhere (#10924)transactionName
when route is resolved (#11043)name
parameter (#11057)@sentry/astro
to use OpenTelemetry (#10960)HttpContext
integration class (#10987)scope.transactionName
from root spans (#10991)startIdleSpan
(#10934)__SENTRY__
singleton (#11034)__SENTRY__
(#11074)continueTrace
to be callback-only (#11044)spanToJSON
to handle OTEL spans (#10922)tunnelRoute
option (#10959)setupFastifyErrorHandler
utility (#11061)getRootSpan
functionality (#11004)transactionName
in React Router instrumentations (#11048)unstable_sentryVitePluginOptions
for full Vite plugin customization (#10930)createReduxEnhancer
on server (#11005)handled
value in ErrorBoundary depending on fallback (#10989)addScopeListener
to Scope
interface (#10952)AttachmentType
and use for envelope attachment_type
property (#10946)allowSyntheticDefaultImports
(#11073)startChild
(#11056)scope.transactionName
on pageload and navigation span creation (#10992)startChild()
(#11047)http
& undici
(#11055)Work in this release contributed by @MFoster and @jessezhang91. Thank you for your contributions!
FAQs
Official Sentry SDK for browsers
The npm package @sentry/browser receives a total of 6,069,536 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.