Skip to content

docs(angular): Fix snippets that fail to compile #19333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JPeer264 wants to merge 2 commits into
base: master
Choose a base branch
from
+16 −8
Open

docs(angular): Fix snippets that fail to compile #19333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40cfe8a
docs(angular): Fix snippets that fail to compile
JPeer264 Sep 10, 2026
b34b190
fixup! docs(angular): Fix snippets that fail to compile
JPeer264 Sep 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions docs/platforms/javascript/guides/angular/features/component-tracking.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -103,20 +103,28 @@ 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({
selector: "app-user-card",
templateUrl: "./user-card.component.html",
})
@Sentry.TraceClass()
@Sentry.TraceClass({ name: "UserCard" })
export class UserCardComponent implements OnChanges, OnDestroy {
@Sentry.TraceMethod()
@Input() user!: { name: string };

@Sentry.TraceMethod({ name: "UserCard.ngOnChanges" })
ngOnChanges(changes: SimpleChanges) {}

@Sentry.TraceMethod()
@Sentry.TraceMethod({ name: "UserCard.ngOnDestroy" })
ngOnDestroy() {}
}
```
Comment on lines +120 to 130

@sentry sentry Bot Sep 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The HTML template in the Angular documentation example still uses <app-icon> and <app-button>, which are not defined, causing a compilation error.
Severity: MEDIUM

Suggested Fix

Remove the undefined <app-icon> and <app-button> elements from the user-card.component.html template snippet in the documentation. This will align the HTML with the component's definition and resolve the NG8001 compilation error, making the example code valid and buildable.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location:
docs/platforms/javascript/guides/angular/features/component-tracking.mdx#L103-L130

Potential issue: The pull request aimed to fix compilation errors in an Angular
documentation example but provided an incomplete solution. While the TypeScript code was
corrected, the associated HTML template snippet still includes the custom components
`<app-icon>` and `<app-button>`. These components are not defined or imported anywhere
in the example, which will lead to an `NG8001` compilation error when a user tries to
build the code. The PR description mentioned an intent to "drop the two child
components," but this change was not applied to the HTML.

Did we get this right? 👍 / 👎 to inform future reviews.

Expand Down
2 changes: 1 addition & 1 deletion docs/platforms/javascript/guides/angular/features/error-handler.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export class CustomErrorHandler extends Sentry.SentryErrorHandler {
super({ logErrors: false });
}

handleError(error: any): void {
override handleError(error: any): void {

@Lms24 Lms24 Sep 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

m: is this valid syntax? Angular docs for error handlers don't mention an override: https://angular.dev/api/core/ErrorHandler#usage-notes

@JPeer264 JPeer264 Sep 10, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. I (... Claude) created a new project with ng new and it creates a tsconfig with "noImplicitOverride": true (tested probe)

When leaving "noImplicitOverride": true, which is the default, I'll get this error:

Screenshot 2026-09-10 at 10 36 05

@Lms24 Lms24 Sep 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm okay, maybe the angular docs are out of date 😅
tbh, I never saw this before but if this is how Angular scaffolds a project by default, then let's use it :)

// Your custom error handling logic
// Call Sentry's error handler to capture errors:
super.handleError(error);
Expand Down
2 changes: 1 addition & 1 deletion docs/platforms/javascript/guides/angular/manual-setup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ export const appConfig: ApplicationConfig = {
deps: [Router],
},
provideAppInitializer(() => {
inject(TraceService);
inject(Sentry.TraceService);
}),
// ___PRODUCT_OPTION_END___ performance
],
Expand Down
Loading