meta: Update CHANGELOG for 8.18.0

.github/workflows/canary.yml

@@ -18,6 +18,7 @@ env:
     ${{ github.workspace }}/node_modules
     ${{ github.workspace }}/packages/*/node_modules
     ${{ github.workspace }}/dev-packages/*/node_modules
+    ${{ github.workspace }}/packages/utils/build
 
 permissions:
   contents: read

.github/workflows/external-contributors.yml

@@ -1,6 +1,6 @@
 name: "CI: Mention external contributors"
 on:
-  pull_request:
+  pull_request_target:
     types:
       - closed
     branches:
@@ -18,7 +18,7 @@ jobs:
       && github.event.pull_request.author_association != 'COLLABORATOR'
       && github.event.pull_request.author_association != 'MEMBER'
       && github.event.pull_request.author_association != 'OWNER'
-      && github.actor != 'dependabot[bot]'
+      && endsWith(github.actor, '[bot]') == false
     steps:
       - uses: actions/checkout@v4
       - name: Set up Node

.size-limit.js

@@ -177,7 +177,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.replay.min.js'),
     gzip: false,
     brotli: false,
-    limit: '220 KB',
+    limit: '230 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed',

CHANGELOG.md

@@ -8,6 +8,38 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+## 8.18.0
+
+### Important Changes
+
+- **ref: Deprecate `enableTracing` (12897)**
+
+The `enableTracing` option has been deprecated and will be removed in the next major version. We recommend removing it
+in favor of the `tracesSampleRate` and `tracesSampler` options. If you want to enable performance monitoring, please set
+the `tracesSampleRate` to a sample rate of your choice, or provide a sampling function as `tracesSampler` option
+instead. If you want to disable performance monitoring, remove the `tracesSampler` and `tracesSampleRate` options.
+
+### Other Changes
+
+- feat(node): Expose `exclude` and `include` options for ESM loader (#12910)
+- feat(browser): Add user agent to INP standalone span attributes (#12896)
+- feat(nextjs): Add `experimental_captureRequestError` for `onRequestError` hook (#12885)
+- feat(replay): Bump `rrweb` to 2.25.0 (#12478)
+- feat(tracing): Add long animation frame tracing (#12646)
+- fix: Cleanup hooks when they are not used anymore (#12852)
+- fix(angular): Guard `ErrorEvent` check in ErrorHandler to avoid throwing in Node environments (#12892)
+- fix(inp): Ensure INP spans have correct transaction (#12871)
+- fix(nestjs): Do not make SentryTraced() decorated functions async (#12879)
+- fix(nextjs): Support automatic instrumentation for app directory with custom page extensions (#12858)
+- fix(node): Ensure correct URL is passed to `ignoreIncomingRequests` callback (#12929)
+- fix(otel): Do not add `otel.kind: INTERNAL` attribute (#12841)
+- fix(solidstart): Set proper sentry origin for solid router integration when used in solidstart sdk (#12919)
+- fix(sveltekit): Add Vite peer dep for proper type resolution (#12926)
+- fix(tracing): Ensure you can pass `null` as `parentSpan` in `startSpan*` (#12928)
+- ref(core): Small bundle size improvement (#12830)
+
+Work in this release was contributed by @GitSquared and @mcous. Thank you for your contributions!
+
 ## 8.17.0
 
 - feat: Upgrade OTEL deps (#12809)

CONTRIBUTING.md

@@ -40,6 +40,9 @@ able to use it. From the top level of the repo, there are three commands availab
   dependencies (`utils`, `core`, `browser`, etc), and all packages which depend on it (currently `gatsby` and `nextjs`))
 - `yarn build:dev:watch`, which runs `yarn build:dev` in watch mode (recommended)
 
+Note: Due to package incompatibilities between Python versions, building native binaries currently requires a Python
+version <3.12.
+
 You can also run a production build via `yarn build`, which will build everything except for the tarballs for publishing
 to NPM. You can use this if you want to bundle Sentry yourself. The build output can be found in the packages `build/`
 folder, e.g. `packages/browser/build`. Bundled files can be found in `packages/browser/build/bundles`. Note that there

MIGRATION.md

@@ -711,6 +711,7 @@ Removed top-level exports: `enableAnrDetection`, `Anr`, `deepReadDirSync`, `runW
 - [Removal of `enableAnrDetection` and `Anr` class](./MIGRATION.md#removal-of-enableanrdetection-and-anr-class)
 - [Removal of `deepReadDirSync` method](./MIGRATION.md#removal-of-deepreaddirsync-method)
 - [Removal of `runWithAsyncContext` method](./MIGRATION.md#removal-of-runwithasynccontext-method)
+- [Removal of `Apollo` integration](./MIGRATION.md#removal-of-apollo-integration)
 
 #### Removal of `enableAnrDetection` and `Anr` class
 
@@ -737,6 +738,21 @@ Sentry.withIsolationScope(() => {
 });
 ```
 
+#### Removal of Apollo integration
+
+The Apollo integration has been removed in `8.x` as `8.x` automatically adds GraphQL support via `graphqlIntegration`
+which is automatically enabled.
+
+```js
+// before (v7)
+Sentry.init({
+  integrations: [Sentry.integrations.Apollo()],
+});
+
+// after (v8)
+Sentry.init({});
+```
+
 ### Next.js SDK
 
 Removed top-level exports: `withSentryApi`, `withSentryAPI`, `withSentryGetServerSideProps`, `withSentryGetStaticProps`,

biome.json

@@ -43,7 +43,9 @@
       ".angular/**",
       "angular.json",
       "ember/instance-initializers/**",
-      "ember/types.d.ts"
+      "ember/types.d.ts",
+      ".output",
+      ".vinxi"
     ]
   },
   "files": {

dev-packages/browser-integration-tests/suites/replay/canvas/manualSnapshot/template.html

@@ -13,7 +13,6 @@
   function draw() {
   const canvas = document.getElementById("canvas");
     if (canvas.getContext) {
-      console.log('has canvas')
       const ctx = canvas.getContext("2d");
 
       ctx.fillRect(25, 25, 100, 100);

dev-packages/browser-integration-tests/suites/replay/canvas/records/template.html

@@ -13,7 +13,6 @@
   function draw() {
   const canvas = document.getElementById("canvas");
     if (canvas.getContext) {
-      console.log('has canvas')
       const ctx = canvas.getContext("2d");
 
       ctx.fillRect(25, 25, 100, 100);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/assets/script.js

@@ -0,0 +1,12 @@
+(() => {
+  const startTime = Date.now();
+
+  function getElasped() {
+    const time = Date.now();
+    return time - startTime;
+  }
+
+  while (getElasped() < 101) {
+    //
+  }
+})();

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/init.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({ enableLongTask: false, enableLongAnimationFrame: false, idleTimeout: 9000 }),
+  ],
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/template.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div>Rendered Before Long Animation Frame</div>
+    <script src="https://example.com/path/to/script.js"></script>
+  </body>
+</html>

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-disabled/test.ts

@@ -0,0 +1,27 @@
+import type { Route } from '@playwright/test';
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should not capture long animation frame when flag is disabled.',
+  async ({ browserName, getLocalTestPath, page }) => {
+    // Long animation frames only work on chrome
+    if (shouldSkipTracingTest() || browserName !== 'chromium') {
+      sentryTest.skip();
+    }
+
+    await page.route('**/path/to/script.js', (route: Route) =>
+      route.fulfill({ path: `${__dirname}/assets/script.js` }),
+    );
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+    const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui'));
+
+    expect(uiSpans?.length).toBe(0);
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/assets/script.js

@@ -0,0 +1,25 @@
+function getElapsed(startTime) {
+  const time = Date.now();
+  return time - startTime;
+}
+
+function handleClick() {
+  const startTime = Date.now();
+  while (getElapsed(startTime) < 105) {
+    //
+  }
+}
+
+function start() {
+  const startTime = Date.now();
+  while (getElapsed(startTime) < 105) {
+    //
+  }
+}
+
+// trigger 2 long-animation-frame events
+// one from the top-level and the other from an event-listener
+start();
+
+const button = document.getElementById('clickme');
+button.addEventListener('click', handleClick);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/init.js

@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      idleTimeout: 9000,
+      enableLongTask: false,
+      enableLongAnimationFrame: true,
+    }),
+  ],
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/template.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div>Rendered Before Long Animation Frame</div>
+    <button id="clickme">
+      click me to start the long animation!
+    </button>
+    <script src="https://example.com/path/to/script.js"></script>
+  </body>
+</html>

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-enabled/test.ts

@@ -0,0 +1,112 @@
+import type { Route } from '@playwright/test';
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+
+import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/browser';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should capture long animation frame for top-level script.',
+  async ({ browserName, getLocalTestPath, page }) => {
+    // Long animation frames only work on chrome
+    if (shouldSkipTracingTest() || browserName !== 'chromium') {
+      sentryTest.skip();
+    }
+
+    await page.route('**/path/to/script.js', (route: Route) =>
+      route.fulfill({ path: `${__dirname}/assets/script.js` }),
+    );
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const promise = getFirstSentryEnvelopeRequest<Event>(page);
+
+    await page.goto(url);
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const eventData = await promise;
+
+    const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long-animation-frame'));
+
+    expect(uiSpans?.length).toEqual(1);
+
+    const [topLevelUISpan] = uiSpans || [];
+    expect(topLevelUISpan).toEqual(
+      expect.objectContaining({
+        op: 'ui.long-animation-frame',
+        description: 'Main UI thread blocked',
+        parent_span_id: eventData.contexts?.trace?.span_id,
+        data: {
+          'code.filepath': 'https://example.com/path/to/script.js',
+          'browser.script.source_char_position': 0,
+          'browser.script.invoker': 'https://example.com/path/to/script.js',
+          'browser.script.invoker_type': 'classic-script',
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long-animation-frame',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
+        },
+      }),
+    );
+    const start = topLevelUISpan.start_timestamp ?? 0;
+    const end = topLevelUISpan.timestamp ?? 0;
+    const duration = end - start;
+
+    expect(duration).toBeGreaterThanOrEqual(0.1);
+    expect(duration).toBeLessThanOrEqual(0.15);
+  },
+);
+
+sentryTest(
+  'should capture long animation frame for event listener.',
+  async ({ browserName, getLocalTestPath, page }) => {
+    // Long animation frames only work on chrome
+    if (shouldSkipTracingTest() || browserName !== 'chromium') {
+      sentryTest.skip();
+    }
+
+    await page.route('**/path/to/script.js', (route: Route) =>
+      route.fulfill({ path: `${__dirname}/assets/script.js` }),
+    );
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+
+    const promise = getFirstSentryEnvelopeRequest<Event>(page);
+
+    await page.goto(url);
+
+    // trigger long animation frame function
+    await page.getByRole('button').click();
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const eventData = await promise;
+
+    const uiSpans = eventData.spans?.filter(({ op }) => op?.startsWith('ui.long-animation-frame'));
+
+    expect(uiSpans?.length).toEqual(2);
+
+    // ignore the first ui span (top-level long animation frame)
+    const [, eventListenerUISpan] = uiSpans || [];
+
+    expect(eventListenerUISpan).toEqual(
+      expect.objectContaining({
+        op: 'ui.long-animation-frame',
+        description: 'Main UI thread blocked',
+        parent_span_id: eventData.contexts?.trace?.span_id,
+        data: {
+          'browser.script.invoker': 'BUTTON#clickme.onclick',
+          'browser.script.invoker_type': 'event-listener',
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.long-animation-frame',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.metrics',
+        },
+      }),
+    );
+    const start = eventListenerUISpan.start_timestamp ?? 0;
+    const end = eventListenerUISpan.timestamp ?? 0;
+    const duration = end - start;
+
+    expect(duration).toBeGreaterThanOrEqual(0.1);
+    expect(duration).toBeLessThanOrEqual(0.15);
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-non-chromium/assets/script.js

@@ -0,0 +1,12 @@
+(() => {
+  const startTime = Date.now();
+
+  function getElasped() {
+    const time = Date.now();
+    return time - startTime;
+  }
+
+  while (getElasped() < 101) {
+    //
+  }
+})();

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/long-animation-frame-non-chromium/init.js

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({ enableLongTask: true, enableLongAnimationFrame: true, idleTimeout: 9000 }),
+  ],
+  tracesSampleRate: 1,
+});