feat(nextjs): Add option to automatically tunnel events

Author: Luca Forstner

packages/nextjs/src/config/types.ts

@@ -26,6 +26,28 @@ export type NextConfigFunctionWithSentry = (
   defaults: { defaultConfig: NextConfigObject },
 ) => NextConfigObjectWithSentry;
 
+// Vendored from Next.js
+type RouteHas =
+  | {
+      type: 'header' | 'query' | 'cookie';
+      key: string;
+      value?: string;
+    }
+  | {
+      type: 'host';
+      key?: undefined;
+      value: string;
+    };
+
+// Vendored from Next.js
+type Rewrite = {
+  source: string;
+  destination: string;
+  basePath?: false;
+  locale?: false;
+  has?: RouteHas[];
+};
+
 export type NextConfigObject = {
   // Custom webpack options
   webpack?: WebpackConfigFunction | null;
@@ -41,6 +63,15 @@ export type NextConfigObject = {
   publicRuntimeConfig?: { [key: string]: unknown };
   // File extensions that count as pages in the `pages/` directory
   pageExtensions?: string[];
+  // TODO
+  rewrites?: () => Promise<
+    | Rewrite[]
+    | {
+        beforeFiles: Rewrite[];
+        afterFiles: Rewrite[];
+        fallback: Rewrite[];
+      }
+  >;
 };
 
 export type UserSentryOptions = {
@@ -74,6 +105,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

@@ -13,6 +13,7 @@ import { default as SentryWebpackPlugin } from '@sentry/webpack-plugin';
 import * as chalk from 'chalk';
 import * as fs from 'fs';
 import * as path from 'path';
+import * as webpack from 'webpack';
 
 // Note: If you need to import a type from Webpack, do it in `types.ts` and export it from there. Otherwise, our
 // circular dependency check thinks this file is importing from itself. See https://github.com/pahen/madge/issues/306.
@@ -201,6 +202,15 @@ export function constructWebpackConfigFunction(
       );
     }
 
+    if (userSentryOptions.rewritesTunnel) {
+      newConfig.plugins = newConfig.plugins || [];
+      newConfig.plugins.push(
+        new webpack.DefinePlugin({
+          __SENTRY_REWRITES_TUNNEL_PATH__: JSON.stringify(userSentryOptions.rewritesTunnel),
+        }),
+      );
+    }
+
     return newConfig;
   };
 }

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) {
+    setUpRewriteRules(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,52 @@ 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;
+}
+
+/**
+ * TODO
+ */
+function setUpRewriteRules(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[]) => {
+    // TODO: Consider trailing slash option
+
+    const injectedRewrites = [
+      {
+        source: `${tunnelPath}/:orgid/:projectid`, // without slash
+        destination: 'https://:orgid.ingest.sentry.io/api/:projectid/envelope/',
+      },
+      {
+        source: `${tunnelPath}/:orgid/:projectid/`, // with 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,6 +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 { dsnFromString } from '@sentry/utils';
 
 import { nextRouterInstrumentation } from './performance/client';
 import { buildMetadata } from './utils/metadata';
@@ -29,10 +30,21 @@ export { BrowserTracing };
 // Treeshakable guard to remove all code related to tracing
 declare const __SENTRY_TRACING__: boolean;
 
+// Variable that is injected at build-time to have an automatic tunneling setup that uses Next.js' rewrites option
+declare const __SENTRY_REWRITES_TUNNEL_PATH__: string | undefined;
+
 type GlobalWithAssetPrefixPath = typeof global & { __rewriteFramesAssetPrefixPath__: string };
 
 /** Inits the Sentry NextJS SDK on the browser with the React SDK. */
 export function init(options: NextjsOptions): void {
+  if (typeof __SENTRY_REWRITES_TUNNEL_PATH__ === 'string' && options.dsn) {
+    const dsnComponents = dsnFromString(options.dsn);
+    if (dsnComponents.host.match(/^o\d+\.ingest.sentry.io$/)) {
+      const orgId = dsnComponents.host.split('.')[0];
+      options.tunnel = `${__SENTRY_REWRITES_TUNNEL_PATH__}/${orgId}/${dsnComponents.projectId}/`;
+    }
+  }
+
   buildMetadata(options, ['nextjs', 'react']);
   options.environment = options.environment || process.env.NODE_ENV;
   addClientIntegrations(options);