ref(nextjs): Make individual features opt into OTEL tracing (#13910)

Author: Luca Forstner

dev-packages/e2e-tests/publish-packages.ts

@@ -12,21 +12,19 @@ const packageTarballPaths = glob.sync('packages/*/sentry-*.tgz', {
 
 // Publish built packages to the fake registry
 packageTarballPaths.forEach(tarballPath => {
+  // eslint-disable-next-line no-console
+  console.log(`Publishing tarball ${tarballPath} ...`);
   // `--userconfig` flag needs to be before `publish`
   childProcess.exec(
     `npm --userconfig ${__dirname}/test-registry.npmrc publish ${tarballPath}`,
     {
       cwd: repositoryRoot, // Can't use __dirname here because npm would try to publish `@sentry-internal/e2e-tests`
       encoding: 'utf8',
     },
-    (err, stdout, stderr) => {
-      // eslint-disable-next-line no-console
-      console.log(stdout);
-      // eslint-disable-next-line no-console
-      console.log(stderr);
+    err => {
       if (err) {
         // eslint-disable-next-line no-console
-        console.error(err);
+        console.error(`Error publishing tarball ${tarballPath}`, err);
         process.exit(1);
       }
     },

dev-packages/e2e-tests/test-applications/nextjs-13/tests/server/excluded-api-endpoints.test.ts

@@ -1,7 +1,9 @@
 import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
-test('should not automatically create transactions for routes that were excluded from auto wrapping (string)', async ({
+// TODO(lforst): This cannot make it into production - Make sure to fix this test
+// The problem is that if we are not applying build time instrumentation Next.js will still emit spans (which is fine, but we need to find a different way of testing that build time instrumentation is successfully disabled - maybe with an attribute or something if build-time instrumentation is applied)
+test.skip('should not automatically create transactions for routes that were excluded from auto wrapping (string)', async ({
   request,
 }) => {
   const transactionPromise = waitForTransaction('nextjs-13', async transactionEvent => {
@@ -23,7 +25,9 @@ test('should not automatically create transactions for routes that were excluded
   expect(transactionPromiseReceived).toBe(false);
 });
 
-test('should not automatically create transactions for routes that were excluded from auto wrapping (regex)', async ({
+// TODO(lforst): This cannot make it into production - Make sure to fix this test
+// The problem is that if we are not applying build time instrumentation Next.js will still emit spans (which is fine, but we need to find a different way of testing that build time instrumentation is successfully disabled - maybe with an attribute or something if build-time instrumentation is applied)
+test.skip('should not automatically create transactions for routes that were excluded from auto wrapping (regex)', async ({
   request,
 }) => {
   const transactionPromise = waitForTransaction('nextjs-13', async transactionEvent => {

dev-packages/e2e-tests/test-applications/nextjs-app-dir/app/layout.tsx

@@ -27,7 +27,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
               <Link href="/server-component/parameter/42">/server-component/parameter/42</Link>
             </li>
             <li>
-              <Link href="/server-component/parameter/foo/bar/baz">/server-component/parameter/foo/bar/baz</Link>
+              <Link href="/server-component/parameter/foo/bar/baz" prefetch={false}>
+                /server-component/parameter/foo/bar/baz
+              </Link>
             </li>
             <li>
               <Link href="/not-found">/not-found</Link>

packages/nextjs/src/common/pages-router-instrumentation/wrapApiHandlerWithSentry.ts

@@ -3,18 +3,17 @@ import {
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
   captureException,
   continueTrace,
-  getActiveSpan,
-  getRootSpan,
   setHttpStatus,
   startSpanManual,
   withIsolationScope,
 } from '@sentry/core';
-import { isString, logger, objectify, vercelWaitUntil } from '@sentry/utils';
+import { isString, logger, objectify } from '@sentry/utils';
+
+import { vercelWaitUntil } from '@sentry/utils';
 import type { NextApiRequest } from 'next';
-import { TRANSACTION_ATTR_SHOULD_DROP_TRANSACTION } from '../span-attributes-with-logic-attached';
 import type { AugmentedNextApiResponse, NextApiHandler } from '../types';
 import { flushSafelyWithTimeout } from '../utils/responseEnd';
-import { escapeNextjsTracing } from '../utils/tracingUtils';
+import { dropNextjsRootContext, escapeNextjsTracing } from '../utils/tracingUtils';
 
 export type AugmentedNextApiRequest = NextApiRequest & {
   __withSentry_applied__?: boolean;
@@ -29,21 +28,13 @@ export type AugmentedNextApiRequest = NextApiRequest & {
  * @returns The wrapped handler which will always return a Promise.
  */
 export function wrapApiHandlerWithSentry(apiHandler: NextApiHandler, parameterizedRoute: string): NextApiHandler {
-  // Since the API route handler spans emitted by Next.js are super buggy with completely wrong timestamps
-  // (fix pending at the time of writing this: https://github.com/vercel/next.js/pull/70908) we want to intentionally
-  // drop them. In the future, when Next.js' OTEL instrumentation is in a high-quality place we can potentially think
-  // about keeping them.
-  const nextJsOwnedSpan = getActiveSpan();
-  if (nextJsOwnedSpan) {
-    getRootSpan(nextJsOwnedSpan)?.setAttribute(TRANSACTION_ATTR_SHOULD_DROP_TRANSACTION, true);
-  }
-
   return new Proxy(apiHandler, {
     apply: (
       wrappingTarget,
       thisArg,
       args: [AugmentedNextApiRequest | undefined, AugmentedNextApiResponse | undefined],
     ) => {
+      dropNextjsRootContext();
       return escapeNextjsTracing(() => {
         const [req, res] = args;
 

packages/nextjs/src/common/pages-router-instrumentation/wrapApiHandlerWithSentryVercelCrons.ts

@@ -9,7 +9,7 @@ type EdgeRequest = {
 };
 
 /**
- * Wraps a function with Sentry crons instrumentation by automaticaly sending check-ins for the given Vercel crons config.
+ * Wraps a function with Sentry crons instrumentation by automatically sending check-ins for the given Vercel crons config.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function wrapApiHandlerWithSentryVercelCrons<F extends (...args: any[]) => any>(

packages/nextjs/src/common/pages-router-instrumentation/wrapPageComponentWithSentry.ts

@@ -1,6 +1,6 @@
 import { captureException, getCurrentScope, withIsolationScope } from '@sentry/core';
 import { extractTraceparentData } from '@sentry/utils';
-import { escapeNextjsTracing } from '../utils/tracingUtils';
+import { dropNextjsRootContext, escapeNextjsTracing } from '../utils/tracingUtils';
 
 interface FunctionComponent {
   (...args: unknown[]): unknown;
@@ -25,6 +25,7 @@ export function wrapPageComponentWithSentry(pageComponent: FunctionComponent | C
   if (isReactClassComponent(pageComponent)) {
     return class SentryWrappedPageComponent extends pageComponent {
       public render(...args: unknown[]): unknown {
+        dropNextjsRootContext();
         return escapeNextjsTracing(() => {
           return withIsolationScope(() => {
             const scope = getCurrentScope();
@@ -62,6 +63,7 @@ export function wrapPageComponentWithSentry(pageComponent: FunctionComponent | C
   } else if (typeof pageComponent === 'function') {
     return new Proxy(pageComponent, {
       apply(target, thisArg, argArray: [{ _sentryTraceData?: string } | undefined]) {
+        dropNextjsRootContext();
         return escapeNextjsTracing(() => {
           return withIsolationScope(() => {
             const scope = getCurrentScope();

packages/nextjs/src/common/utils/tracingUtils.ts

@@ -1,7 +1,8 @@
-import { Scope, startNewTrace } from '@sentry/core';
+import { Scope, getActiveSpan, getRootSpan, spanToJSON, startNewTrace } from '@sentry/core';
 import type { PropagationContext } from '@sentry/types';
 import { GLOBAL_OBJ, logger } from '@sentry/utils';
 import { DEBUG_BUILD } from '../debug-build';
+import { TRANSACTION_ATTR_SHOULD_DROP_TRANSACTION } from '../span-attributes-with-logic-attached';
 
 const commonPropagationContextMap = new WeakMap<object, PropagationContext>();
 
@@ -92,3 +93,19 @@ export function escapeNextjsTracing<T>(cb: () => T): T {
     });
   }
 }
+
+/**
+ * Ideally this function never lands in the develop branch.
+ *
+ * Drops the entire span tree this function was called in, if it was a span tree created by Next.js.
+ */
+export function dropNextjsRootContext(): void {
+  const nextJsOwnedSpan = getActiveSpan();
+  if (nextJsOwnedSpan) {
+    const rootSpan = getRootSpan(nextJsOwnedSpan);
+    const rootSpanAttributes = spanToJSON(rootSpan).data;
+    if (rootSpanAttributes?.['next.span_type']) {
+      getRootSpan(nextJsOwnedSpan)?.setAttribute(TRANSACTION_ATTR_SHOULD_DROP_TRANSACTION, true);
+    }
+  }
+}

packages/nextjs/src/common/utils/wrapperUtils.ts

@@ -17,7 +17,7 @@ import type { Span } from '@sentry/types';
 import { isString, vercelWaitUntil } from '@sentry/utils';
 
 import { autoEndSpanOnResponseEnd, flushSafelyWithTimeout } from './responseEnd';
-import { commonObjectToIsolationScope, escapeNextjsTracing } from './tracingUtils';
+import { commonObjectToIsolationScope, dropNextjsRootContext, escapeNextjsTracing } from './tracingUtils';
 
 declare module 'http' {
   interface IncomingMessage {
@@ -93,6 +93,7 @@ export function withTracedServerSideDataFetcher<F extends (...args: any[]) => Pr
     this: unknown,
     ...args: Parameters<F>
   ): Promise<{ data: ReturnType<F>; sentryTrace?: string; baggage?: string }> {
+    dropNextjsRootContext();
     return escapeNextjsTracing(() => {
       const isolationScope = commonObjectToIsolationScope(req);
       return withIsolationScope(isolationScope, () => {

packages/nextjs/src/common/withServerActionInstrumentation.ts

@@ -1,16 +1,20 @@
 import {
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
   SPAN_STATUS_ERROR,
+  captureException,
+  continueTrace,
+  getClient,
   getIsolationScope,
+  handleCallbackErrors,
+  startSpan,
   withIsolationScope,
 } from '@sentry/core';
-import { captureException, continueTrace, getClient, handleCallbackErrors, startSpan } from '@sentry/core';
 import { logger, vercelWaitUntil } from '@sentry/utils';
 
 import { DEBUG_BUILD } from './debug-build';
 import { isNotFoundNavigationError, isRedirectNavigationError } from './nextNavigationErrorUtils';
 import { flushSafelyWithTimeout } from './utils/responseEnd';
-import { escapeNextjsTracing } from './utils/tracingUtils';
+import { dropNextjsRootContext, escapeNextjsTracing } from './utils/tracingUtils';
 
 interface Options {
   formData?: FormData;
@@ -64,6 +68,7 @@ async function withServerActionInstrumentationImplementation<A extends (...args:
   options: Options,
   callback: A,
 ): Promise<ReturnType<A>> {
+  dropNextjsRootContext();
   return escapeNextjsTracing(() => {
     return withIsolationScope(async isolationScope => {
       const sendDefaultPii = getClient()?.getOptions().sendDefaultPii;

packages/nextjs/src/common/wrapGenerationFunctionWithSentry.ts

@@ -50,9 +50,6 @@ export function wrapGenerationFunctionWithSentry<F extends (...args: any[]) => a
         const rootSpan = getRootSpan(activeSpan);
         const { scope } = getCapturedScopesOnSpan(rootSpan);
         setCapturedScopesOnSpan(rootSpan, scope ?? new Scope(), isolationScope);
-
-        // We mark the root span as an app router span so we can allow-list it in our span processor that would normally filter out all Next.js transactions/spans
-        rootSpan.setAttribute('sentry.rsc', true);
       }
 
       let data: Record<string, unknown> | undefined = undefined;