@sentry/wizard 3.11.0 → 3.12.0

package/src/utils/clack-utils.ts

@@ -17,6 +17,7 @@ import {
   installPackageWithPackageManager,
   packageManagers,
 } from './package-manager';
+import { debug } from './debug';
 
 const opn = require('opn') as (
   url: string,
@@ -778,14 +779,21 @@ async function askForWizardLogin(options: {
 async function askForProjectSelection(
   projects: SentryProjectData[],
 ): Promise<SentryProjectData> {
+  const label = (project: SentryProjectData): string => {
+    return `${project.organization.slug}/${project.slug}`;
+  };
+  const sortedProjects = [...projects];
+  sortedProjects.sort((a: SentryProjectData, b: SentryProjectData) => {
+    return label(a).localeCompare(label(b));
+  });
   const selection: SentryProjectData | symbol = await abortIfCancelled(
     clack.select({
       maxItems: 12,
       message: 'Select your Sentry project.',
-      options: projects.map((project) => {
+      options: sortedProjects.map((project) => {
         return {
           value: project,
-          label: `${project.organization.slug}/${project.slug}`,
+          label: label(project),
         };
       }),
     }),
@@ -797,3 +805,143 @@ async function askForProjectSelection(
 
   return selection;
 }
+
+/**
+ * Asks users if they have a config file for @param tool (e.g. Vite).
+ * If yes, asks users to specify the path to their config file.
+ *
+ * Use this helper function as a fallback mechanism if the lookup for
+ * a config file with its most usual location/name fails.
+ *
+ * @param toolName Name of the tool for which we're looking for the config file
+ * @param configFileName Name of the most common config file name (e.g. vite.config.js)
+ *
+ * @returns a user path to the config file or undefined if the user doesn't have a config file
+ */
+export async function askForToolConfigPath(
+  toolName: string,
+  configFileName: string,
+): Promise<string | undefined> {
+  const hasConfig = await abortIfCancelled(
+    clack.confirm({
+      message: `Do you have a ${toolName} config file (e.g. ${chalk.cyan(
+        configFileName,
+      )}?`,
+      initialValue: true,
+    }),
+  );
+
+  if (!hasConfig) {
+    return undefined;
+  }
+
+  return await abortIfCancelled(
+    clack.text({
+      message: `Please enter the path to your ${toolName} config file:`,
+      placeholder: path.join('.', configFileName),
+      validate: (value) => {
+        if (!value) {
+          return 'Please enter a path.';
+        }
+
+        try {
+          fs.accessSync(value);
+        } catch {
+          return 'Could not access the file at this path.';
+        }
+      },
+    }),
+  );
+}
+
+/**
+ * Prints copy/paste-able instructions to the console.
+ * Afterwards asks the user if they added the code snippet to their file.
+ *
+ * While there's no point in providing a "no" answer here, it gives users time to fulfill the
+ * task before the wizard continues with additional steps.
+ *
+ * Use this function if you want to show users instructions on how to add/modify
+ * code in their file. This is helpful if automatic insertion failed or is not possible/feasible.
+ *
+ * @param filename the name of the file to which the code snippet should be applied.
+ * If a path is provided, only the filename will be used.
+ * @param codeSnippet the snippet to be printed.
+ * Make sure to follow the diff-like format of highlighting lines that require changes
+ * and showing unchanged lines in gray.
+ *
+ * TODO: Link to wizard spec (develop) once it is live
+ * TODO: refactor copy paste instructions across different wizards to use this function.
+ *       this might require adding a custom message parameter to the function
+ */
+export async function showCopyPasteInstructions(
+  filename: string,
+  codeSnippet: string,
+): Promise<void> {
+  clack.log.step(
+    `Add the following code to your ${chalk.cyan(
+      path.basename(filename),
+    )} file:`,
+  );
+
+  // Intentionally logging directly to console here so that the code can be copied/pasted directly
+  // eslint-disable-next-line no-console
+  console.log(`\n${codeSnippet}`);
+
+  await abortIfCancelled(
+    clack.select({
+      message: 'Did you apply the snippet above?',
+      options: [{ label: 'Yes, continue!', value: true }],
+      initialValue: true,
+    }),
+  );
+}
+
+/**
+ * Creates a new config file with the given @param filepath and @param codeSnippet.
+ *
+ * Use this function to create a new config file for users. This is useful
+ * when users answered that they don't yet have a config file for a tool.
+ *
+ * (This doesn't mean that they don't yet have some other way of configuring
+ * their tool but we can leave it up to them to figure out how to merge configs
+ * here.)
+ *
+ * @param filepath absolute path to the new config file
+ * @param codeSnippet the snippet to be inserted into the file
+ * @param moreInformation (optional) the message to be printed after the file was created
+ * For example, this can be a link to more information about configuring the tool.
+ *
+ * @returns true on sucess, false otherwise
+ */
+export async function createNewConfigFile(
+  filepath: string,
+  codeSnippet: string,
+  moreInformation?: string,
+): Promise<boolean> {
+  if (!path.isAbsolute(filepath)) {
+    debug(`createNewConfigFile: filepath is not absolute: ${filepath}`);
+    return false;
+  }
+
+  const prettyFilename = chalk.cyan(path.relative(process.cwd(), filepath));
+
+  try {
+    await fs.promises.writeFile(filepath, codeSnippet);
+
+    clack.log.success(`Added new ${prettyFilename} file.`);
+
+    if (moreInformation) {
+      clack.log.info(chalk.gray(moreInformation));
+    }
+
+    return true;
+  } catch (e) {
+    debug(e);
+    clack.log.warn(
+      `Could not create a new ${prettyFilename} file. Please create one manually and follow the instructions below.`,
+    );
+  }
+
+  return false;
+}

package/test/android/code-tools.test.ts

@@ -0,0 +1,49 @@
+//@ts-ignore
+import { getLastImportLineLocation } from '../../src/android/code-tools';
+
+describe('code-tools', () => {
+  describe('getLastImportLineLocation', () => {
+    it('returns proper line index', () => {
+      const code = `import a.b.c;\n` + `//<insert-location>\n` + `class X {}`;
+      expect(getLastImportLineLocation(code)).toBe(
+        code.indexOf('//<insert-location>'),
+      );
+    });
+
+    it('returns proper line index when static import is used', () => {
+      const code =
+        `import static a.b.c;\n` + `//<insert-location>\n` + `class X {}`;
+      expect(getLastImportLineLocation(code)).toBe(
+        code.indexOf('//<insert-location>'),
+      );
+    });
+
+    it('returns proper line index when wildcard import is used', () => {
+      const code = `import a.b.*\n` + `//<insert-location>\n` + `class X {}`;
+      expect(getLastImportLineLocation(code)).toBe(
+        code.indexOf('//<insert-location>'),
+      );
+    });
+
+    it('returns proper line index when alias import is used', () => {
+      const code =
+        `import static a.b.c as d\n` + `//<insert-location>\n` + `class X {}`;
+      expect(getLastImportLineLocation(code)).toBe(
+        code.indexOf('//<insert-location>'),
+      );
+    });
+
+    it('returns proper line index when multiple imports are present', () => {
+      const code =
+        `import static a.b.c as d\n` +
+        `import a.b.*\n` +
+        `import static a.b.c;\n` +
+        `import a.b.c;\n` +
+        `//<insert-location>\n` +
+        `class X {}`;
+      expect(getLastImportLineLocation(code)).toBe(
+        code.indexOf('//<insert-location>'),
+      );
+    });
+  });
+});

package/test/sourcemaps/tools/webpack.test.ts

@@ -0,0 +1,303 @@
+import * as fs from 'fs';
+
+import { modifyWebpackConfig } from '../../../src/sourcemaps/tools/webpack';
+
+function updateFileContent(content: string): void {
+  fileContent = content;
+}
+
+let fileContent = '';
+
+jest.mock('@clack/prompts', () => {
+  return {
+    log: {
+      info: jest.fn(),
+      success: jest.fn(),
+    },
+    select: jest.fn().mockImplementation(() => Promise.resolve(true)),
+    isCancel: jest.fn().mockReturnValue(false),
+  };
+});
+
+jest
+  .spyOn(fs.promises, 'readFile')
+  .mockImplementation(() => Promise.resolve(fileContent));
+
+const writeFileSpy = jest
+  .spyOn(fs.promises, 'writeFile')
+  .mockImplementation(() => Promise.resolve(void 0));
+
+const noSourcemapNoPluginsPojo = `module.exports = {
+  entry: "./src/index.js",
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+};`;
+
+const noSourcemapNoPluginsPojoResult = `const {
+  sentryWebpackPlugin
+} = require("@sentry/webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+
+  devtool: "source-map",
+
+  plugins: [sentryWebpackPlugin({
+    authToken: process.env.SENTRY_AUTH_TOKEN,
+    org: "my-org",
+    project: "my-project"
+  })]
+};`;
+
+const noSourcemapsNoPluginsId = `const config = {
+  entry: "./src/index.js",
+
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+};
+
+module.exports = config;`;
+
+const noSourcemapsNoPluginsIdResult = `const {
+  sentryWebpackPlugin
+} = require("@sentry/webpack-plugin");
+
+const config = {
+  entry: "./src/index.js",
+
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+
+  devtool: "source-map",
+
+  plugins: [sentryWebpackPlugin({
+    authToken: process.env.SENTRY_AUTH_TOKEN,
+    org: "my-org",
+    project: "my-project"
+  })]
+};
+
+module.exports = config;`;
+
+const hiddenSourcemapNoPluginsId = `const config = {
+  entry: "./src/index.js",
+
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+
+  devtool: "hidden-cheap-source-map",
+};
+
+module.exports = config;
+    `;
+const hiddenSourcemapNoPluginsIdResult = `const {
+  sentryWebpackPlugin
+} = require("@sentry/webpack-plugin");
+
+const config = {
+  entry: "./src/index.js",
+
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+
+  devtool: "hidden-source-map",
+
+  plugins: [sentryWebpackPlugin({
+    authToken: process.env.SENTRY_AUTH_TOKEN,
+    org: "my-org",
+    project: "my-project"
+  })]
+};
+
+module.exports = config;`;
+
+const arbitrarySourcemapNoPluginsId = `
+const config = {
+  entry: "./src/index.js",
+
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+
+  devtool: getSourcemapSetting(),
+};
+
+module.exports = config;
+    `;
+const arbitrarySourcemapNoPluginsIdResult = `const {
+  sentryWebpackPlugin
+} = require("@sentry/webpack-plugin");
+
+const config = {
+  entry: "./src/index.js",
+
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+
+  devtool: "source-map",
+
+  plugins: [sentryWebpackPlugin({
+    authToken: process.env.SENTRY_AUTH_TOKEN,
+    org: "my-org",
+    project: "my-project"
+  })]
+};
+
+module.exports = config;`;
+
+const noSourcemapUndefinedPluginsPojo = `module.exports = {
+  entry: "./src/index.js",
+  plugins: undefined,
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+};`;
+
+const noSourcemapUndefinedPluginsPojoResult = `const {
+  sentryWebpackPlugin
+} = require("@sentry/webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+
+  plugins: [sentryWebpackPlugin({
+    authToken: process.env.SENTRY_AUTH_TOKEN,
+    org: "my-org",
+    project: "my-project"
+  })],
+
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+
+  devtool: "source-map"
+};`;
+
+const noSourcemapPluginsPojo = `module.exports = {
+  entry: "./src/index.js",
+  plugins: [
+    new HtmlWebpackPlugin(),
+    new MiniCssExtractPlugin(),
+  ],
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+};`;
+
+const noSourcemapPluginsPojoResult = `const {
+  sentryWebpackPlugin
+} = require("@sentry/webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.js",
+
+  plugins: [new HtmlWebpackPlugin(), new MiniCssExtractPlugin(), sentryWebpackPlugin({
+    authToken: process.env.SENTRY_AUTH_TOKEN,
+    org: "my-org",
+    project: "my-project"
+  })],
+
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "build"),
+  },
+
+  devtool: "source-map"
+};`;
+
+describe('modifyWebpackConfig', () => {
+  afterEach(() => {
+    fileContent = '';
+    jest.clearAllMocks();
+  });
+
+  it.each([
+    [
+      'no sourcemap option, no plugins, object',
+      noSourcemapNoPluginsPojo,
+      noSourcemapNoPluginsPojoResult,
+    ],
+    [
+      'no sourcemap option, no plugins, identifier',
+      noSourcemapsNoPluginsId,
+      noSourcemapsNoPluginsIdResult,
+    ],
+    [
+      'hidden sourcemap option, no plugins, identifier',
+      hiddenSourcemapNoPluginsId,
+      hiddenSourcemapNoPluginsIdResult,
+    ],
+    [
+      'arbitrary sourcemap option, no plugins, identifier',
+      arbitrarySourcemapNoPluginsId,
+      arbitrarySourcemapNoPluginsIdResult,
+    ],
+    [
+      'no sourcemap option, plugins, object',
+      noSourcemapUndefinedPluginsPojo,
+      noSourcemapUndefinedPluginsPojoResult,
+    ],
+    [
+      'no sourcemap option, plugins, object',
+      noSourcemapPluginsPojo,
+      noSourcemapPluginsPojoResult,
+    ],
+  ])(
+    'adds plugin and source maps emission to the webpack config (%s)',
+    async (_, originalCode, expectedCode) => {
+      updateFileContent(originalCode);
+
+      //   updateFileContent(originalCode);
+      const addedCode = await modifyWebpackConfig('', {
+        authToken: '',
+        orgSlug: 'my-org',
+        projectSlug: 'my-project',
+        selfHosted: false,
+        url: 'https://sentry.io/',
+      });
+
+      expect(writeFileSpy).toHaveBeenCalledTimes(1);
+      const [[, fileContent]] = writeFileSpy.mock.calls;
+      expect(fileContent).toBe(expectedCode);
+      expect(addedCode).toBe(true);
+    },
+  );
+
+  it('adds the url parameter to the webpack plugin options if self-hosted', async () => {
+    updateFileContent(noSourcemapNoPluginsPojo);
+
+    const addedCode = await modifyWebpackConfig('', {
+      authToken: '',
+      orgSlug: 'my-org',
+      projectSlug: 'my-project',
+      selfHosted: true,
+      url: 'https://santry.io/',
+    });
+
+    expect(writeFileSpy).toHaveBeenCalledTimes(1);
+    const [[, fileContent]] = writeFileSpy.mock.calls;
+    expect(fileContent).toContain('url: "https://santry.io/"');
+    expect(addedCode).toBe(true);
+  });
+});

package/test/utils/ast-utils.test.ts

@@ -1,22 +1,37 @@
-//@ts-ignore
-import { parseModule } from 'magicast';
 import { hasSentryContent } from '../../src/utils/ast-utils';
 
+import * as recast from 'recast';
+
 describe('AST utils', () => {
   describe('hasSentryContent', () => {
-    it("returns true if a '@sentry/' import was found in the parsed module", () => {
-      const code = `
+    it.each([
+      `
+      const { sentryVitePlugin } = require("@sentry/vite-plugin");
+      const somethingelse = require('gs');
+    `,
+      `
         import { sentryVitePlugin } from "@sentry/vite-plugin";
         import * as somethingelse from 'gs';
 
         export default {
             plugins: [sentryVitePlugin()]
         }
-      `;
+      `,
+    ])(
+      "returns true if a require('@sentry/') call was found in the parsed module",
+      (code) => {
+        // recast.parse returns a Program node (or fails) but it's badly typed as any
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        const program = recast.parse(code)
+          .program as recast.types.namedTypes.Program;
+        expect(hasSentryContent(program)).toBe(true);
+      },
+    );
 
-      expect(hasSentryContent(parseModule(code))).toBe(true);
-    });
     it.each([
+      `const whatever = require('something')`,
+      `// const {sentryWebpackPlugin} = require('@sentry/webpack-plugin')`,
+      `const {sAntryWebpackPlugin} = require('webpack-plugin-@sentry')`,
       `
       import * as somethingelse from 'gs';
       export default {
@@ -35,9 +50,13 @@ describe('AST utils', () => {
       }
       `,
     ])(
-      "reutrns false for modules without a valid '@sentry/' import",
+      "returns false if the file doesn't contain any require('@sentry/') calls",
       (code) => {
-        expect(hasSentryContent(parseModule(code))).toBe(false);
+        // recast.parse returns a Program node (or fails) but it's badly typed as any
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        const program = recast.parse(code)
+          .program as recast.types.namedTypes.Program;
+        expect(hasSentryContent(program)).toBe(false);
       },
     );
   });