feat(nextjs): Wrap server-side getInitialProps (#5546)

Co-authored-by: Katie Byers <[email protected]>

Author: Luca Forstner

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

@@ -25,14 +25,24 @@ const jscs = jscodeshiftDefault || jscodeshiftNamespace;
 
 // These are types not in the TS sense, but in the instance-of-a-Type-class sense
 const {
+  ArrayPattern,
+  ClassDeclaration,
+  ExportAllDeclaration,
+  ExportDefaultDeclaration,
+  ExportDefaultSpecifier,
+  ExportNamedDeclaration,
   ExportSpecifier,
+  FunctionDeclaration,
   Identifier,
   ImportSpecifier,
+  JSXIdentifier,
   MemberExpression,
   Node,
   ObjectExpression,
   ObjectPattern,
   Property,
+  RestElement,
+  TSTypeParameter,
   VariableDeclaration,
   VariableDeclarator,
 } = jscs;
@@ -291,8 +301,6 @@ function maybeRenameNode(ast: AST, identifierPath: ASTPath<IdentifierNode>, alia
   // it means we potentially need to rename something *not* already named `getServerSideProps`, `getStaticProps`, or
   // `getStaticPaths`, meaning we need to rename nodes outside of the collection upon which we're currently acting.
   if (ExportSpecifier.check(parent)) {
-    // console.log(node);
-    // debugger;
     if (parent.exported.name !== parent.local?.name && node === parent.exported) {
       const currentLocalName = parent.local?.name || '';
       renameIdentifiers(ast, currentLocalName, alias);
@@ -320,3 +328,202 @@ export function removeComments(ast: AST): void {
   const nodesWithComments = ast.find(Node).filter(nodePath => !!nodePath.node.comments);
   nodesWithComments.forEach(nodePath => (nodePath.node.comments = null));
 }
+
+/**
+ * Determines from a given AST of a file whether the file has a default export or not.
+ */
+export function hasDefaultExport(ast: AST): boolean {
+  const defaultExports = ast.find(Node, value => {
+    return (
+      ExportDefaultDeclaration.check(value) ||
+      ExportDefaultSpecifier.check(value) ||
+      (ExportSpecifier.check(value) && value.exported.name === 'default')
+    );
+  });
+
+  // In theory there should only ever be 0 or 1, but who knows what people do
+  return defaultExports.length > 0;
+}
+
+/**
+ * Extracts all identifier names (`'constName'`) from an destructuringassignment'sArrayPattern (the `[constName]` in`const [constName] = [1]`).
+ *
+ * This function recursively calls itself and `getExportIdentifiersFromObjectPattern` since destructuring assignments
+ * can be deeply nested with objects and arrays.
+ *
+ * Example - take the following program:
+ *
+ * ```js
+ * export const [{ foo: name1 }, [{ bar: [name2]}, name3]] = [{ foo: 1 }, [{ bar: [2] }, 3]];
+ * ```
+ *
+ * The `ArrayPattern` node in question for this program is the left hand side of the assignment:
+ * `[{ foo: name1 }, [{ bar: [name2]}, name3]]`
+ *
+ * Applying this function to this `ArrayPattern` will return the following: `["name1", "name2", "name3"]`
+ *
+ * DISCLAIMER: This function only correcly extracts identifiers of `ArrayPatterns` in the context of export statements.
+ * Using this for `ArrayPattern` outside of exports would require us to handle more edgecases. Hence the "Export" in
+ * this function's name.
+ */
+function getExportIdentifiersFromArrayPattern(arrayPattern: jscsTypes.ArrayPattern): string[] {
+  const identifiers: string[] = [];
+
+  arrayPattern.elements.forEach(element => {
+    if (Identifier.check(element)) {
+      identifiers.push(element.name);
+    } else if (ObjectPattern.check(element)) {
+      identifiers.push(...getExportIdentifiersFromObjectPattern(element));
+    } else if (ArrayPattern.check(element)) {
+      identifiers.push(...getExportIdentifiersFromArrayPattern(element));
+    } else if (RestElement.check(element) && Identifier.check(element.argument)) {
+      // `RestElements` are spread operators
+      identifiers.push(element.argument.name);
+    }
+  });
+
+  return identifiers;
+}
+
+/**
+ * Grabs all identifiers from an ObjectPattern within a destructured named export declaration
+ * statement (`name` in "export const { val: name } = { val: 1 }").
+ *
+ * This function recursively calls itself and `getExportIdentifiersFromArrayPattern` since destructuring assignments
+ * can be deeply nested with objects and arrays.
+ *
+ * Example - take the following program:
+ *
+ * ```js
+ * export const { foo: [{ bar: name1 }], name2, ...name3 } = { foo: [{}] };
+ * ```
+ *
+ * The `ObjectPattern` node in question for this program is the left hand side of the assignment:
+ * `{ foo: [{ bar: name1 }], name2, ...name3 } = { foo: [{}] }`
+ *
+ * Applying this function to this `ObjectPattern` will return the following: `["name1", "name2", "name3"]`
+ *
+ * DISCLAIMER: This function only correcly extracts identifiers of `ObjectPatterns` in the context of export statements.
+ * Using this for `ObjectPatterns` outside of exports would require us to handle more edgecases. Hence the "Export" in
+ * this function's name.
+ */
+function getExportIdentifiersFromObjectPattern(objectPatternNode: jscsTypes.ObjectPattern): string[] {
+  const identifiers: string[] = [];
+
+  objectPatternNode.properties.forEach(property => {
+    // An `ObjectPattern`'s properties can be either `Property`s or `RestElement`s.
+    if (Property.check(property)) {
+      if (Identifier.check(property.value)) {
+        identifiers.push(property.value.name);
+      } else if (ObjectPattern.check(property.value)) {
+        identifiers.push(...getExportIdentifiersFromObjectPattern(property.value));
+      } else if (ArrayPattern.check(property.value)) {
+        identifiers.push(...getExportIdentifiersFromArrayPattern(property.value));
+      } else if (RestElement.check(property.value) && Identifier.check(property.value.argument)) {
+        // `RestElements` are spread operators
+        identifiers.push(property.value.argument.name);
+      }
+      // @ts-ignore AST types are wrong here
+    } else if (RestElement.check(property) && Identifier.check(property.argument)) {
+      // `RestElements` are spread operators
+      // @ts-ignore AST types are wrong here
+      identifiers.push(property.argument.name as string);
+    }
+  });
+
+  return identifiers;
+}
+
+/**
+ * Given the AST of a file, this function extracts all named exports from the file.
+ *
+ * @returns a list of deduplicated identifiers.
+ */
+export function getExportIdentifierNames(ast: AST): string[] {
+  // We'll use a set to dedupe at the end, but for now we use an array as our accumulator because you can add multiple elements to it at once.
+  const identifiers: string[] = [];
+
+  // The following variable collects all export statements that double as named declaration, e.g.:
+  // - export function myFunc() {}
+  // - export var myVar = 1337
+  // - export const myConst = 1337
+  // - export const { a, ..rest } = { a: 1, b: 2, c: 3 }
+  // We will narrow those situations down in subsequent code blocks.
+  const namedExportDeclarationNodeDeclarations = ast
+    .find(ExportNamedDeclaration)
+    .nodes()
+    .map(namedExportDeclarationNode => namedExportDeclarationNode.declaration);
+
+  namedExportDeclarationNodeDeclarations
+    .filter((declarationNode): declarationNode is jscsTypes.VariableDeclaration =>
+      // Narrow down to varible declarations, e.g.:
+      // export const a = ...;
+      // export var b = ...;
+      // export let c = ...;
+      // export let c, d = 1;
+      VariableDeclaration.check(declarationNode),
+    )
+    .map(
+      variableDeclarationNode =>
+        // Grab all declarations in a single export statement.
+        // There can be multiple in the case of for example in `export let a, b;`.
+        variableDeclarationNode.declarations,
+    )
+    .reduce((prev, curr) => [...prev, ...curr], []) // flatten - now we have all declaration nodes in one flat array
+    .forEach(declarationNode => {
+      if (
+        Identifier.check(declarationNode) || // should never happen
+        JSXIdentifier.check(declarationNode) || // JSX like `<name></name>` - we don't care about these
+        TSTypeParameter.check(declarationNode) // type definitions - we don't care about those
+      ) {
+        // We should never have to enter this branch, it is just for type narrowing.
+      } else if (Identifier.check(declarationNode.id)) {
+        // If it's a simple declaration with an identifier we collect it. (e.g. `const myIdentifier = 1;` -> "myIdentifier")
+        identifiers.push(declarationNode.id.name);
+      } else if (ObjectPattern.check(declarationNode.id)) {
+        // If we encounter a destructuring export like `export const { foo: name1, bar: name2 } = { foo: 1, bar: 2 };`,
+        // we try collecting the identifiers from the pattern `{ foo: name1, bar: name2 }`.
+        identifiers.push(...getExportIdentifiersFromObjectPattern(declarationNode.id));
+      } else if (ArrayPattern.check(declarationNode.id)) {
+        // If we encounter a destructuring export like `export const [name1, name2] = [1, 2];`,
+        // we try collecting the identifiers from the pattern `[name1, name2]`.
+        identifiers.push(...getExportIdentifiersFromArrayPattern(declarationNode.id));
+      }
+    });
+
+  namedExportDeclarationNodeDeclarations
+    .filter(
+      // Narrow down to class and function declarations, e.g.:
+      // export class Foo {};
+      // export function bar() {};
+      (declarationNode): declarationNode is jscsTypes.ClassDeclaration | jscsTypes.FunctionDeclaration =>
+        ClassDeclaration.check(declarationNode) || FunctionDeclaration.check(declarationNode),
+    )
+    .map(node => node.id) // Grab the identifier of the function/class - Note: it might be `null` when it's anonymous
+    .filter((id): id is jscsTypes.Identifier => Identifier.check(id)) // Elaborate way of null-checking
+    .forEach(id => identifiers.push(id.name)); // Collect the name of the identifier
+
+  ast
+    .find(ExportSpecifier) // Find stuff like `export {<id [as name]>} [from ...];`
+    .nodes()
+    .forEach(specifier => {
+      // Taking the example above `specifier.exported.name` always contains `id` unless `name` is specified, then it's `name`;
+      if (specifier.exported.name !== 'default') {
+        // You can do default exports "export { something as default };" but we do not want to collect "default" in this
+        // function since it only wants to collect named exports.
+        identifiers.push(specifier.exported.name);
+      }
+    });
+
+  ast
+    .find(ExportAllDeclaration) // Find stuff like `export * from ..." and "export * as someVariable from ...`
+    .nodes()
+    .forEach(declaration => {
+      // Narrow it down to only find `export * as someVariable from ...` (emphasis on "as someVariable")
+      if (declaration.exported) {
+        identifiers.push(declaration.exported.name); // `declaration.exported.name` contains "someVariable"
+      }
+    });
+
+  return [...new Set(identifiers)]; // dedupe
+}

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

@@ -6,15 +6,26 @@
  * manipulating them, and then turning them back into strings and appending our template code to the user's (modified)
  * page code. Greater detail and explanations can be found in situ in the functions below and in the helper functions in
  * `ast.ts`.
+ *
+ * For `getInitialProps` we create a virtual proxy-module that re-exports all the exports and default exports of the
+ * original file and wraps `getInitialProps`. We do this since it allows us to very generically wrap `getInitialProps`
+ * for all kinds ways users might define default exports (which are a lot of ways).
  */
-
 import { logger } from '@sentry/utils';
 import * as fs from 'fs';
 import * as path from 'path';
 
 import { isESM } from '../../utils/isESM';
 import type { AST } from './ast';
-import { findDeclarations, findExports, makeAST, removeComments, renameIdentifiers } from './ast';
+import {
+  findDeclarations,
+  findExports,
+  getExportIdentifierNames,
+  hasDefaultExport,
+  makeAST,
+  removeComments,
+  renameIdentifiers,
+} from './ast';
 import type { LoaderThis } from './types';
 
 // Map to keep track of each function's placeholder in the template and what it should be replaced with. (The latter
@@ -94,44 +105,81 @@ function wrapFunctions(userCode: string, templateCode: string, filepath: string)
  * Wrap `getStaticPaths`, `getStaticProps`, and `getServerSideProps` (if they exist) in the given page code
  */
 export default function wrapDataFetchersLoader(this: LoaderThis<LoaderOptions>, userCode: string): string {
-  // We know one or the other will be defined, depending on the version of webpack being used
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const { projectDir } = this.getOptions ? this.getOptions() : this.query!;
-
   // For now this loader only works for ESM code
   if (!isESM(userCode)) {
     return userCode;
   }
 
-  // If none of the functions we want to wrap appears in the page's code, there's nothing to do. (Note: We do this as a
-  // simple substring match (rather than waiting until we've parsed the code) because it's meant to be an
-  // as-fast-as-possible fail-fast. It's possible for user code to pass this check, even if it contains none of the
-  // functions in question, just by virtue of the correct string having been found, be it in a comment, as part of a
-  // longer variable name, etc. That said, when we actually do the code manipulation we'll be working on the code's AST,
-  // meaning we'll be able to differentiate between code we actually want to change and any false positives which might
-  // come up here.)
-  if (Object.keys(DATA_FETCHING_FUNCTIONS).every(functionName => !userCode.includes(functionName))) {
-    return userCode;
-  }
+  // We know one or the other will be defined, depending on the version of webpack being used
+  const { projectDir } = 'getOptions' in this ? this.getOptions() : this.query;
 
-  const templatePath = path.resolve(__dirname, '../templates/dataFetchersLoaderTemplate.js');
-  // make sure the template is included when runing `webpack watch`
-  this.addDependency(templatePath);
+  // 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
+  // string.
+  // This looks like the following: `export { a, b, c } from "[imagine userfile path here]?sentry-proxy-loader";`
+  // Additionally, in this proxy file we import the userfile's default export, wrap `getInitialProps` on that default
+  // export, and re -export the now modified default export as default.
+  // Webpack will resolve the module with the "sentry-proxy-loader" query to the original file, but will give us access
+  // to the query via`this.resourceQuery`. If we see that `this.resourceQuery` includes includes "sentry-proxy-loader"
+  // we know we're in a proxied file and do not need to proxy again.
 
-  const templateCode = fs.readFileSync(templatePath).toString();
+  if (!this.resourceQuery.includes('sentry-proxy-loader')) {
+    const ast = makeAST(userCode, true); // is there a reason to ever parse without typescript?
 
-  const [modifiedUserCode, modifiedTemplateCode] = wrapFunctions(
-    userCode,
-    templateCode,
-    // Relative path to the page we're currently processing, for use in error messages
-    path.relative(projectDir, this.resourcePath),
-  );
+    const exportedIdentifiers = getExportIdentifierNames(ast);
 
-  // Fill in template placeholders
-  let injectedCode = modifiedTemplateCode;
-  for (const { placeholder, alias } of Object.values(DATA_FETCHING_FUNCTIONS)) {
-    injectedCode = injectedCode.replace(placeholder, alias);
-  }
+    let outputFileContent = '';
+
+    if (exportedIdentifiers.length > 0) {
+      outputFileContent += `export { ${exportedIdentifiers.join(', ')} } from "${
+        this.resourcePath
+      }?sentry-proxy-loader";`;
+    }
+
+    if (hasDefaultExport(ast)) {
+      outputFileContent += `
+        import { default as _sentry_default } from "${this.resourcePath}?sentry-proxy-loader";
+        import { withSentryGetInitialProps } from "@sentry/nextjs";
 
-  return `${modifiedUserCode}\n${injectedCode}`;
+        if (typeof _sentry_default.getInitialProps === 'function') {
+          _sentry_default.getInitialProps = withSentryGetInitialProps(_sentry_default.getInitialProps);
+        }
+
+        export default _sentry_default;`;
+    }
+
+    return outputFileContent;
+  } else {
+    // If none of the functions we want to wrap appears in the page's code, there's nothing to do. (Note: We do this as a
+    // simple substring match (rather than waiting until we've parsed the code) because it's meant to be an
+    // as-fast-as-possible fail-fast. It's possible for user code to pass this check, even if it contains none of the
+    // functions in question, just by virtue of the correct string having been found, be it in a comment, as part of a
+    // longer variable name, etc. That said, when we actually do the code manipulation we'll be working on the code's AST,
+    // meaning we'll be able to differentiate between code we actually want to change and any false positives which might
+    // come up here.)
+    if (Object.keys(DATA_FETCHING_FUNCTIONS).every(functionName => !userCode.includes(functionName))) {
+      return userCode;
+    }
+
+    const templatePath = path.resolve(__dirname, '../templates/dataFetchersLoaderTemplate.js');
+    // make sure the template is included when runing `webpack watch`
+    this.addDependency(templatePath);
+
+    const templateCode = fs.readFileSync(templatePath).toString();
+
+    const [modifiedUserCode, modifiedTemplateCode] = wrapFunctions(
+      userCode,
+      templateCode,
+      // Relative path to the page we're currently processing, for use in error messages
+      path.relative(projectDir, this.resourcePath),
+    );
+
+    // Fill in template placeholders
+    let injectedCode = modifiedTemplateCode;
+    for (const { placeholder, alias } of Object.values(DATA_FETCHING_FUNCTIONS)) {
+      injectedCode = injectedCode.replace(new RegExp(placeholder, 'g'), alias);
+    }
+
+    return `${modifiedUserCode}\n${injectedCode}`;
+  }
 }

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

@@ -12,8 +12,7 @@ type LoaderOptions = {
  */
 export default function prefixLoader(this: LoaderThis<LoaderOptions>, userCode: string): string {
   // We know one or the other will be defined, depending on the version of webpack being used
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const { distDir } = this.getOptions ? this.getOptions() : this.query!;
+  const { distDir } = 'getOptions' in this ? this.getOptions() : this.query;
 
   const templatePath = path.resolve(__dirname, '../templates/prefixLoaderTemplate.js');
   // make sure the template is included when runing `webpack watch`