Switch to injecting into API routes and _app for both server and client

Author: lobsterkatie

packages/nextjs/src/config/utils.ts

@@ -4,7 +4,6 @@ import * as SentryWebpackPlugin from '@sentry/webpack-plugin';
 
 import {
   BuildContext,
-  EntryPointObject,
   EntryPointValue,
   EntryPropertyObject,
   NextConfigObject,
@@ -13,7 +12,6 @@ import {
   WebpackConfigObject,
   WebpackEntryProperty,
 } from './types';
-import { SERVER_SDK_INIT_PATH, storeServerConfigFileLocation } from './utils';
 
 export { SentryWebpackPlugin };
 
@@ -58,12 +56,6 @@ export function constructWebpackConfigFunction(
   const newWebpackFunction = (incomingConfig: WebpackConfigObject, buildContext: BuildContext): WebpackConfigObject => {
     let newConfig = { ...incomingConfig };
 
-    // if we're building server code, store the webpack output path as an env variable, so we know where to look for the
-    // webpack-processed version of `sentry.server.config.js` when we need it
-    if (newConfig.target === 'node') {
-      storeServerConfigFileLocation(newConfig);
-    }
-
     // if user has custom webpack config (which always takes the form of a function), run it so we have actual values to
     // work with
     if ('webpack' in userNextConfig && typeof userNextConfig.webpack === 'function') {
@@ -140,39 +132,11 @@ async function addSentryToEntryProperty(
   const newEntryProperty =
     typeof currentEntryProperty === 'function' ? await currentEntryProperty() : { ...currentEntryProperty };
 
-  // Add a new element to the `entry` array, we force webpack to create a bundle out of the user's
-  // `sentry.server.config.js` file and output it to `SERVER_INIT_LOCATION`. (See
-  // https://webpack.js.org/guides/code-splitting/#entry-points.) We do this so that the user's config file is run
-  // through babel (and any other processors through which next runs the rest of the user-provided code - pages, API
-  // routes, etc.). Specifically, we need any ESM-style `import` code to get transpiled into ES5, so that we can call
-  // `require()` on the resulting file when we're instrumenting the sesrver. (We can't use a dynamic import there
-  // because that then forces the user into a particular TS config.)
-
-  // On the server, create a separate bundle, as there's no one entry point depended on by all the others
-  if (buildContext.isServer) {
-    // slice off the final `.js` since webpack is going to add it back in for us, and we don't want to end up with
-    // `.js.js` as the extension
-    newEntryProperty[SERVER_SDK_INIT_PATH.slice(0, -3)] = SERVER_SDK_CONFIG_FILE;
-  }
-  // On the client, it's sufficient to inject it into the `main` JS code, which is included in every browser page.
-  else {
-    addFileToExistingEntryPoint(newEntryProperty, 'main', CLIENT_SDK_CONFIG_FILE);
-
-    // To work around a bug in nextjs, we need to ensure that the `main.js` entry is empty (otherwise it'll choose that
-    // over `main` and we'll lose the change we just made). In case some other library has put something into it, copy
-    // its contents over before emptying it out. See
-    // https://github.com/getsentry/sentry-javascript/pull/3696#issuecomment-863363803.)
-    const mainjsValue = newEntryProperty['main.js'];
-    if (Array.isArray(mainjsValue) && mainjsValue.length > 0) {
-      const mainValue = newEntryProperty.main;
-
-      // copy the `main.js` entries over
-      newEntryProperty.main = Array.isArray(mainValue)
-        ? [...mainjsValue, ...mainValue]
-        : { ...(mainValue as EntryPointObject), import: [...mainjsValue, ...(mainValue as EntryPointObject).import] };
-
-      // nuke the entries
-      newEntryProperty['main.js'] = [];
+  const userConfigFile = buildContext.isServer ? SERVER_SDK_CONFIG_FILE : CLIENT_SDK_CONFIG_FILE;
+
+  for (const entryPointName in newEntryProperty) {
+    if (entryPointName === 'pages/_app' || entryPointName.includes('pages/api')) {
+      addFileToExistingEntryPoint(newEntryProperty, entryPointName, userConfigFile);
     }
   }
 

packages/nextjs/src/config/webpack.ts

@@ -5,7 +5,6 @@ import { fill, isString, logger, stripUrlQueryAndFragment } from '@sentry/utils'
 import * as domain from 'domain';
 import * as http from 'http';
 import { default as createNextServer } from 'next';
-import * as path from 'path';
 import * as querystring from 'querystring';
 import * as url from 'url';
 
@@ -111,18 +110,6 @@ function makeWrappedHandlerGetter(origHandlerGetter: HandlerGetter): WrappedHand
   // Otherwise, it's just a pass-through to the original method.
   const wrappedHandlerGetter = async function(this: NextServer): Promise<ReqHandler> {
     if (!sdkSetupComplete) {
-      try {
-        // `SENTRY_SERVER_INIT_PATH` is set at build time, and points to a webpack-processed version of the user's
-        // `sentry.server.config.js`. Requiring it starts the SDK.
-        require(path.resolve(process.env.SENTRY_SERVER_INIT_PATH as string));
-      } catch (err) {
-        // Log the error but don't bail - we still want the wrapping to happen, in case the user is doing something weird
-        // and manually calling `Sentry.init()` somewhere else. We log to console instead of using logger from utils
-        // because Sentry is not initialized.
-        // eslint-disable-next-line no-console
-        console.error(`[Sentry] Could not initialize SDK. Received error:\n${err}`);
-      }
-
       // stash this in the closure so that `makeWrappedReqHandler` can use it
       liveServer = this.server;
       const serverPrototype = Object.getPrototypeOf(liveServer);