fix(v8/browser): Ensure that performance.measure spans have a positive duration (#19959)

nicohrubec · web-flow · commit 4613a83defe5 · 2026-03-25T10:38:12.000+01:00
## Summary Cherry-picks to the `v8` branch: - #15415 — Ensure `performance.measure` spans have a positive duration - #17541 — Remove unused `geist` font from nextjs-t3 test app ## Test plan - Existing tests included in cherry-picks
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-t3/package.json b/dev-packages/e2e-tests/test-applications/nextjs-t3/package.json
@@ -20,7 +20,6 @@
     "@trpc/client": "^11.0.0-rc.446",
     "@trpc/react-query": "^11.0.0-rc.446",
     "@trpc/server": "^11.0.0-rc.446",
-    "geist": "^1.3.0",
     "next": "^14.2.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-t3/src/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-t3/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import '~/styles/globals.css';
 
-import { GeistSans } from 'geist/font/sans';
 import { type Metadata } from 'next';
 
 import { TRPCReactProvider } from '~/trpc/react';
@@ -13,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en" className={`${GeistSans.variable}`}>
+    <html lang="en">
       <body>
         <TRPCReactProvider>{children}</TRPCReactProvider>
       </body>
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-t3/tailwind.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-t3/tailwind.config.ts
@@ -1,14 +1,6 @@
 import { type Config } from 'tailwindcss';
-import { fontFamily } from 'tailwindcss/defaultTheme';
 
 export default {
   content: ['./src/**/*.tsx'],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['var(--font-geist-sans)', ...fontFamily.sans],
-      },
-    },
-  },
   plugins: [],
 } satisfies Config;
diff --git a/packages/browser-utils/src/metrics/browserMetrics.ts b/packages/browser-utils/src/metrics/browserMetrics.ts
@@ -425,7 +425,7 @@ export function _addMeasureSpans(
   startTime: number,
   duration: number,
   timeOrigin: number,
-): number {
+): void {
   const navEntry = getNavigationEntry(false);
   const requestTime = msToSec(navEntry ? navEntry.requestStart : 0);
   // Because performance.measure accepts arbitrary timestamps it can produce
@@ -450,13 +450,14 @@ export function _addMeasureSpans(
     attributes['sentry.browser.measure_start_time'] = measureStartTimestamp;
   }
 
-  startAndEndSpan(span, measureStartTimestamp, measureEndTimestamp, {
-    name: entry.name as string,
-    op: entry.entryType as string,
-    attributes,
-  });
-
-  return measureStartTimestamp;
+  // Measurements from third parties can be off, which would create invalid spans, dropping transactions in the process.
+  if (measureStartTimestamp <= measureEndTimestamp) {
+    startAndEndSpan(span, measureStartTimestamp, measureEndTimestamp, {
+      name: entry.name as string,
+      op: entry.entryType as string,
+      attributes,
+    });
+  }
 }
 
 /** Instrument navigation entries */
diff --git a/packages/browser-utils/test/browser/browserMetrics.test.ts b/packages/browser-utils/test/browser/browserMetrics.test.ts
@@ -92,6 +92,29 @@ describe('_addMeasureSpans', () => {
       }),
     );
   });
+
+  it('drops measurement spans with negative duration', () => {
+    const spans: Span[] = [];
+
+    getClient()?.on('spanEnd', span => {
+      spans.push(span);
+    });
+
+    const entry = {
+      entryType: 'measure',
+      name: 'measure-1',
+      duration: 10,
+      startTime: 12,
+    } as PerformanceEntry;
+
+    const timeOrigin = 100;
+    const startTime = 23;
+    const duration = -50;
+
+    _addMeasureSpans(span, entry, startTime, duration, timeOrigin);
+
+    expect(spans).toHaveLength(0);
+  });
 });
 
 describe('_addResourceSpans', () => {
