wrap API routes automatically using webpack

Author: lobsterkatie

packages/nextjs/src/utils/api-wrapping-loader.ts

@@ -0,0 +1,104 @@
+// there's apparently no way to get at this with `import`
+// TODO - really?
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Module = require('module');
+
+import { NextApiHandler } from 'next';
+
+import * as Sentry from '../index.server';
+
+type ModuleObject = {
+  _compile: (code: string, filename: string) => void;
+  exports: { default: unknown };
+};
+
+type LoaderContext = { resource: string; loaders: Loader[] };
+type Loader = { options: LoaderOptions; path: string };
+type LoaderOptions = { sdkPath: string };
+
+type WrappedNextApiHandler = NextApiHandler; // purely for ease of reading
+
+/**
+ * Replace the API route handler in the given code with a wrapped version.
+ *
+ * @param this Context data passed to the loader
+ * @param rawInput The stringified code we're modifying
+ * @returns Modified stringified code
+ */
+export default function load(this: LoaderContext, rawInput: string): string {
+  const options = getOptions(this.loaders) as LoaderOptions;
+
+  // Wherever this is running, it can't seem to resolve the Sentry SDK when referred to by
+  // name (which it will have to do below when it compiles the stringified code into an actual module). Fortunately,
+  // we're able to do so from within our config file, so we just pass the absolute path through in `options`
+  const origCode = rawInput.replace('@sentry/nextjs', options.sdkPath);
+
+  // `module.parent` comes back as `null` rather than `undefined` when there is no parent, but the `Module` constructor
+  // below needs `undefined` instead. Because reasons. (We need to ignore the deprecation warning because `parent` may
+  // be deprecated, but the `Module` constructor still uses it as of 16.1.0. See
+  // https://github.com/nodejs/node/blob/26e318a321a872bc0f41e60706bb49381684afb2/lib/internal/modules/cjs/loader.js#L168.)
+  // eslint-disable-next-line deprecation/deprecation
+  const parent = module.parent || undefined;
+  // It's unclear what this does for us, if anything
+  const filename = 'lookIMadeAModule';
+
+  // Compile the stringified code into an actual Module object so we can grab its default export (the route handler) for
+  // wrapping
+  const routeModule = new Module(filename, parent) as ModuleObject;
+  routeModule._compile(origCode, filename);
+  const origHandler = routeModule.exports.default;
+
+  if (typeof origHandler !== 'function') {
+    // eslint-disable-next-line no-console
+    console.warn(`[Sentry] Could not wrap ${this.resource} for error handling. Default export is not a function.`);
+    return rawInput;
+  }
+
+  // Wrap the route handler in a try/catch to catch any errors which it generates
+  const newHandler = makeWrappedRequestHandler(origHandler as NextApiHandler);
+
+  // Ultimately we have to return a string, and we need the wrapped handler to take the place of the original one (as
+  // the default export) so literally substitute it in
+  let newCode = origCode.replace(origHandler.toString(), newHandler.toString());
+
+  // The new function we just subbed in is, character for character, the code written below as the return value of
+  // `makeWrappedRequestHandler`, which means we have to define `origHandler`, since its code has now been replaced
+  newCode = `${newCode}\n\nconst origHandler = ${origHandler.toString()}`;
+
+  return newCode;
+}
+
+/** Extract the options for this loader out of the array of loaders in scope */
+function getOptions(loaders: Loader[]): LoaderOptions | undefined {
+  for (const loader of loaders) {
+    if (loader.path.includes('nextjs/dist/utils/api-wrapping-loader')) {
+      return loader.options;
+    }
+  }
+  // we shouldn't ever get here - one of the given loaders should be this loader
+  return undefined;
+}
+
+/** Wrap the given request handler for error-catching purposes */
+function makeWrappedRequestHandler(origHandler: NextApiHandler): WrappedNextApiHandler {
+  // TODO are there any overloads we need to worry about?
+  return async (req, res) => {
+    try {
+      return await origHandler(req, res);
+    } catch (err) {
+      if (Sentry !== undefined) {
+        Sentry.withScope(scope => {
+          scope.addEventProcessor(event => Sentry.Handlers.parseRequest(event, req));
+          Sentry.captureException(err);
+        });
+        Sentry.flush(2000).catch(() => {
+          // Never throws
+        });
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn('[Sentry] SDK is disabled. Please make sure to initialize Sentry in `sentry.server.config.js`.');
+      }
+      throw err;
+    }
+  };
+}

packages/nextjs/src/utils/config.ts

@@ -2,6 +2,7 @@ import { getSentryRelease } from '@sentry/node';
 import { logger } from '@sentry/utils';
 import defaultWebpackPlugin, { SentryCliPluginOptions } from '@sentry/webpack-plugin';
 import * as SentryWebpackPlugin from '@sentry/webpack-plugin';
+import * as path from 'path';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type PlainObject<T = any> = { [key: string]: T };
@@ -14,7 +15,9 @@ type PlainObject<T = any> = { [key: string]: T };
 type WebpackExport = (config: WebpackConfig, options: WebpackOptions) => WebpackConfig;
 
 // The two arguments passed to the exported `webpack` function, as well as the thing it returns
-type WebpackConfig = { devtool: string; plugins: PlainObject[]; entry: EntryProperty };
+// TODO use real webpack types?
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type WebpackConfig = { devtool: string; plugins: PlainObject[]; entry: EntryProperty; module: { rules: any[] } };
 type WebpackOptions = { dev: boolean; isServer: boolean; buildId: string };
 
 // For our purposes, the value for `entry` is either an object, or a function which returns such an object
@@ -41,8 +44,9 @@ const _injectFile = (entryProperty: EntryPropertyObject, injectionPoint: string,
     return;
   }
 
-  // In case we inject our client config, we need to add it after the frontend code
-  // otherwise the runtime config isn't loaded. See: https://github.com/getsentry/sentry-javascript/issues/3485
+  // We need to inject the user-provided config file after the frontend code so that it has access to the runtime config
+  // (which won't have loaded yet otherwise). See: https://github.com/getsentry/sentry-javascript/issues/3485. On the
+  // server side, we inject beforehand so that we can catch any errors in the code that follows.
   const isClient = injectee === sentryClientConfig;
 
   if (typeof injectedInto === 'string') {
@@ -68,8 +72,6 @@ const _injectFile = (entryProperty: EntryPropertyObject, injectionPoint: string,
 };
 
 const injectSentry = async (origEntryProperty: EntryProperty, isServer: boolean): Promise<EntryProperty> => {
-  // Out of the box, nextjs uses the `() => Promise<EntryPropertyObject>)` flavor of EntryProperty, where the returned
-  // object has string arrays for values.
   // The `entry` entry in a webpack config can be a string, array of strings, object, or function. By default, nextjs
   // sets it to an async function which returns the promise of an object of string arrays. Because we don't know whether
   // someone else has come along before us and changed that, we need to check a few things along the way. The one thing
@@ -151,6 +153,42 @@ export function withSentryConfig(
       newConfig.devtool = 'source-map';
     }
 
+    // Wherever the webpack process ultimately runs, it's not somewhere where modules resolve successfully, so get the
+    // absolute paths here, where resolution does work, and pass those into the config instead of the module names
+    const sdkResolvedMain = require.resolve('@sentry/nextjs');
+    const loaderPath = path.join(path.dirname(sdkResolvedMain), 'utils/api-wrapping-loader.js');
+    const babelLoaderResolvedMain = require.resolve('babel-loader');
+    const babelPluginResolvedMain = require.resolve('@babel/plugin-transform-modules-commonjs');
+
+    newConfig.module = {
+      ...newConfig.module,
+      rules: [
+        ...newConfig.module.rules,
+        {
+          test: /pages\/api\/.*/,
+          use: [
+            {
+              // `sdkResolvedMain` is the path to `dist/index.server.js`
+              loader: loaderPath,
+              options: {
+                // pass the path into the loader so it can be used there as well (it's another place where modules don't
+                // resolve well)
+                sdkPath: sdkResolvedMain,
+              },
+            },
+            {
+              loader: babelLoaderResolvedMain,
+              options: {
+                // this is here to turn any `import`s into `requires`, so that our loader can load the string as a
+                // module (loaders apply top to bottom, so this happens before ours)
+                plugins: [babelPluginResolvedMain],
+              },
+            },
+          ],
+        },
+      ],
+    };
+
     // Inject user config files (`sentry.client.confg.js` and `sentry.server.config.js`), which is where `Sentry.init()`
     // is called. By adding them here, we ensure that they're bundled by webpack as part of both server code and client code.
     newConfig.entry = (injectSentry(newConfig.entry, options.isServer) as unknown) as EntryProperty;