Security News
pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
@sentry/angular
Advanced tools
Changelog
8.5.0
This release adds support for React 19 in the @sentry/react
SDK package.
@sentry/node/preload
hook (#12213)This release adds a new way to initialize @sentry/node
, which allows you to use the SDK with performance
instrumentation even if you cannot call Sentry.init()
at the very start of your app.
First, run the SDK like this:
node --require @sentry/node/preload ./app.js
Now, you can initialize and import the rest of the SDK later or asynchronously:
const express = require('express');
const Sentry = require('@sentry/node');
const dsn = await getSentryDsn();
Sentry.init({ dsn });
For more details, head over to the PR Description of the new feature. Our docs will be updated soon with a new guide.
startNewTrace
API (#12138)captureFeedback()
(#12216)SerializedSession
in session envelope items (#11979)waitUntil
to defer freezing of Vercel Lambdas (#12133)Module._resolveFilename
in Lambda layer bundle (#12232)ImportInTheMiddle
(#12233)@prisma/instrumentation
to use default import (#12185)inspector
asynchronously (#12231)Readme
This SDK officially supports Angular 15 to 17.
If you're using an older Angular version please check the compatibility table in the docs.
If you're using an older version of Angular and experience problems with the Angular SDK, we recommend downgrading the SDK to version 7.x. Please note that we don't provide any support for Angular versions below 10.
This package is a wrapper around @sentry/browser
, with added functionality related to Angular. All methods available
in @sentry/browser
can be imported from @sentry/angular
.
To use this SDK, call Sentry.init(options)
before you bootstrap your Angular application.
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { init } from '@sentry/angular';
import { AppModule } from './app/app.module';
init({
dsn: '__DSN__',
// ...
});
// ...
enableProdMode();
platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(success => console.log(`Bootstrap success`))
.catch(err => console.error(err));
@sentry/angular
exports a function to instantiate an ErrorHandler provider that will automatically send Javascript
errors captured by the Angular's error handler.
import { NgModule, ErrorHandler } from '@angular/core';
import { createErrorHandler } from '@sentry/angular';
@NgModule({
// ...
providers: [
{
provide: ErrorHandler,
useValue: createErrorHandler({
showDialog: true,
}),
},
],
// ...
})
export class AppModule {}
Additionally, createErrorHandler
accepts a set of options that allows you to configure its behavior. For more details
see ErrorHandlerOptions
interface in src/errorhandler.ts
.
@sentry/angular
exports a Trace Service, Directive and Decorators that leverage the tracing features to add
Angular-related spans to transactions. If tracing is not enabled, this functionality will not work. The SDK's
TraceService
itself tracks route changes and durations, while directive and decorators are tracking components
initializations.
Registering a Trace Service is a 3-step process.
BrowserTracing
integration, including custom Angular routing instrumentation:import { init, browserTracingIntegration } from '@sentry/angular';
init({
dsn: '__DSN__',
integrations: [browserTracingIntegration()],
tracePropagationTargets: ['localhost', 'https://yourserver.io/api'],
tracesSampleRate: 1,
});
SentryTrace
as a provider in Angular's DI system, with a Router
as its dependency:import { NgModule } from '@angular/core';
import { Router } from '@angular/router';
import { TraceService } from '@sentry/angular';
@NgModule({
// ...
providers: [
{
provide: TraceService,
deps: [Router],
},
],
// ...
})
export class AppModule {}
TraceService
from inside AppModule
or use APP_INITIALIZER
to force-instantiate Tracing.@NgModule({
// ...
})
export class AppModule {
constructor(trace: TraceService) {}
}
or
import { APP_INITIALIZER } from '@angular/core';
@NgModule({
// ...
providers: [
{
provide: APP_INITIALIZER,
useFactory: () => () => {},
deps: [TraceService],
multi: true,
},
],
// ...
})
export class AppModule {}
To track Angular components as part of your transactions, you have 3 options.
TraceDirective: used to track a duration between OnInit
and AfterViewInit
lifecycle hooks in template:
import { TraceModule } from '@sentry/angular';
@NgModule({
// ...
imports: [TraceModule],
// ...
})
export class AppModule {}
Then, inside your component's template (keep in mind that the directive's name attribute is required):
<app-header trace="header"></app-header>
<articles-list trace="articles-list"></articles-list>
<app-footer trace="footer"></app-footer>
TraceClass: used to track a duration between OnInit
and AfterViewInit
lifecycle hooks in components:
import { Component } from '@angular/core';
import { TraceClass } from '@sentry/angular';
@Component({
selector: 'layout-header',
templateUrl: './header.component.html',
})
@TraceClass()
export class HeaderComponent {
// ...
}
TraceMethod: used to track a specific lifecycle hooks as point-in-time spans in components:
import { Component, OnInit } from '@angular/core';
import { TraceMethod } from '@sentry/angular';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
})
export class FooterComponent implements OnInit {
@TraceMethod()
ngOnInit() {}
}
You can also add your own custom spans via startSpan()
. For example, if you'd like to track the duration of Angular
boostraping process, you can do it as follows:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { init, startSpan } from '@sentry/angular';
import { AppModule } from './app/app.module';
// ...
startSpan(
{
name: 'platform-browser-dynamic',
op: 'ui.angular.bootstrap',
},
async () => {
await platformBrowserDynamic().bootstrapModule(AppModule);
},
);
FAQs
Unknown package
We found that @sentry/angular demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
Security News
A threat actor on BreachForums is selling an unverified npm vulnerability for account takeover, but npm has not officially confirmed the existence of this security concern.
Security News
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.