docs(angular): Fix snippets that fail to compile by JPeer264 · Pull Request #19333 · getsentry/sentry-docs

JPeer264 · 2026-09-10T07:55:55Z

DESCRIBE YOUR PR

closes SDK-1506

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

IS YOUR CHANGE URGENT?

Help us prioritize incoming PRs by letting us know when the change needs to go live.
Select exactly one option. For deadlines, replace YYYY-MM-DD with the due date. You can update this information later by editing the PR description.

Urgent deadline (GA date, etc.): YYYY-MM-DD
Other deadline: YYYY-MM-DD
No deadline: Not urgent, can wait up to 1 week+

SLA

Teamwork makes the dream work, so please add a reviewer to your PRs.
Please give the docs team up to 1 week to review your PR unless you've supplied a deadline.

Thanks in advance for your help!

PRE-MERGE CHECKLIST

Make sure you've checked the following before merging your changes:

Checked Vercel preview for correctness, including links
PR was reviewed and approved by any necessary SMEs (subject matter experts)
PR was reviewed and approved by a member of the Sentry docs team

LEGAL BOILERPLATE

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

EXTRA RESOURCES

Sentry Docs contributor guide

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 <noreply@anthropic.com>

vercel · 2026-09-10T07:56:02Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
sentry-docs	Ready	Preview	Sep 10, 2026 8:57am UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
develop-docs	Ignored	Preview	Sep 10, 2026 8:57am UTC

linear-code · 2026-09-10T07:56:06Z

SDK-1506

github-actions · 2026-09-10T07:56:19Z

Please update the IS YOUR CHANGE URGENT? section of the PR description:

Select exactly one option.
If you selected an urgent or other deadline, provide the date as YYYY-MM-DD.

This information helps the Docs team prioritize your review.

Lms24 · 2026-09-10T08:05:40Z

+  <span trace="user-icon">user</span>
  <label>{{ user.name }}</label>
  <!--...-->
-  <app-button trace="save-user">Save</app-button>
+  <button trace="save-user">Save</button>


h: why these changes? the directive should apply to a component, not a primitive html element. I think it's totally fine to reference a child component that's not defined fwiw.

You're right. Thought when copy pasting that snippet it would fail, when there is no app-icon or app-button. But if it is ok when child components are not defined then I'll revert it

yeah it should just demonstrate how to use the directive. If you wanna add components somewhere in the snippet it's fine but I'd argue it's not necessary for brevity.

Lms24 · 2026-09-10T08:08:38Z

  }

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


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

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:

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 :)

Lms24 · 2026-09-10T08:11:07Z

l: I'd suggest we change this since defining a name in the decorator avoids potentially skewed names due to minification

Suggested change

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

ngOnChanges(changes: SimpleChanges) {}

@Sentry.TraceMethod({ name: "UserCard.ngOnDestroy" })

will change this

sentry · 2026-09-10T08:50:12Z

+@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() {}
 }
 ```


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.}

Lms24 · 2026-09-10T08:56:22Z

  }

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


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 :)

Lms24 · 2026-09-10T08:57:00Z

+  <span trace="user-icon">user</span>
  <label>{{ user.name }}</label>
  <!--...-->
-  <app-button trace="save-user">Save</app-button>
+  <button trace="save-user">Save</button>


yeah it should just demonstrate how to use the directive. If you wanna add components somewhere in the snippet it's fine but I'd argue it's not necessary for brevity.

JPeer264 requested a review from Lms24 September 10, 2026 07:55

JPeer264 self-assigned this Sep 10, 2026

github-actions Bot added the Priority: Needs Triage The PR description is missing valid priority information label Sep 10, 2026

codeowner-assignment Bot requested a review from a team September 10, 2026 07:56

vercel Bot deployed to Preview – sentry-docs September 10, 2026 08:02 View deployment

Lms24 reviewed Sep 10, 2026

View reviewed changes

fixup! docs(angular): Fix snippets that fail to compile

b34b190

JPeer264 requested a review from Lms24 September 10, 2026 08:48

sentry Bot reviewed Sep 10, 2026

View reviewed changes

vercel Bot deployed to Preview – sentry-docs September 10, 2026 08:57 View deployment

Lms24 approved these changes Sep 10, 2026

View reviewed changes

Uh oh!

Uh oh!

Conversation

JPeer264 commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DESCRIBE YOUR PR

IS YOUR CHANGE URGENT?

SLA

PRE-MERGE CHECKLIST

LEGAL BOILERPLATE

EXTRA RESOURCES

Uh oh!

vercel Bot commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear-code Bot commented Sep 10, 2026

Uh oh!

github-actions Bot commented Sep 10, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sentry Bot Sep 10, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

JPeer264 commented Sep 10, 2026 •

edited

Loading

vercel Bot commented Sep 10, 2026 •

edited

Loading