feat(nextjs): remove pages API wrapper but keep edge wrapping

Author: logaretm

packages/nextjs/rollup.npm.config.mjs

@@ -40,7 +40,7 @@ export default [
   ...makeNPMConfigVariants(
     makeBaseNPMConfig({
       entrypoints: [
-        'src/config/templates/apiWrapperTemplate.ts',
+        'src/config/templates/edgeApiWrapperTemplate.ts',
         'src/config/templates/middlewareWrapperTemplate.ts',
         'src/config/templates/pageWrapperTemplate.ts',
         'src/config/templates/requestAsyncStorageShim.ts',

packages/nextjs/src/config/loaders/wrappingLoader.ts

@@ -4,7 +4,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import type { RollupBuild, RollupError } from 'rollup';
 import { rollup } from 'rollup';
-import type { ServerComponentContext, VercelCronsConfig } from '../../common/types';
+import type { ServerComponentContext } from '../../common/types';
 import type { LoaderThis } from './types';
 
 // Just a simple placeholder to make referencing module consistent
@@ -13,12 +13,12 @@ const SENTRY_WRAPPER_MODULE_NAME = 'sentry-wrapper-module';
 // Needs to end in .cjs in order for the `commonjs` plugin to pick it up
 const WRAPPING_TARGET_MODULE_NAME = '__SENTRY_WRAPPING_TARGET_FILE__.cjs';
 
-const apiWrapperTemplatePath = path.resolve(__dirname, '..', 'templates', 'apiWrapperTemplate.js');
-const apiWrapperTemplateCode = fs.readFileSync(apiWrapperTemplatePath, { encoding: 'utf8' });
-
 const pageWrapperTemplatePath = path.resolve(__dirname, '..', 'templates', 'pageWrapperTemplate.js');
 const pageWrapperTemplateCode = fs.readFileSync(pageWrapperTemplatePath, { encoding: 'utf8' });
 
+const edgeApiWrapperTemplatePath = path.resolve(__dirname, '..', 'templates', 'edgeApiWrapperTemplate.js');
+const edgeApiWrapperTemplateCode = fs.readFileSync(edgeApiWrapperTemplatePath, { encoding: 'utf8' });
+
 const middlewareWrapperTemplatePath = path.resolve(__dirname, '..', 'templates', 'middlewareWrapperTemplate.js');
 const middlewareWrapperTemplateCode = fs.readFileSync(middlewareWrapperTemplatePath, { encoding: 'utf8' });
 
@@ -40,17 +40,15 @@ export type WrappingLoaderOptions = {
   appDir: string | undefined;
   pageExtensionRegex: string;
   excludeServerRoutes: Array<RegExp | string>;
-  wrappingTargetKind: 'page' | 'api-route' | 'middleware' | 'server-component' | 'route-handler';
-  vercelCronsConfig?: VercelCronsConfig;
+  wrappingTargetKind: 'page' | 'edge-api-route' | 'middleware' | 'server-component' | 'route-handler';
   nextjsRequestAsyncStorageModulePath?: string;
 };
 
 /**
  * Replace the loaded file with a wrapped version the original file. In the wrapped version, the original file is loaded,
- * any data-fetching functions (`getInitialProps`, `getStaticProps`, and `getServerSideProps`) or API routes it contains
+ * any data-fetching functions (`getInitialProps`, `getStaticProps`, and `getServerSideProps`) it contains
  * are wrapped, and then everything is re-exported.
  */
-// eslint-disable-next-line complexity
 export default function wrappingLoader(
   this: LoaderThis<WrappingLoaderOptions>,
   userCode: string,
@@ -64,15 +62,14 @@ export default function wrappingLoader(
     pageExtensionRegex,
     excludeServerRoutes = [],
     wrappingTargetKind,
-    vercelCronsConfig,
     nextjsRequestAsyncStorageModulePath,
   } = 'getOptions' in this ? this.getOptions() : this.query;
 
   this.async();
 
   let templateCode: string;
 
-  if (wrappingTargetKind === 'page' || wrappingTargetKind === 'api-route') {
+  if (wrappingTargetKind === 'page') {
     if (pagesDir === undefined) {
       this.callback(null, userCode, userModuleSourceMap);
       return;
@@ -102,15 +99,41 @@ export default function wrappingLoader(
       return;
     }
 
-    if (wrappingTargetKind === 'page') {
-      templateCode = pageWrapperTemplateCode;
-    } else if (wrappingTargetKind === 'api-route') {
-      templateCode = apiWrapperTemplateCode;
-    } else {
-      throw new Error(`Invariant: Could not get template code of unknown kind "${wrappingTargetKind}"`);
+    templateCode = pageWrapperTemplateCode;
+
+    // Inject the route and the path to the file we're wrapping into the template
+    templateCode = templateCode.replace(/__ROUTE__/g, parameterizedPagesRoute.replace(/\\/g, '\\\\'));
+  } else if (wrappingTargetKind === 'edge-api-route') {
+    if (pagesDir === undefined) {
+      this.callback(null, userCode, userModuleSourceMap);
+      return;
+    }
+
+    // Get the parameterized route name from this API route's filepath
+    const parameterizedPagesRoute = path
+      // Get the path of the file inside of the pages directory
+      .relative(pagesDir, this.resourcePath)
+      // Replace all backslashes with forward slashes (windows)
+      .replace(/\\/g, '/')
+      // Add a slash at the beginning
+      .replace(/(.*)/, '/$1')
+      // Pull off the file extension
+      // eslint-disable-next-line @sentry-internal/sdk/no-regexp-constructor -- not end user input
+      .replace(new RegExp(`\\.(${pageExtensionRegex})`), '')
+      // Any page file named `index` corresponds to root of the directory its in, URL-wise, so turn `/xyz/index` into
+      // just `/xyz`
+      .replace(/\/index$/, '')
+      // In case all of the above have left us with an empty string (which will happen if we're dealing with the
+      // homepage), sub back in the root route
+      .replace(/^$/, '/');
+
+    // Skip explicitly-ignored pages
+    if (stringMatchesSomePattern(parameterizedPagesRoute, excludeServerRoutes, true)) {
+      this.callback(null, userCode, userModuleSourceMap);
+      return;
     }
 
-    templateCode = templateCode.replace(/__VERCEL_CRONS_CONFIGURATION__/g, JSON.stringify(vercelCronsConfig));
+    templateCode = edgeApiWrapperTemplateCode;
 
     // Inject the route and the path to the file we're wrapping into the template
     templateCode = templateCode.replace(/__ROUTE__/g, parameterizedPagesRoute.replace(/\\/g, '\\\\'));

…c/config/templates/apiWrapperTemplate.ts …nfig/templates/edgeApiWrapperTemplate.tspackages/nextjs/src/config/templates/apiWrapperTemplate.ts renamed to packages/nextjs/src/config/templates/edgeApiWrapperTemplate.ts packages/nextjs/src/config/templates/apiWrapperTemplate.ts renamed to packages/nextjs/src/config/templates/edgeApiWrapperTemplate.ts

@@ -1,6 +1,6 @@
 /*
- * This file is a template for the code which will be substituted when our webpack loader handles API files in the
- * `pages/` directory.
+ * This file is a template for the code which will be substituted when our webpack loader handles edge API files in the
+ * `pages/api/` directory.
  *
  * We use `__SENTRY_WRAPPING_TARGET_FILE__` as a placeholder for the path to the file being wrapped. Because it's not a real package,
  * this causes both TS and ESLint to complain, hence the pragma comments below.
@@ -10,15 +10,15 @@
 import * as origModule from '__SENTRY_WRAPPING_TARGET_FILE__';
 import * as Sentry from '@sentry/nextjs';
 import type { PageConfig } from 'next';
-import type { NextApiHandler, VercelCronsConfig } from '../../common/types';
+import type { EdgeRouteHandler } from '../../edge/types';
 
 type NextApiModule = (
   | {
       // ESM export
-      default?: NextApiHandler;
+      default?: EdgeRouteHandler;
     }
   // CJS export
-  | NextApiHandler
+  | EdgeRouteHandler
 ) & { config?: PageConfig };
 
 const userApiModule = origModule as NextApiModule;
@@ -37,26 +37,11 @@ if ('default' in userApiModule && typeof userApiModule.default === 'function') {
 
 const origConfig = userApiModule.config || {};
 
-// Setting `externalResolver` to `true` prevents nextjs from throwing a warning in dev about API routes resolving
-// without sending a response. It's a false positive (a response is sent, but only after we flush our send queue), and
-// we throw a warning of our own to tell folks that, but it's better if we just don't have to deal with it in the first
-// place.
-export const config = {
-  ...origConfig,
-  api: {
-    ...origConfig.api,
-    externalResolver: true,
-  },
-};
-
-declare const __VERCEL_CRONS_CONFIGURATION__: VercelCronsConfig;
+// Re-export the config as-is (edge routes don't need externalResolver)
+export const config = origConfig;
 
 let wrappedHandler = userProvidedHandler;
 
-if (wrappedHandler && __VERCEL_CRONS_CONFIGURATION__) {
-  wrappedHandler = Sentry.wrapApiHandlerWithSentryVercelCrons(wrappedHandler, __VERCEL_CRONS_CONFIGURATION__);
-}
-
 if (wrappedHandler) {
   wrappedHandler = Sentry.wrapApiHandlerWithSentry(wrappedHandler, '__ROUTE__');
 }
@@ -67,3 +52,4 @@ export default wrappedHandler;
 // not include anything whose name matches something we've explicitly exported above.
 // @ts-expect-error See above
 export * from '__SENTRY_WRAPPING_TARGET_FILE__';
+

packages/nextjs/src/config/webpack.ts

@@ -5,7 +5,6 @@ import { debug, escapeStringForRegex, loadModule, parseSemver } from '@sentry/co
 import * as fs from 'fs';
 import * as path from 'path';
 import { sync as resolveSync } from 'resolve';
-import type { VercelCronsConfig } from '../common/types';
 import { getBuildPluginOptions, normalizePathForGlob } from './getBuildPluginOptions';
 import type { RouteManifest } from './manifest/types';
 // Note: If you need to import a type from Webpack, do it in `types.ts` and export it from there. Otherwise, our
@@ -133,8 +132,6 @@ export function constructWebpackConfigFunction({
       appDirPath = maybeSrcAppDirPath;
     }
 
-    const apiRoutesPath = pagesDirPath ? path.join(pagesDirPath, 'api') : undefined;
-
     const middlewareLocationFolder = pagesDirPath
       ? path.join(pagesDirPath, '..')
       : appDirPath
@@ -166,20 +163,44 @@ export function constructWebpackConfigFunction({
 
     const isPageResource = (resourcePath: string): boolean => {
       const normalizedAbsoluteResourcePath = normalizeLoaderResourcePath(resourcePath);
+      const apiRoutesPath = pagesDirPath ? path.join(pagesDirPath, 'api') : undefined;
       return (
         pagesDirPath !== undefined &&
         normalizedAbsoluteResourcePath.startsWith(pagesDirPath + path.sep) &&
-        !normalizedAbsoluteResourcePath.startsWith(apiRoutesPath + path.sep) &&
+        !(apiRoutesPath && normalizedAbsoluteResourcePath.startsWith(apiRoutesPath + path.sep)) &&
         dotPrefixedPageExtensions.some(ext => normalizedAbsoluteResourcePath.endsWith(ext))
       );
     };
 
-    const isApiRouteResource = (resourcePath: string): boolean => {
+    const isEdgeApiRouteResource = (resourcePath: string): boolean => {
       const normalizedAbsoluteResourcePath = normalizeLoaderResourcePath(resourcePath);
-      return (
-        normalizedAbsoluteResourcePath.startsWith(apiRoutesPath + path.sep) &&
-        dotPrefixedPageExtensions.some(ext => normalizedAbsoluteResourcePath.endsWith(ext))
-      );
+      const apiRoutesPath = pagesDirPath ? path.join(pagesDirPath, 'api') : undefined;
+      if (
+        !apiRoutesPath ||
+        !normalizedAbsoluteResourcePath.startsWith(apiRoutesPath + path.sep) ||
+        !dotPrefixedPageExtensions.some(ext => normalizedAbsoluteResourcePath.endsWith(ext))
+      ) {
+        return false;
+      }
+
+      // Check if the file exports a config with runtime: 'edge'
+      // We check the source file to detect edge runtime
+      try {
+        if (!fs.existsSync(normalizedAbsoluteResourcePath)) {
+          return false;
+        }
+        const fileContent = fs.readFileSync(normalizedAbsoluteResourcePath, 'utf8');
+        // Check for edge runtime in config export - handle various formats:
+        // export const config = { runtime: 'edge' }
+        // export const config = { runtime: "edge" }
+        // export const config = { runtime: `edge` }
+        // Also handle multiline and whitespace variations
+        // Match: runtime: 'edge', runtime: "edge", runtime: `edge`, or runtime:'edge' (no spaces)
+        return /runtime\s*:\s*['"`]edge['"`]/.test(fileContent);
+      } catch {
+        // If we can't read the file, assume it's not an edge route
+        return false;
+      }
     };
 
     const possibleMiddlewareLocations = pageExtensions.flatMap(middlewareFileEnding => {
@@ -237,39 +258,15 @@ export function constructWebpackConfigFunction({
         ],
       });
 
-      let vercelCronsConfig: VercelCronsConfig = undefined;
-      try {
-        if (process.env.VERCEL && userSentryOptions.automaticVercelMonitors) {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          vercelCronsConfig = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'vercel.json'), 'utf8')).crons;
-          if (vercelCronsConfig) {
-            debug.log(
-              "[@sentry/nextjs] Creating Sentry cron monitors for your Vercel Cron Jobs. You can disable this feature by setting the 'automaticVercelMonitors' option to false in you Next.js config.",
-            );
-          }
-        }
-      } catch (e) {
-        if ((e as { code: string }).code === 'ENOENT') {
-          // noop if file does not exist
-        } else {
-          // log but noop
-          debug.error(
-            '[@sentry/nextjs] Failed to read vercel.json for automatic cron job monitoring instrumentation',
-            e,
-          );
-        }
-      }
-
-      // Wrap api routes
+      // Wrap edge API routes
       newConfig.module.rules.unshift({
-        test: isApiRouteResource,
+        test: isEdgeApiRouteResource,
         use: [
           {
             loader: path.resolve(__dirname, 'loaders', 'wrappingLoader.js'),
             options: {
               ...staticWrappingLoaderOptions,
-              vercelCronsConfig,
-              wrappingTargetKind: 'api-route',
+              wrappingTargetKind: 'edge-api-route',
             },
           },
         ],

packages/nextjs/test/config/loaders.test.ts

@@ -152,19 +152,19 @@ describe('webpack loaders', () => {
       },
       {
         resourcePath: '/Users/Maisey/projects/squirrelChasingSimulator/src/pages/api/testApiRoute.ts',
-        expectedWrappingTargetKind: 'api-route',
+        expectedWrappingTargetKind: undefined,
       },
       {
         resourcePath: './src/pages/api/testApiRoute.ts',
-        expectedWrappingTargetKind: 'api-route',
+        expectedWrappingTargetKind: undefined,
       },
       {
         resourcePath: '/Users/Maisey/projects/squirrelChasingSimulator/src/pages/api/nested/testApiRoute.js',
-        expectedWrappingTargetKind: 'api-route',
+        expectedWrappingTargetKind: undefined,
       },
       {
         resourcePath: '/Users/Maisey/projects/squirrelChasingSimulator/src/pages/api/nested/testApiRoute.custom.js',
-        expectedWrappingTargetKind: 'api-route',
+        expectedWrappingTargetKind: undefined,
       },
       {
         resourcePath: '/Users/Maisey/projects/squirrelChasingSimulator/src/app/nested/route.ts',

packages/nextjs/test/config/wrappingLoader.test.ts

@@ -9,13 +9,6 @@ vi.mock('fs', { spy: true });
 const originalReadfileSync = fs.readFileSync;
 
 vi.spyOn(fs, 'readFileSync').mockImplementation((filePath, options) => {
-  if (filePath.toString().endsWith('/config/templates/apiWrapperTemplate.js')) {
-    return originalReadfileSync(
-      path.join(__dirname, '../../build/cjs/config/templates/apiWrapperTemplate.js'),
-      options,
-    );
-  }
-
   if (filePath.toString().endsWith('/config/templates/pageWrapperTemplate.js')) {
     return originalReadfileSync(
       path.join(__dirname, '../../build/cjs/config/templates/pageWrapperTemplate.js'),
@@ -65,44 +58,6 @@ const defaultLoaderThis = {
 };
 
 describe('wrappingLoader', () => {
-  it('should correctly wrap API routes on unix', async () => {
-    const callback = vi.fn();
-
-    const userCode = `
-      export default function handler(req, res) {
-        res.json({ foo: "bar" });
-      }
-    `;
-    const userCodeSourceMap = undefined;
-
-    const loaderPromise = new Promise<void>(resolve => {
-      const loaderThis = {
-        ...defaultLoaderThis,
-        resourcePath: '/my/pages/my/route.ts',
-        callback: callback.mockImplementation(() => {
-          resolve();
-        }),
-        getOptions() {
-          return {
-            pagesDir: '/my/pages',
-            appDir: '/my/app',
-            pageExtensionRegex: DEFAULT_PAGE_EXTENSION_REGEX,
-            excludeServerRoutes: [],
-            wrappingTargetKind: 'api-route',
-            vercelCronsConfig: undefined,
-            nextjsRequestAsyncStorageModulePath: '/my/request-async-storage.js',
-          };
-        },
-      } satisfies LoaderThis<WrappingLoaderOptions>;
-
-      wrappingLoader.call(loaderThis, userCode, userCodeSourceMap);
-    });
-
-    await loaderPromise;
-
-    expect(callback).toHaveBeenCalledWith(null, expect.stringContaining("'/my/route'"), expect.anything());
-  });
-
   describe('middleware wrapping', () => {
     it('should export proxy when user exports named "proxy" export', async () => {
       const callback = vi.fn();