Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@sentry/angular
Advanced tools
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);
},
);
8.26.0
feat(node): Add fsInstrumentation
(#13291)
This release adds fsIntegration
, an integration that instruments the fs
API to the Sentry Node SDK. The
integration creates spans with naming patterns of fs.readFile
, fs.unlink
, and so on.
This integration is not enabled by default and needs to be registered in your Sentry.init
call. You can configure
via options whether to include path arguments or error messages as span attributes when an fs call fails:
Sentry.init({
integrations: [
Sentry.fsIntegration({
recordFilePaths: true,
recordErrorMessagesAsSpanAttributes: true,
}),
],
});
WARNING: This integration may add significant overhead to your application. Especially in scenarios with a lot of file I/O, like for example when running a framework dev server, including this integration can massively slow down your application.
feat(browser): Add spotlightBrowser integration (#13263)
feat(browser): Allow sentry in safari extension background page (#13209)
feat(browser): Send CLS as standalone span (experimental) (#13056)
feat(core): Add OpenTelemetry-specific getTraceData
implementation (#13281)
feat(nextjs): Always add browserTracingIntegration
(#13324)
feat(nextjs): Always transmit trace data to the client (#13337)
feat(nextjs): export SentryBuildOptions (#13296)
feat(nextjs): Update experimental_captureRequestError
to reflect RequestInfo.path
change in Next.js canary
(#13344)
feat(nuxt): Always add tracing meta tags (#13273)
feat(nuxt): Set transaction name for server error (#13292)
feat(replay): Add a replay-specific logger (#13256)
feat(sveltekit): Add bundle size optimizations to plugin options (#13318)
feat(sveltekit): Always add browserTracingIntegration (#13322)
feat(tracing): Make long animation frames opt-out (#13255)
fix(astro): Correctly extract request data (#13315)
fix(astro): Only track access request headers in dynamic page requests (#13306)
fix(nuxt): Add import line for disabled autoImport
(#13342)
fix(nuxt): Add vue to excludeEsmLoaderHooks array (#13346)
fix(opentelemetry): Do not overwrite http span name if kind is internal (#13282)
fix(remix): Ensure origin
is correctly set for remix server spans (#13305)
Work in this release was contributed by @MonstraG, @undead-voron and @Zen-cronic. Thank you for your contributions!
FAQs
Official Sentry SDK for Angular
The npm package @sentry/angular receives a total of 89,068 weekly downloads. As such, @sentry/angular popularity was classified as popular.
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 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.