From 40cfe8ae4f1ba145bbfb463f94ec8e3ddf1e2434 Mon Sep 17 00:00:00 2001 From: JPeer264 Date: Thu, 10 Sep 2026 09:12:48 +0200 Subject: [PATCH 1/2] docs(angular): Fix snippets that fail to compile Three snippets in the Angular guide don't build under the tsconfig `ng new` generates, from the runtime docs audit (SDK-1506). - `manual-setup` called `inject(TraceService)` while importing only `Sentry`, so `ng build` failed with `TS2304 Cannot find name 'TraceService'`. Call `inject(Sentry.TraceService)` - The custom error handler declared `handleError` without `override`, which `noImplicitOverride` rejects with `TS4114` - The component tracking examples used `OnChanges`, `OnDestroy` and `SimpleChanges` without importing them, and the paired template read a `user` input the class never declared. Import what they use, declare the input, and drop the two child components the example doesn't define Co-Authored-By: Claude Opus 5 --- .../angular/features/component-tracking.mdx | 18 +++++++++++++----- .../guides/angular/features/error-handler.mdx | 2 +- .../javascript/guides/angular/manual-setup.mdx | 2 +- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/docs/platforms/javascript/guides/angular/features/component-tracking.mdx b/docs/platforms/javascript/guides/angular/features/component-tracking.mdx index fa5ed2f9a4cde0..773b0fe90bf9f4 100644 --- a/docs/platforms/javascript/guides/angular/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/angular/features/component-tracking.mdx @@ -78,7 +78,7 @@ Note: Due to code minification in production builds, you need to pass a `name` p The `TraceMethod` decorator tracks specific component lifecycle hooks as point-in-time spans. The added spans are called **`ui.angular.[methodname]`** (like, `ui.angular.ngOnChanges`). For example, you can use this decorator to track how often component changes are detected: ```typescript {filename:login.component.ts} {2,9} -import { Component, OnInit } from "@angular/core"; +import { Component, OnChanges, SimpleChanges } from "@angular/core"; import * as Sentry from "@sentry/angular"; @Component({ @@ -103,8 +103,14 @@ You can combine our component tracking utilities and track the bootstrapping dur To get the best insights into your components' performance, you can combine `TraceDirective`, `TraceClassDecorator`, and `TraceMethodDecorator`. This allows you to track component initialization durations as well as arbitrary lifecycle events, such as change and destroy events: -```typescript {filename:user-card.component.ts} {2,8,10,13} -import { Component, OnInit } from "@angular/core"; +```typescript {filename:user-card.component.ts} {8,14,18,21} +import { + Component, + Input, + OnChanges, + OnDestroy, + SimpleChanges, +} from "@angular/core"; import * as Sentry from "@sentry/angular"; @Component({ @@ -113,6 +119,8 @@ import * as Sentry from "@sentry/angular"; }) @Sentry.TraceClass() export class UserCardComponent implements OnChanges, OnDestroy { + @Input() user!: { name: string }; + @Sentry.TraceMethod() ngOnChanges(changes: SimpleChanges) {} @@ -125,10 +133,10 @@ Use the `trace` directive if you only want to track components in certain instan ```html {filename: user-card.component.html} {2,5}
- user + user - Save +
``` diff --git a/docs/platforms/javascript/guides/angular/features/error-handler.mdx b/docs/platforms/javascript/guides/angular/features/error-handler.mdx index 6132d331111870..7a1a6a052381c2 100644 --- a/docs/platforms/javascript/guides/angular/features/error-handler.mdx +++ b/docs/platforms/javascript/guides/angular/features/error-handler.mdx @@ -73,7 +73,7 @@ export class CustomErrorHandler extends Sentry.SentryErrorHandler { super({ logErrors: false }); } - handleError(error: any): void { + override handleError(error: any): void { // Your custom error handling logic // Call Sentry's error handler to capture errors: super.handleError(error); diff --git a/docs/platforms/javascript/guides/angular/manual-setup.mdx b/docs/platforms/javascript/guides/angular/manual-setup.mdx index 669a7c342c38b5..4c05e2b28da245 100644 --- a/docs/platforms/javascript/guides/angular/manual-setup.mdx +++ b/docs/platforms/javascript/guides/angular/manual-setup.mdx @@ -267,7 +267,7 @@ export const appConfig: ApplicationConfig = { deps: [Router], }, provideAppInitializer(() => { - inject(TraceService); + inject(Sentry.TraceService); }), // ___PRODUCT_OPTION_END___ performance ], From b34b190ee982a0d8069dfd3d3dc4a81ea776d7e6 Mon Sep 17 00:00:00 2001 From: JPeer264 Date: Thu, 10 Sep 2026 10:46:25 +0200 Subject: [PATCH 2/2] fixup! docs(angular): Fix snippets that fail to compile --- .../guides/angular/features/component-tracking.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/platforms/javascript/guides/angular/features/component-tracking.mdx b/docs/platforms/javascript/guides/angular/features/component-tracking.mdx index 773b0fe90bf9f4..f02b02336fc4a3 100644 --- a/docs/platforms/javascript/guides/angular/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/angular/features/component-tracking.mdx @@ -117,14 +117,14 @@ import * as Sentry from "@sentry/angular"; selector: "app-user-card", templateUrl: "./user-card.component.html", }) -@Sentry.TraceClass() +@Sentry.TraceClass({ name: "UserCard" }) export class UserCardComponent implements OnChanges, OnDestroy { @Input() user!: { name: string }; - @Sentry.TraceMethod() + @Sentry.TraceMethod({ name: "UserCard.ngOnChanges" }) ngOnChanges(changes: SimpleChanges) {} - @Sentry.TraceMethod() + @Sentry.TraceMethod({ name: "UserCard.ngOnDestroy" }) ngOnDestroy() {} } ``` @@ -133,10 +133,10 @@ Use the `trace` directive if you only want to track components in certain instan ```html {filename: user-card.component.html} {2,5}
- user + user - + Save
```