feat(nextjs): Add option to automatically tunnel events

Author: Luca Forstner

packages/nextjs/src/config/types.ts

@@ -27,6 +27,12 @@ export type NextConfigFunctionWithSentry = (
   defaults: { defaultConfig: NextConfigObject },
 ) => NextConfigObjectWithSentry;
 
+// Vendored from Next.js (this type is not complete - extend if necessary)
+type Rewrite = {
+  source: string;
+  destination: string;
+};
+
 export type NextConfigObject = {
   // Custom webpack options
   webpack?: WebpackConfigFunction | null;
@@ -42,6 +48,15 @@ export type NextConfigObject = {
   publicRuntimeConfig?: { [key: string]: unknown };
   // File extensions that count as pages in the `pages/` directory
   pageExtensions?: string[];
+  // Paths to reroute when requested
+  rewrites?: () => Promise<
+    | Rewrite[]
+    | {
+        beforeFiles: Rewrite[];
+        afterFiles: Rewrite[];
+        fallback: Rewrite[];
+      }
+  >;
 };
 
 export type UserSentryOptions = {
@@ -75,6 +90,9 @@ export type UserSentryOptions = {
   // (`pages/animals/index.js` or `.\src\pages\api\animals\[animalType]\habitat.tsx`), and strings must be be a full,
   // exact match.
   excludeServerRoutes?: Array<RegExp | string>;
+
+  // TODO
+  rewritesTunnel?: string;
 };
 
 export type NextConfigFunction = (phase: string, defaults: { defaultConfig: NextConfigObject }) => NextConfigObject;

packages/nextjs/src/config/webpack.ts

@@ -88,7 +88,7 @@ export function constructWebpackConfigFunction(
     const newConfig = setUpModuleRules(rawNewConfig);
 
     // Add a loader which will inject code that sets global values
-    addValueInjectionLoader(newConfig, userNextConfig, webpackPluginOptions);
+    addValueInjectionLoader(newConfig, userNextConfig, userSentryOptions, webpackPluginOptions);
 
     if (isServer) {
       if (userSentryOptions.autoInstrumentServerFunctions !== false) {
@@ -654,6 +654,7 @@ function setUpModuleRules(newConfig: WebpackConfigObject): WebpackConfigObjectWi
 function addValueInjectionLoader(
   newConfig: WebpackConfigObjectWithModuleRules,
   userNextConfig: NextConfigObject,
+  userSentryOptions: UserSentryOptions,
   webpackPluginOptions: SentryWebpackPlugin.SentryCliPluginOptions,
 ): void {
   const assetPrefix = userNextConfig.assetPrefix || userNextConfig.basePath || '';
@@ -693,6 +694,9 @@ function addValueInjectionLoader(
           },
         }
       : undefined),
+
+    // `rewritesTunnel` set by the user in Next.js config
+    __sentryRewritesTunnelPath__: userSentryOptions.rewritesTunnel,
   };
 
   newConfig.module.rules.push(

packages/nextjs/src/config/withSentryConfig.ts

@@ -40,8 +40,10 @@ function getFinalConfigObject(
   // to `constructWebpackConfigFunction` so that it can live in the returned function's closure.
   const { sentry: userSentryOptions } = incomingUserNextConfigObject;
   delete incomingUserNextConfigObject.sentry;
-  // Remind TS that there's now no `sentry` property
-  const userNextConfigObject = incomingUserNextConfigObject as NextConfigObject;
+
+  if (userSentryOptions?.rewritesTunnel) {
+    setUpTunnelRewriteRules(incomingUserNextConfigObject, userSentryOptions.rewritesTunnel);
+  }
 
   // In order to prevent all of our build-time code from being bundled in people's route-handling serverless functions,
   // we exclude `webpack.ts` and all of its dependencies from nextjs's `@vercel/nft` filetracing. We therefore need to
@@ -50,11 +52,51 @@ function getFinalConfigObject(
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const { constructWebpackConfigFunction } = require('./webpack');
     return {
-      ...userNextConfigObject,
-      webpack: constructWebpackConfigFunction(userNextConfigObject, userSentryWebpackPluginOptions, userSentryOptions),
+      ...incomingUserNextConfigObject,
+      webpack: constructWebpackConfigFunction(
+        incomingUserNextConfigObject,
+        userSentryWebpackPluginOptions,
+        userSentryOptions,
+      ),
     };
   }
 
   // At runtime, we just return the user's config untouched.
-  return userNextConfigObject;
+  return incomingUserNextConfigObject;
+}
+
+/**
+ * Injects rewrite rules into the Next.js config provided by the user to tunnel
+ * requests from the `tunnelPath` to Sentry.
+ */
+function setUpTunnelRewriteRules(userNextConfig: NextConfigObject, tunnelPath: string): void {
+  const originalRewrites = userNextConfig.rewrites;
+
+  // This function doesn't take any arguments at the time of writing but we future-proof
+  // here in case Next.js ever decides to pass some
+  userNextConfig.rewrites = async (...args: unknown[]) => {
+    const injectedRewrites = [
+      {
+        source: `${tunnelPath}/:orgid/:projectid`, // without trailing slash
+        destination: 'https://:orgid.ingest.sentry.io/api/:projectid/envelope/',
+      },
+      {
+        source: `${tunnelPath}/:orgid/:projectid/`, // with trailing slash
+        destination: 'https://:orgid.ingest.sentry.io/api/:projectid/envelope/',
+      },
+    ];
+
+    if (typeof originalRewrites === 'function') {
+      // @ts-ignore weird args error
+      const intermediaryValue = await originalRewrites(...args);
+      if (Array.isArray(intermediaryValue)) {
+        intermediaryValue.push(...injectedRewrites);
+      } else {
+        intermediaryValue.beforeFiles.push(...injectedRewrites);
+      }
+      return intermediaryValue;
+    } else {
+      return injectedRewrites;
+    }
+  };
 }

packages/nextjs/src/index.client.ts

@@ -2,7 +2,7 @@ import { RewriteFrames } from '@sentry/integrations';
 import { configureScope, init as reactInit, Integrations } from '@sentry/react';
 import { BrowserTracing, defaultRequestInstrumentationOptions, hasTracingEnabled } from '@sentry/tracing';
 import { EventProcessor } from '@sentry/types';
-import { logger } from '@sentry/utils';
+import { dsnFromString, logger } from '@sentry/utils';
 
 import { nextRouterInstrumentation } from './performance/client';
 import { buildMetadata } from './utils/metadata';
@@ -34,7 +34,6 @@ declare const __SENTRY_TRACING__: boolean;
 // v12.2.1-canary.3 onwards:
 // https://github.com/vercel/next.js/blob/166e5fb9b92f64c4b5d1f6560a05e2b9778c16fb/packages/next/build/webpack-config.ts#L206
 declare const EdgeRuntime: string | undefined;
-
 const globalWithInjectedValues = global as typeof global & {
   __rewriteFramesAssetPrefixPath__: string;
   __sentryRewritesTunnelPath__?: string;
@@ -50,6 +49,19 @@ export function init(options: NextjsOptions): void {
     return;
   }
 
+  let tunnelPath: string | undefined;
+  if (globalWithInjectedValues.__sentryRewritesTunnelPath__ && options.dsn) {
+    const dsnComponents = dsnFromString(options.dsn);
+    if (dsnComponents.host.match(/^o\d+\.ingest\.sentry\.io$/)) {
+      const orgId = dsnComponents.host.split('.')[0];
+      tunnelPath = `${globalWithInjectedValues.__sentryRewritesTunnelPath__}/${orgId}/${dsnComponents.projectId}/`;
+      __DEBUG_BUILD__ && logger.info(`Tunneling events to "${tunnelPath}"`);
+      options.tunnel = tunnelPath;
+    } else {
+      __DEBUG_BUILD__ && logger.warn('Provided DSN is not a Sentry SaaS DSN. Will not tunnel events.');
+    }
+  }
+
   buildMetadata(options, ['nextjs', 'react']);
   options.environment = options.environment || process.env.NODE_ENV;
   addClientIntegrations(options);

packages/nextjs/src/utils/instrumentServer.ts

@@ -76,6 +76,10 @@ type WrappedPageComponentFinder = PageComponentFinder;
 let liveServer: Server;
 let sdkSetupComplete = false;
 
+const globalWithInjectedValues = global as typeof global & {
+  __sentryRewritesTunnelPath__?: string;
+};
+
 /**
  * Do the monkeypatching and wrapping necessary to catch errors in page routes and record transactions for both page and
  * API routes.
@@ -346,12 +350,27 @@ function makeWrappedMethodForGettingParameterizedPath(
 /**
  * Determine if the request should be traced, by filtering out requests for internal next files and static resources.
  *
- * @param url The URL of the request
+ * @param path The path of the request
  * @param publicDirFiles A set containing relative paths to all available static resources (note that this does not
  * include static *pages*, but rather images and the like)
  * @returns false if the URL is for an internal or static resource
  */
-function shouldTraceRequest(url: string, publicDirFiles: Set<string>): boolean {
+function shouldTraceRequest(path: string, publicDirFiles: Set<string>): boolean {
+  // Don't trace tunneled sentry events
+  const tunnelPath = globalWithInjectedValues.__sentryRewritesTunnelPath__;
+  if (tunnelPath) {
+    const startsWithTunnelPath = path.startsWith(tunnelPath);
+    const transactionNameRest = path.substring(tunnelPath.length);
+
+    // Check if the requested path matches the path we tunnel requests to
+    const restMatchesTunnelStructure = transactionNameRest.match(/^\/o\d+\/\d+\/?$/);
+
+    if (startsWithTunnelPath && restMatchesTunnelStructure) {
+      __DEBUG_BUILD__ && logger.log(`Tunneling Sentry event to "${path}"`);
+      return false;
+    }
+  }
+
   // `static` is a deprecated but still-functional location for static resources
-  return !url.startsWith('/_next/') && !url.startsWith('/static/') && !publicDirFiles.has(url);
+  return !path.startsWith('/_next/') && !path.startsWith('/static/') && !publicDirFiles.has(path);
 }