Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

fix(angular): Fall back to element tagName when name is not provided to TraceDirective #14778

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

Merged
Lms24 merged 3 commits into from
Dec 23, 2024
Merged

fix(angular): Fall back to element tagName when name is not provided to TraceDirective #14778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
baf79c5
fix(angular): fall back to element `tagName` when `trace` is not prov…
arturovt Dec 18, 2024
50efb5a
add e2e test, update JSDoc
Lms24 Dec 23, 2024
75c05ba
fix ng19 e2e test
Lms24 Dec 23, 2024
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
5 changes: 4 additions & 1 deletion 5 .../test-applications/angular-17/src/app/component-tracking/component-tracking.components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ import { SampleComponent } from '../sample-component/sample-component.components
selector: 'app-cancel',
standalone: true,
imports: [TraceModule, SampleComponent],
template: `<app-sample-component [trace]="'sample-component'"></app-sample-component>`,
template: `
<app-sample-component [trace]="'sample-component'"></app-sample-component>
<app-sample-component trace></app-sample-component>
`,
})
@TraceClass({ name: 'ComponentTrackingComponent' })
export class ComponentTrackingComponent implements OnInit, AfterViewInit {
Expand Down
43 changes: 28 additions & 15 deletions 43 dev-packages/e2e-tests/test-applications/angular-17/tests/performance.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ test.describe('finish routing span', () => {
});

test.describe('TraceDirective', () => {
test('creates a child tracingSpan with component name as span name on ngOnInit', async ({ page }) => {
test('creates a child span with the component name as span name on ngOnInit', async ({ page }) => {
const navigationTxnPromise = waitForTransaction('angular-17', async transactionEvent => {
return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
});
Expand All @@ -201,23 +201,36 @@ test.describe('TraceDirective', () => {
// immediately navigate to a different route
const [_, navigationTxn] = await Promise.all([page.locator('#componentTracking').click(), navigationTxnPromise]);

const traceDirectiveSpan = navigationTxn.spans?.find(
const traceDirectiveSpans = navigationTxn.spans?.filter(
span => span?.data && span?.data[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN] === 'auto.ui.angular.trace_directive',
);

expect(traceDirectiveSpan).toBeDefined();
expect(traceDirectiveSpan).toEqual(
expect.objectContaining({
data: {
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.angular.init',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.angular.trace_directive',
},
description: '<sample-component>',
op: 'ui.angular.init',
origin: 'auto.ui.angular.trace_directive',
start_timestamp: expect.any(Number),
timestamp: expect.any(Number),
}),
expect(traceDirectiveSpans).toHaveLength(2);
expect(traceDirectiveSpans).toEqual(
expect.arrayContaining([
expect.objectContaining({
data: {
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.angular.init',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.angular.trace_directive',
},
description: '<sample-component>', // custom component name passed to trace directive
op: 'ui.angular.init',
origin: 'auto.ui.angular.trace_directive',
start_timestamp: expect.any(Number),
timestamp: expect.any(Number),
}),
expect.objectContaining({
data: {
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.angular.init',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.angular.trace_directive',
},
description: '<app-sample-component>', // fallback selector name
op: 'ui.angular.init',
origin: 'auto.ui.angular.trace_directive',
start_timestamp: expect.any(Number),
timestamp: expect.any(Number),
}),
]),
);
});
});
Expand Down
2 changes: 2 additions & 0 deletions 2 dev-packages/e2e-tests/test-applications/angular-19/.npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
7 changes: 5 additions & 2 deletions 7 .../test-applications/angular-19/src/app/component-tracking/component-tracking.components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@ import { TraceClass, TraceMethod, TraceModule } from '@sentry/angular';
import { SampleComponent } from '../sample-component/sample-component.components';

@Component({
selector: 'app-cancel',
selector: 'app-component-tracking',
standalone: true,
imports: [TraceModule, SampleComponent],
template: `<app-sample-component [trace]="'sample-component'"></app-sample-component>`,
template: `
<app-sample-component trace="sample-component"></app-sample-component>
<app-sample-component trace></app-sample-component>
`,
})
@TraceClass({ name: 'ComponentTrackingComponent' })
export class ComponentTrackingComponent implements OnInit, AfterViewInit {
Expand Down
43 changes: 28 additions & 15 deletions 43 dev-packages/e2e-tests/test-applications/angular-19/tests/performance.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ test.describe('finish routing span', () => {
});

test.describe('TraceDirective', () => {
test('creates a child tracingSpan with component name as span name on ngOnInit', async ({ page }) => {
test('creates a child span with the component name as span name on ngOnInit', async ({ page }) => {
const navigationTxnPromise = waitForTransaction('angular-18', async transactionEvent => {
return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
});
Expand All @@ -201,23 +201,36 @@ test.describe('TraceDirective', () => {
// immediately navigate to a different route
const [_, navigationTxn] = await Promise.all([page.locator('#componentTracking').click(), navigationTxnPromise]);

const traceDirectiveSpan = navigationTxn.spans?.find(
const traceDirectiveSpans = navigationTxn.spans?.filter(
span => span?.data && span?.data[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN] === 'auto.ui.angular.trace_directive',
);

expect(traceDirectiveSpan).toBeDefined();
expect(traceDirectiveSpan).toEqual(
expect.objectContaining({
data: {
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.angular.init',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.angular.trace_directive',
},
description: '<sample-component>',
op: 'ui.angular.init',
origin: 'auto.ui.angular.trace_directive',
start_timestamp: expect.any(Number),
timestamp: expect.any(Number),
}),
expect(traceDirectiveSpans).toHaveLength(2);
expect(traceDirectiveSpans).toEqual(
expect.arrayContaining([
expect.objectContaining({
data: {
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.angular.init',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.angular.trace_directive',
},
description: '<sample-component>', // custom component name passed to trace directive
op: 'ui.angular.init',
origin: 'auto.ui.angular.trace_directive',
start_timestamp: expect.any(Number),
timestamp: expect.any(Number),
}),
expect.objectContaining({
data: {
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.angular.init',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.angular.trace_directive',
},
description: '<app-sample-component>', // fallback selector name
op: 'ui.angular.init',
origin: 'auto.ui.angular.trace_directive',
start_timestamp: expect.any(Number),
timestamp: expect.any(Number),
}),
]),
);
});
});
Expand Down
23 changes: 19 additions & 4 deletions 23 packages/angular/src/tracing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
import { ElementRef } from '@angular/core';
import type { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
import { Directive, Injectable, Input, NgModule } from '@angular/core';
import type { ActivatedRouteSnapshot, Event, RouterState } from '@angular/router';
Expand Down Expand Up @@ -235,24 +237,37 @@ export class TraceService implements OnDestroy {
}
}

const UNKNOWN_COMPONENT = 'unknown';

/**
* A directive that can be used to capture initialization lifecycle of the whole component.
* Captures the initialization lifecycle of the component this directive is applied to.
* Specifically, this directive measures the time between `ngOnInit` and `ngAfterViewInit`
* of the component.
*
* Falls back to the component's selector if no name is provided.
*
* @example
* ```html
* <app-my-component trace="myComponent"></app-my-component>
* ```
*/
@Directive({ selector: '[trace]' })
export class TraceDirective implements OnInit, AfterViewInit {
@Input('trace') public componentName?: string;

private _tracingSpan?: Span;

public constructor(private readonly _host: ElementRef<HTMLElement>) {}

/**
* Implementation of OnInit lifecycle method
* @inheritdoc
*/
public ngOnInit(): void {
if (!this.componentName) {
this.componentName = UNKNOWN_COMPONENT;
// Technically, the `trace` binding should always be provided.
// However, if it is incorrectly declared on the element without a
// value (e.g., `<app-component trace />`), we fall back to using `tagName`
// (which is e.g. `APP-COMPONENT`).
this.componentName = this._host.nativeElement.tagName.toLowerCase();
Lms24 marked this conversation as resolved.
Show resolved Hide resolved
}

if (getActiveSpan()) {
Expand Down
Morty Proxy This is a proxified and sanitized view of the page, visit original site.