simplify page regex and getting of route

Author: lobsterkatie

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

@@ -37,7 +37,7 @@ const DATA_FETCHING_FUNCTIONS = {
 
 type LoaderOptions = {
   projectDir: string;
-  pageRegex: RegExp;
+  pagesDir: string;
 };
 
 /**
@@ -109,7 +109,7 @@ export default function wrapDataFetchersLoader(this: LoaderThis<LoaderOptions>,
   }
 
   // We know one or the other will be defined, depending on the version of webpack being used
-  const { projectDir, pageRegex } = 'getOptions' in this ? this.getOptions() : this.query;
+  const { projectDir, pagesDir } = 'getOptions' in this ? this.getOptions() : this.query;
 
   // In the following branch we will proxy the user's file. This means we return code (basically an entirely new file)
   // that re - exports all the user file's originial export, but with a "sentry-proxy-loader" query in the module
@@ -171,22 +171,26 @@ export default function wrapDataFetchersLoader(this: LoaderThis<LoaderOptions>,
       path.relative(projectDir, this.resourcePath),
     );
 
-    // Get the route name from this page's filepath
-    let route = this.resourcePath.match(pageRegex)?.[2];
-    if (!route) {
-      logger.warn(`Unable to wrap code from page ${this.resourcePath}, because the route regex has no matches.`);
-      return userCode;
-    }
-
     // Fill in template placeholders
     let injectedCode = modifiedTemplateCode;
+    const route = path
+      // Get the path of the file insde of the pages directory
+      .relative(pagesDir, this.resourcePath)
+      // Add a slash at the beginning
+      .replace(/(.*)/, '/$1')
+      // Pull off the file extension
+      .replace(/\.(jsx?|tsx?)/, '')
+      // 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(/^$/, '/');
+    injectedCode = injectedCode.replace('__FILEPATH__', route);
     for (const { placeholder, alias } of Object.values(DATA_FETCHING_FUNCTIONS)) {
       injectedCode = injectedCode.replace(new RegExp(placeholder, 'g'), alias);
     }
 
-    // Any route ending in '/index' will correspond to the root of that directory, '/'.
-    route = route.replace(/index$/, '');
-    injectedCode = injectedCode.replace('__FILEPATH__', route);
 
     return `${modifiedUserCode}\n${injectedCode}`;
   }

packages/nextjs/src/config/webpack.ts

@@ -78,25 +78,16 @@ export function constructWebpackConfigFunction(
         ],
       };
 
-      // There are a few different things going on in this regex:
-      //   - It is being used here as a matcher for which files to process with the loader, and will be used in the
-      //     loader itself to isolate the route at which the page will be served (represented here by the `/.*` between
-      //     `pages` and `index`)
-      //   - `/src` is optional because the `pages` directory can either be at the root level of the project or in a
-      //     `src` directory
-      //   - `/?index` isn't included in the capturing group for the route because `a/b/c/index.js` will be served at
-      //     `a/b/c/`
-      //   - In `/?index`, the slash is optional because the route `/` will already have had its single slash consumed
-      //     by the `/.*`
-      const pageRegex = new RegExp(`${escapeStringForRegex(projectDir)}(/src)?/pages(/.*)(/?index)?\\.(jsx?|tsx?)`);
-
       if (userSentryOptions.experiments?.autoWrapDataFetchers) {
+        const pagesDir = newConfig.resolve?.alias?.['private-next-pages'] as string;
+
         newConfig.module.rules.push({
-          test: pageRegex,
+          // Nextjs allows the `pages` folder to optionally live inside a `src` folder
+          test: new RegExp(`${escapeStringForRegex(projectDir)}(/src)?/pages/.*\\.(jsx?|tsx?)`),
           use: [
             {
               loader: path.resolve(__dirname, 'loaders/dataFetchersLoader.js'),
-              options: { projectDir, pageRegex },
+              options: { projectDir, pagesDir },
             },
           ],
         });