Merge branch 'develop' into cl/screenshot-integration

Author: c298lee

.craft.yml

@@ -91,6 +91,9 @@ targets:
   - name: npm
     id: '@sentry/serverless'
     includeNames: /^sentry-serverless-\d.*\.tgz$/
+  - name: npm
+    id: '@sentry/google-cloud'
+    includeNames: /^sentry-google-cloud-\d.*\.tgz$/
   - name: npm
     id: '@sentry/bun'
     includeNames: /^sentry-bun-\d.*\.tgz$/

.github/ISSUE_TEMPLATE/bug.yml

@@ -43,6 +43,7 @@ body:
         - '@sentry/react'
         - '@sentry/remix'
         - '@sentry/serverless'
+        - '@sentry/google-cloud'
         - '@sentry/svelte'
         - '@sentry/sveltekit'
         - '@sentry/vue'

MIGRATION.md

@@ -546,10 +546,43 @@ The following previously deprecated API has been removed from the `@sentry/nextj
 - `IS_BUILD`
 - `isBuild`
 
+#### Merging of the Sentry Webpack Plugin options and SDK Build options
+
+With version 8 of the Sentry Next.js SDK, `withSentryConfig` will no longer accept 3 arguments. The second argument
+(holding options for the Sentry Webpack plugin) and the third argument (holding options for SDK build-time
+configuration) should now be passed as one:
+
+```ts
+// OLD
+const nextConfig = {
+  // Your Next.js options...
+};
+
+module.exports = withSentryConfig(
+  nextConfig,
+  {
+    // Your Sentry Webpack Plugin Options...
+  },
+  {
+    // Your Sentry SDK options...
+  },
+);
+
+// NEW
+const nextConfig = {
+  // Your Next.js options...
+};
+
+module.exports = withSentryConfig(nextConfig, {
+  // Your Sentry Webpack Plugin Options...
+  // AND your Sentry SDK options...
+});
+```
+
 #### Removal of the `sentry` property in your Next.js options (next.config.js)
 
 With version 8 of the Sentry Next.js SDK, the SDK will no longer support passing Next.js options with a `sentry`
-property to `withSentryConfig`. Please use the third argument of `withSentryConfig` to configure the SDK instead:
+property to `withSentryConfig`. Please use the second argument of `withSentryConfig` to configure the SDK instead:
 
 ```ts
 // v7
@@ -572,21 +605,25 @@ const nextConfig = {
   // Your Next.js options...
 };
 
-module.exports = withSentryConfig(
-  nextConfig,
-  {
-    // Your Sentry Webpack Plugin Options...
-  },
-  {
-    // Your Sentry SDK options...
-  },
-);
+module.exports = withSentryConfig(nextConfig, {
+  // Your Sentry Webpack Plugin Options...
+  // AND your Sentry SDK options...
+});
 ```
 
 The reason for this change is to have one consistent way of defining the SDK options. We hope that this change will
 reduce confusion when setting up the SDK, with the upside that the explicit option is properly typed and will therefore
 have code completion.
 
+#### Updated the `@sentry/webpack-plugin` dependency to version 2
+
+We bumped the internal usage of `@sentry/webpack-plugin` to a new major version. This comes with multiple upsides like a
+simpler configuration interface and the use of new state of the art Debug ID technology. Debug IDs will simplify the
+setup for source maps in Sentry and will not require you to match stack frame paths to uploaded artifacts anymore.
+
+To see the new options, check out the docs at https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/,
+or look at the TypeScript type definitions of `withSentryConfig`.
+
 ### Astro SDK
 
 #### Removal of `trackHeaders` option for Astro middleware

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/subject.js

@@ -0,0 +1,3 @@
+setTimeout(() => {
+  throw new Error('Error during pageload');
+}, 100);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/error/test.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getMultipleSentryEnvelopeRequests, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should put the pageload transaction name onto an error event caught during pageload',
+  async ({ getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    await page.goto(url);
+
+    const [e1, e2] = await getMultipleSentryEnvelopeRequests<Event>(page, 2);
+
+    const pageloadTxnEvent = e1.type === 'transaction' ? e1 : e2;
+    const errorEvent = e1.type === 'transaction' ? e2 : e1;
+
+    expect(pageloadTxnEvent.contexts?.trace?.op).toEqual('pageload');
+    expect(pageloadTxnEvent.spans?.length).toBeGreaterThan(0);
+    expect(errorEvent.exception?.values?.[0]).toBeDefined();
+
+    expect(pageloadTxnEvent.transaction?.endsWith('index.html')).toBe(true);
+
+    expect(errorEvent.transaction).toEqual(pageloadTxnEvent.transaction);
+  },
+);

dev-packages/e2e-tests/test-applications/angular-17/src/app/app.routes.ts

@@ -1,4 +1,7 @@
 import { Routes } from '@angular/router';
+import { cancelGuard } from './cancel-guard.guard';
+import { CancelComponent } from './cancel/cancel.components';
+import { ComponentTrackingComponent } from './component-tracking/component-tracking.components';
 import { HomeComponent } from './home/home.component';
 import { UserComponent } from './user/user.component';
 
@@ -11,6 +14,15 @@ export const routes: Routes = [
     path: 'home',
     component: HomeComponent,
   },
+  {
+    path: 'cancel',
+    component: CancelComponent,
+    canActivate: [cancelGuard],
+  },
+  {
+    path: 'component-tracking',
+    component: ComponentTrackingComponent,
+  },
   {
     path: 'redirect1',
     redirectTo: '/redirect2',

dev-packages/e2e-tests/test-applications/angular-17/src/app/cancel-guard.guard.ts

@@ -0,0 +1,5 @@
+import { ActivatedRouteSnapshot, CanActivateFn, RouterStateSnapshot } from '@angular/router';
+
+export const cancelGuard: CanActivateFn = (_next: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
+  return false;
+};

dev-packages/e2e-tests/test-applications/angular-17/src/app/cancel/cancel.components.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-cancel',
+  standalone: true,
+  template: `<div></div>`,
+})
+export class CancelComponent {}

dev-packages/e2e-tests/test-applications/angular-17/src/app/component-tracking/component-tracking.components.ts

@@ -0,0 +1,18 @@
+import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { TraceClassDecorator, TraceMethodDecorator, TraceModule } from '@sentry/angular-ivy';
+import { SampleComponent } from '../sample-component/sample-component.components';
+
+@Component({
+  selector: 'app-cancel',
+  standalone: true,
+  imports: [TraceModule, SampleComponent],
+  template: `<app-sample-component [trace]="'sample-component'"></app-sample-component>`,
+})
+@TraceClassDecorator()
+export class ComponentTrackingComponent implements OnInit, AfterViewInit {
+  @TraceMethodDecorator()
+  ngOnInit() {}
+
+  @TraceMethodDecorator()
+  ngAfterViewInit() {}
+}

dev-packages/e2e-tests/test-applications/angular-17/src/app/home/home.component.ts

@@ -11,6 +11,9 @@ import { RouterLink } from '@angular/router';
     <ul>
       <li> <a id="navLink" [routerLink]="['/users', '123']">Visit User 123</a> </li>
       <li> <a id="redirectLink" [routerLink]="['/redirect1']">Redirect</a> </li>
+      <li> <a id="cancelLink" [routerLink]="['/cancel']">Cancel</a> </li>
+      <li> <a id="nonExistentLink" [routerLink]="['/non-existent']">Error</a> </li>
+      <li> <a id="componentTracking" [routerLink]="['/component-tracking']">Error</a> </li>
     </ul>
     <button id="errorBtn" (click)="throwError()">Throw error</button>
   </main>

dev-packages/e2e-tests/test-applications/angular-17/src/app/sample-component/sample-component.components.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sample-component',
+  standalone: true,
+  template: `<div></div>`,
+})
+export class SampleComponent implements OnInit {
+  ngOnInit() {
+    console.log('SampleComponent');
+  }
+}

dev-packages/e2e-tests/test-applications/angular-17/tests/performance.test.ts

@@ -1,4 +1,5 @@
 import { expect, test } from '@playwright/test';
+import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/core';
 import { waitForTransaction } from '../event-proxy-server';
 
 test('sends a pageload transaction with a parameterized URL', async ({ page }) => {
@@ -126,3 +127,178 @@ test('groups redirects within one navigation root span', async ({ page }) => {
   expect(routingSpan).toBeDefined();
   expect(routingSpan?.description).toBe('/redirect1');
 });
+
+test.describe('finish routing span', () => {
+  test('finishes routing span on navigation cancel', async ({ page }) => {
+    const navigationTxnPromise = waitForTransaction('angular-17', async transactionEvent => {
+      return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
+    });
+
+    await page.goto(`/`);
+
+    // immediately navigate to a different route
+    const [_, navigationTxn] = await Promise.all([page.locator('#cancelLink').click(), navigationTxnPromise]);
+
+    expect(navigationTxn).toMatchObject({
+      contexts: {
+        trace: {
+          op: 'navigation',
+          origin: 'auto.navigation.angular',
+        },
+      },
+      transaction: '/cancel',
+      transaction_info: {
+        source: 'url',
+      },
+    });
+
+    const routingSpan = navigationTxn.spans?.find(span => span.op === 'ui.angular.routing');
+
+    expect(routingSpan).toBeDefined();
+    expect(routingSpan?.description).toBe('/cancel');
+  });
+
+  test('finishes routing span on navigation error', async ({ page }) => {
+    const navigationTxnPromise = waitForTransaction('angular-17', async transactionEvent => {
+      return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
+    });
+
+    await page.goto(`/`);
+
+    // immediately navigate to a different route
+    const [_, navigationTxn] = await Promise.all([page.locator('#nonExistentLink').click(), navigationTxnPromise]);
+
+    const nonExistentRoute = '/non-existent';
+
+    expect(navigationTxn).toMatchObject({
+      contexts: {
+        trace: {
+          op: 'navigation',
+          origin: 'auto.navigation.angular',
+        },
+      },
+      transaction: nonExistentRoute,
+      transaction_info: {
+        source: 'url',
+      },
+    });
+
+    const routingSpan = navigationTxn.spans?.find(span => span.op === 'ui.angular.routing');
+
+    expect(routingSpan).toBeDefined();
+    expect(routingSpan?.description).toBe(nonExistentRoute);
+  });
+});
+
+test.describe('TraceDirective', () => {
+  test('creates a child tracingSpan with component name as span name on ngOnInit', async ({ page }) => {
+    const navigationTxnPromise = waitForTransaction('angular-17', async transactionEvent => {
+      return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
+    });
+
+    await page.goto(`/`);
+
+    // immediately navigate to a different route
+    const [_, navigationTxn] = await Promise.all([page.locator('#componentTracking').click(), navigationTxnPromise]);
+
+    const traceDirectiveSpan = navigationTxn.spans?.find(
+      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),
+      }),
+    );
+  });
+});
+
+test.describe('TraceClassDecorator', () => {
+  test('adds init span for decorated class', async ({ page }) => {
+    const navigationTxnPromise = waitForTransaction('angular-17', async transactionEvent => {
+      return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
+    });
+
+    await page.goto(`/`);
+
+    // immediately navigate to a different route
+    const [_, navigationTxn] = await Promise.all([page.locator('#componentTracking').click(), navigationTxnPromise]);
+
+    const classDecoratorSpan = navigationTxn.spans?.find(
+      span => span?.data && span?.data[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN] === 'auto.ui.angular.trace_class_decorator',
+    );
+
+    expect(classDecoratorSpan).toBeDefined();
+    expect(classDecoratorSpan).toEqual(
+      expect.objectContaining({
+        data: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.angular.init',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.angular.trace_class_decorator',
+        },
+        // todo: right now, it shows the minified version of the component name - we will add a name input to the Decorator
+        description: expect.any(String),
+        op: 'ui.angular.init',
+        origin: 'auto.ui.angular.trace_class_decorator',
+        start_timestamp: expect.any(Number),
+        timestamp: expect.any(Number),
+      }),
+    );
+  });
+});
+
+test.describe('TraceMethodDecorator', () => {
+  test('instruments decorated methods (`ngOnInit` and `ngAfterViewInit`)', async ({ page }) => {
+    const navigationTxnPromise = waitForTransaction('angular-17', async transactionEvent => {
+      return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
+    });
+
+    await page.goto(`/`);
+
+    // immediately navigate to a different route
+    const [_, navigationTxn] = await Promise.all([page.locator('#componentTracking').click(), navigationTxnPromise]);
+
+    const ngInitSpan = navigationTxn.spans?.find(span => span.op === 'ui.angular.ngOnInit');
+    const ngAfterViewInitSpan = navigationTxn.spans?.find(span => span.op === 'ui.angular.ngAfterViewInit');
+
+    expect(ngInitSpan).toBeDefined();
+    expect(ngInitSpan).toEqual(
+      expect.objectContaining({
+        data: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.angular.ngOnInit',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.angular.trace_method_decorator',
+        },
+        // todo: right now, it shows the minified version of the component name - we will add a name input to the Decorator
+        description: expect.any(String),
+        op: 'ui.angular.ngOnInit',
+        origin: 'auto.ui.angular.trace_method_decorator',
+        start_timestamp: expect.any(Number),
+        timestamp: expect.any(Number),
+      }),
+    );
+
+    expect(ngAfterViewInitSpan).toBeDefined();
+    expect(ngAfterViewInitSpan).toEqual(
+      expect.objectContaining({
+        data: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.angular.ngAfterViewInit',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.angular.trace_method_decorator',
+        },
+        // todo: right now, it shows the minified version of the component name - we will add a name input to the Decorator
+        description: expect.any(String),
+        op: 'ui.angular.ngAfterViewInit',
+        origin: 'auto.ui.angular.trace_method_decorator',
+        start_timestamp: expect.any(Number),
+        timestamp: expect.any(Number),
+      }),
+    );
+  });
+});