meta(changelog): Update changelog for 9.19.0

.size-limit.js

@@ -18,7 +18,6 @@ module.exports = [
     limit: '24.1 KB',
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
-      const TerserPlugin = require('terser-webpack-plugin');
 
       config.plugins.push(
         new webpack.DefinePlugin({
@@ -30,7 +29,6 @@ module.exports = [
       );
 
       config.optimization.minimize = true;
-      config.optimization.minimizer = [new TerserPlugin()];
 
       return config;
     },
@@ -57,7 +55,6 @@ module.exports = [
     limit: '70.1 KB',
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
-      const TerserPlugin = require('terser-webpack-plugin');
 
       config.plugins.push(
         new webpack.DefinePlugin({
@@ -69,7 +66,6 @@ module.exports = [
       );
 
       config.optimization.minimize = true;
-      config.optimization.minimizer = [new TerserPlugin()];
 
       return config;
     },
@@ -139,7 +135,7 @@ module.exports = [
     path: 'packages/vue/build/esm/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '40 KB',
+    limit: '41 KB',
   },
   // Svelte SDK (ESM)
   {
@@ -239,7 +235,6 @@ module.exports = [
     ignore: [...builtinModules, ...nodePrefixedBuiltinModules],
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
-      const TerserPlugin = require('terser-webpack-plugin');
 
       config.plugins.push(
         new webpack.DefinePlugin({
@@ -248,7 +243,6 @@ module.exports = [
       );
 
       config.optimization.minimize = true;
-      config.optimization.minimizer = [new TerserPlugin()];
 
       return config;
     },

CHANGELOG.md

@@ -10,6 +10,16 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+## 9.19.0
+
+- feat(react-router): Add otel instrumentation for server requests ([#16147](https://github.com/getsentry/sentry-javascript/pull/16147))
+- feat(remix): Vendor in `opentelemetry-instrumentation-remix` ([#16145](https://github.com/getsentry/sentry-javascript/pull/16145))
+- fix(browser): Ensure spans auto-ended for navigations have `cancelled` reason ([#16277](https://github.com/getsentry/sentry-javascript/pull/16277))
+- fix(node): Pin `@fastify/otel` fork to direct url to allow installing without git ([#16287](https://github.com/getsentry/sentry-javascript/pull/16287))
+- fix(react): Handle nested parameterized routes in reactrouterv3 transaction normalization ([#16274](https://github.com/getsentry/sentry-javascript/pull/16274))
+
+Work in this release was contributed by @sidx1024. Thank you for your contribution!
+
 ## 9.18.0
 
 ### Important changes

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-aborting-pageload/init.js

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1,
+});
+
+// Immediately navigate to a new page to abort the pageload
+window.location.href = '#foo';

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-aborting-pageload/test.ts

@@ -0,0 +1,58 @@
+import { expect } from '@playwright/test';
+import {
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+} from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should create a navigation transaction that aborts an ongoing pageload',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const pageloadRequestPromise = waitForTransactionRequest(page, event => event.contexts?.trace?.op === 'pageload');
+    const navigationRequestPromise = waitForTransactionRequest(
+      page,
+      event => event.contexts?.trace?.op === 'navigation',
+    );
+
+    await page.goto(url);
+
+    const pageloadRequest = envelopeRequestParser(await pageloadRequestPromise);
+    const navigationRequest = envelopeRequestParser(await navigationRequestPromise);
+
+    expect(pageloadRequest.contexts?.trace?.op).toBe('pageload');
+    expect(navigationRequest.contexts?.trace?.op).toBe('navigation');
+
+    expect(navigationRequest.transaction_info?.source).toEqual('url');
+
+    const pageloadTraceId = pageloadRequest.contexts?.trace?.trace_id;
+    const navigationTraceId = navigationRequest.contexts?.trace?.trace_id;
+
+    expect(pageloadTraceId).toBeDefined();
+    expect(navigationTraceId).toBeDefined();
+    expect(pageloadTraceId).not.toEqual(navigationTraceId);
+
+    expect(pageloadRequest.contexts?.trace?.data).toMatchObject({
+      [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.browser',
+      [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+      [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+      [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+      ['sentry.idle_span_finish_reason']: 'cancelled',
+    });
+    expect(navigationRequest.contexts?.trace?.data).toMatchObject({
+      [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.browser',
+      [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+      [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+      [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      ['sentry.idle_span_finish_reason']: 'idleTimeout',
+    });
+  },
+);

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

@@ -1,5 +1,11 @@
 import { expect } from '@playwright/test';
 import type { Event } from '@sentry/core';
+import {
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+} from '@sentry/core';
 import { sentryTest } from '../../../../utils/fixtures';
 import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
 
@@ -25,6 +31,21 @@ sentryTest('should create a navigation transaction on page navigation', async ({
   expect(navigationTraceId).toBeDefined();
   expect(pageloadTraceId).not.toEqual(navigationTraceId);
 
+  expect(pageloadRequest.contexts?.trace?.data).toMatchObject({
+    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.browser',
+    [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+    [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+    [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+    ['sentry.idle_span_finish_reason']: 'idleTimeout',
+  });
+  expect(navigationRequest.contexts?.trace?.data).toMatchObject({
+    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.browser',
+    [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+    [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+    [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+    ['sentry.idle_span_finish_reason']: 'idleTimeout',
+  });
+
   const pageloadSpans = pageloadRequest.spans;
   const navigationSpans = navigationRequest.spans;
 

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

@@ -30,6 +30,7 @@ sentryTest('creates a pageload transaction with url as source', async ({ getLoca
     [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
     [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
     [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+    ['sentry.idle_span_finish_reason']: 'idleTimeout',
   });
 
   expect(eventData.contexts?.trace?.op).toBe('pageload');

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes.ts

@@ -15,5 +15,6 @@ export default [
     route('ssr', 'routes/performance/ssr.tsx'),
     route('with/:param', 'routes/performance/dynamic-param.tsx'),
     route('static', 'routes/performance/static.tsx'),
+    route('server-loader', 'routes/performance/server-loader.tsx'),
   ]),
 ] satisfies RouteConfig;

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/dynamic-param.tsx

@@ -1,5 +1,10 @@
 import type { Route } from './+types/dynamic-param';
 
+export async function loader() {
+  await new Promise(resolve => setTimeout(resolve, 500));
+  return { data: 'burritos' };
+}
+
 export default function DynamicParamPage({ params }: Route.ComponentProps) {
   const { param } = params;
 

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/index.tsx

@@ -7,6 +7,7 @@ export default function PerformancePage() {
       <nav>
         <Link to="/performance/ssr">SSR Page</Link>
         <Link to="/performance/with/sentry">With Param Page</Link>
+        <Link to="/performance/server-loader">Server Loader</Link>
       </nav>
     </div>
   );

dev-packages/e2e-tests/test-applications/react-router-7-framework/app/routes/performance/server-loader.tsx

@@ -0,0 +1,16 @@
+import type { Route } from './+types/server-loader';
+
+export async function loader() {
+  await new Promise(resolve => setTimeout(resolve, 500));
+  return { data: 'burritos' };
+}
+
+export default function ServerLoaderPage({ loaderData }: Route.ComponentProps) {
+  const { data } = loaderData;
+  return (
+    <div>
+      <h1>Server Loader Page</h1>
+      <div>{data}</div>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/performance.server.test.ts

@@ -104,4 +104,32 @@ test.describe('servery - performance', () => {
       },
     });
   });
+
+  test('should automatically instrument server loader', async ({ page }) => {
+    const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
+      return transactionEvent.transaction === 'GET /performance/server-loader.data';
+    });
+
+    await page.goto(`/performance`); // initial ssr pageloads do not contain .data requests
+    await page.waitForTimeout(500); // quick breather before navigation
+    await page.getByRole('link', { name: 'Server Loader' }).click(); // this will actually trigger a .data request
+
+    const transaction = await txPromise;
+
+    expect(transaction?.spans?.[transaction.spans?.length - 1]).toMatchObject({
+      span_id: expect.any(String),
+      trace_id: expect.any(String),
+      data: {
+        'sentry.origin': 'auto.http.react-router',
+        'sentry.op': 'function.react-router.loader',
+      },
+      description: 'Executing Server Loader',
+      parent_span_id: expect.any(String),
+      start_timestamp: expect.any(Number),
+      timestamp: expect.any(Number),
+      status: 'ok',
+      op: 'function.react-router.loader',
+      origin: 'auto.http.react-router',
+    });
+  });
 });

dev-packages/size-limit-gh-action/package.json

@@ -20,7 +20,7 @@
     "@actions/github": "^5.0.0",
     "@actions/glob": "0.4.0",
     "@actions/io": "1.1.3",
-    "bytes": "3.1.2",
+    "bytes-iec": "3.1.1",
     "markdown-table": "3.0.3"
   },
   "volta": {

dev-packages/size-limit-gh-action/utils/SizeLimitFormatter.mjs

@@ -1,5 +1,5 @@
 import * as core from '@actions/core';
-import bytes from 'bytes';
+import bytes from 'bytes-iec';
 
 const SIZE_RESULTS_HEADER = ['Path', 'Size', '% Change', 'Change'];
 

packages/browser/src/tracing/browserTracingIntegration.ts

@@ -386,6 +386,7 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
         if (activeSpan && !spanToJSON(activeSpan).timestamp) {
           DEBUG_BUILD && logger.log(`[Tracing] Finishing current active span with op: ${spanToJSON(activeSpan).op}`);
           // If there's an open active span, we need to finish it before creating an new one.
+          activeSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_IDLE_SPAN_FINISH_REASON, 'cancelled');
           activeSpan.end();
         }
       }

packages/node/package.json

@@ -65,7 +65,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@fastify/otel": "getsentry/fastify-otel#otel-v1",
+    "@fastify/otel": "https://codeload.github.com/getsentry/fastify-otel/tar.gz/ae3088d65e286bdc94ac5d722573537d6a6671bb",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-async-hooks": "^1.30.1",
     "@opentelemetry/core": "^1.30.1",

packages/react-router/package.json

@@ -37,6 +37,7 @@
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/core": "^1.30.1",
     "@opentelemetry/semantic-conventions": "^1.30.0",
+    "@opentelemetry/instrumentation": "0.57.2",
     "@sentry/browser": "9.18.0",
     "@sentry/cli": "^2.43.0",
     "@sentry/core": "9.18.0",