@sentry/wizard 3.32.0 → 3.33.0

package/e2e-tests/test-applications/remix-test-app/app/routes/_index.tsx

@@ -0,0 +1,48 @@
+import type { MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix App" },
+    { name: "description", content: "Welcome to Remix!" },
+  ];
+};
+
+export default function Index() {
+  return (
+    <div className="font-sans p-4">
+      <h1 className="text-3xl">Welcome to Remix</h1>
+      <ul className="list-disc mt-4 pl-6 space-y-2">
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://remix.run/start/quickstart"
+            rel="noreferrer"
+          >
+            5m Quick Start
+          </a>
+        </li>
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://remix.run/start/tutorial"
+            rel="noreferrer"
+          >
+            30m Tutorial
+          </a>
+        </li>
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://remix.run/docs"
+            rel="noreferrer"
+          >
+            Remix Docs
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}

package/e2e-tests/test-applications/remix-test-app/app/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/e2e-tests/test-applications/remix-test-app/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "remix-test-app",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "remix vite:build",
+    "dev": "remix vite:dev",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "start": "remix-serve ./build/server/index.js",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/node": "^2.11.1",
+    "@remix-run/react": "^2.11.1",
+    "@remix-run/serve": "^2.11.1",
+    "isbot": "^4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^2.11.1",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.1.6",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/e2e-tests/test-applications/remix-test-app/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/e2e-tests/test-applications/remix-test-app/tailwind.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;

package/e2e-tests/test-applications/remix-test-app/vite.config.ts

@@ -0,0 +1,16 @@
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [
+    remix({
+      future: {
+        v3_fetcherPersist: true,
+        v3_relativeSplatPath: true,
+        v3_throwAbortReason: true,
+      },
+    }),
+    tsconfigPaths(),
+  ],
+});

package/e2e-tests/tests/remix.test.ts

@@ -0,0 +1,163 @@
+/* eslint-disable jest/expect-expect */
+import { Integration } from '../../lib/Constants';
+import {
+  checkEnvBuildPlugin,
+  cleanupGit,
+  KEYS,
+  revertLocalChanges,
+} from '../utils';
+import { startWizardInstance } from '../utils';
+import {
+  checkFileContents,
+  checkFileExists,
+  checkIfBuilds,
+  checkIfRunsOnDevMode,
+  checkIfRunsOnProdMode,
+  checkPackageJson,
+  TEST_ARGS,
+} from '../utils';
+import * as path from 'path';
+
+describe('Remix', () => {
+  const integration = Integration.remix;
+  const projectDir = path.resolve(
+    __dirname,
+    '../test-applications/remix-test-app',
+  );
+
+  beforeAll(async () => {
+    const wizardInstance = startWizardInstance(integration, projectDir);
+    const packageManagerPrompted = await wizardInstance.waitForOutput(
+      'Please select your package manager.',
+    );
+
+    if (packageManagerPrompted) {
+      // Selecting `yarn` as the package manager
+      wizardInstance.sendStdin(KEYS.DOWN);
+      wizardInstance.sendStdin(KEYS.ENTER);
+    }
+
+    const tracingOptionPrompted = await wizardInstance.waitForOutput(
+      'Do you want to enable Tracing',
+      {
+        timeout: 240_000,
+      },
+    );
+
+    if (tracingOptionPrompted) {
+      wizardInstance.sendStdin(KEYS.ENTER);
+    }
+
+    const replayOptionPrompted = await wizardInstance.waitForOutput(
+      'Do you want to enable Sentry Session Replay',
+    );
+
+    if (replayOptionPrompted) {
+      wizardInstance.sendStdin(KEYS.ENTER);
+    }
+
+    const examplePagePrompted = await wizardInstance.waitForOutput(
+      'Do you want to create an example page',
+      {
+        optional: true,
+      },
+    );
+
+    if (examplePagePrompted) {
+      wizardInstance.sendStdin(KEYS.ENTER);
+      wizardInstance.sendStdin(KEYS.ENTER);
+    }
+
+    await wizardInstance.waitForOutput(
+      'Sentry has been successfully configured for your Remix project',
+    );
+
+    wizardInstance.kill();
+  });
+
+  afterAll(() => {
+    revertLocalChanges(projectDir);
+    cleanupGit(projectDir);
+  });
+
+  test('package.json is updated correctly', () => {
+    checkPackageJson(projectDir, integration);
+  });
+
+  test('.env-sentry-build-plugin is created and contains the auth token', () => {
+    checkEnvBuildPlugin(projectDir);
+  });
+
+  test('example page exists', () => {
+    checkFileExists(`${projectDir}/app/routes/sentry-example-page.tsx`);
+  });
+
+  test('instrumentation.server file exists', () => {
+    checkFileExists(`${projectDir}/instrumentation.server.mjs`);
+  });
+
+  test('entry.client file contains Sentry initialization', () => {
+    checkFileContents(`${projectDir}/app/entry.client.tsx`, [
+      'import * as Sentry from "@sentry/remix";',
+      `Sentry.init({
+    dsn: "${TEST_ARGS.PROJECT_DSN}",
+    tracesSampleRate: 1,
+
+    integrations: [Sentry.browserTracingIntegration({
+      useEffect,
+      useLocation,
+      useMatches
+    }), Sentry.replayIntegration({
+        maskAllText: true,
+        blockAllMedia: true
+    })],
+
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1
+})`,
+    ]);
+  });
+
+  test('entry.server file contains Sentry code', () => {
+    checkFileContents(`${projectDir}/app/entry.server.tsx`, [
+      'import * as Sentry from "@sentry/remix";',
+      `export const handleError = Sentry.wrapHandleErrorWithSentry((error, { request }) => {
+  // Custom handleError implementation
+});`,
+    ]);
+  });
+
+  test('instrumentation.server file contains Sentry initialization', () => {
+    checkFileContents(`${projectDir}/instrumentation.server.mjs`, [
+      'import * as Sentry from "@sentry/remix";',
+      `Sentry.init({
+    dsn: "${TEST_ARGS.PROJECT_DSN}",
+    tracesSampleRate: 1,
+    autoInstrumentRemix: true
+})`,
+    ]);
+  });
+
+  test('root file contains Sentry ErrorBoundary', () => {
+    checkFileContents(`${projectDir}/app/root.tsx`, [
+      'import { captureRemixErrorBoundaryError } from "@sentry/remix";',
+      `export const ErrorBoundary = () => {
+  const error = useRouteError();
+  captureRemixErrorBoundaryError(error);
+  return <div>Something went wrong</div>;
+};`,
+    ]);
+  });
+
+  test('builds correctly', async () => {
+    await checkIfBuilds(projectDir, 'built');
+  });
+
+  test('runs on dev mode correctly', async () => {
+    await checkIfRunsOnDevMode(projectDir, 'to expose');
+  });
+
+  test('runs on prod mode correctly', async () => {
+    await checkIfRunsOnProdMode(projectDir, '[remix-serve]');
+  });
+});

package/e2e-tests/utils/index.ts

@@ -0,0 +1,302 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+import type { Integration } from '../../lib/Constants';
+import { spawn, execSync } from 'child_process';
+import type { ChildProcess } from 'child_process';
+import { dim, green, red } from '../../lib/Helper/Logging';
+
+export const KEYS = {
+  UP: '\u001b[A',
+  DOWN: '\u001b[B',
+  LEFT: '\u001b[D',
+  RIGHT: '\u001b[C',
+  ENTER: '\r',
+  SPACE: ' ',
+};
+
+export const TEST_ARGS = {
+  AUTH_TOKEN: 'TEST_AUTH_TOKEN',
+  PROJECT_DSN: 'https://public@dsn.ingest.sentry.io/1337',
+};
+
+export const log = {
+  success: (message: string) => {
+    green(`[SUCCESS] ${message}`);
+  },
+  info: (message: string) => {
+    dim(`[INFO] ${message}`);
+  },
+  error: (message: string) => {
+    red(`[ERROR] ${message}`);
+  },
+};
+
+export class WizardTestEnv {
+  taskHandle: ChildProcess;
+
+  constructor(
+    cmd: string,
+    args: string[],
+    opts?: {
+      cwd?: string;
+      debug?: boolean;
+    },
+  ) {
+    this.taskHandle = spawn(cmd, args, { cwd: opts?.cwd, stdio: 'pipe' });
+
+    if (opts?.debug) {
+      this.taskHandle.stdout.pipe(process.stdout);
+      this.taskHandle.stderr.pipe(process.stderr);
+    }
+  }
+
+  sendStdin(input: string) {
+    this.taskHandle.stdin.write(input);
+  }
+
+  /**
+   * Waits for the provided output with `.includes()` logic.
+   *
+   * @returns a promise that resolves to `true` if the output was found, `false` if the output was not found within the
+   * timeout and `optional: true` is set, or it rejects when the timeout was reached with `optional: false`
+   */
+  waitForOutput(
+    output: string,
+    options: {
+      /** Timeout in ms */
+      timeout?: number;
+      /** Whether to always resolve after the timeout, no matter whether the input was actually found or not. */
+      optional?: boolean;
+    } = {},
+  ) {
+    const { timeout, optional } = {
+      timeout: 30_000,
+      optional: false,
+      ...options,
+    };
+
+    return new Promise<boolean>((resolve, reject) => {
+      let outputBuffer = '';
+      const timeoutId = setTimeout(() => {
+        if (optional) {
+          // The output is not found but it's optional so we can resolve the promise with false
+          resolve(false);
+        } else {
+          reject(new Error(`Timeout waiting for output: ${output}`));
+        }
+      }, timeout);
+
+      this.taskHandle.stdout.on('data', (data) => {
+        outputBuffer += data;
+        if (outputBuffer.includes(output)) {
+          clearTimeout(timeoutId);
+          // The output is found so we can resolve the promise with true
+          resolve(true);
+        }
+      });
+    });
+  }
+
+  kill() {
+    this.taskHandle.stdin.destroy();
+    this.taskHandle.stderr.destroy();
+    this.taskHandle.stdout.destroy();
+    this.taskHandle.kill('SIGINT');
+    this.taskHandle.unref();
+  }
+}
+
+/**
+ * Initialize a git repository in the given directory
+ * @param projectDir
+ */
+export function initGit(projectDir: string): void {
+  try {
+    execSync('git init', { cwd: projectDir });
+    // Add all files to the git repo
+    execSync('git add -A', { cwd: projectDir });
+    // Add author info to avoid git commit error
+    execSync('git config user.email test@test.sentry.io', { cwd: projectDir });
+    execSync('git config user.name Test', { cwd: projectDir });
+    execSync('git commit -m init', { cwd: projectDir });
+  } catch (e) {
+    log.error('Error initializing git');
+    throw e;
+  }
+}
+
+/**
+ * Cleanup the git repository in the given directory
+ *
+ * Caution! Make sure `projectDir` is a test project directory,
+ * if in doubt, please commit your local non-test changes first!
+ * @param projectDir
+ */
+export function cleanupGit(projectDir: string): void {
+  try {
+    // Remove the .git directory
+    execSync(`rm -rf ${projectDir}/.git`);
+  } catch (e) {
+    log.error('Error cleaning up git');
+    throw e;
+  }
+}
+
+/**
+ * Revert local changes in the given directory
+ *
+ * Caution! Make sure `projectDir` is a test project directory,
+ * if in doubt, please commit your local non-test changes first!
+ *
+ * @param projectDir
+ */
+export function revertLocalChanges(projectDir: string): void {
+  try {
+    // Revert tracked files
+    execSync('git checkout .', { cwd: projectDir });
+    // Revert untracked files
+    execSync('git clean -fd .', { cwd: projectDir });
+  } catch (e) {
+    log.error('Error reverting local changes');
+    throw e;
+  }
+}
+
+/**
+ * Start the wizard instance with the given integration and project directory
+ * @param integration
+ * @param projectDir
+ *
+ * @returns WizardTestEnv
+ */
+export function startWizardInstance(
+  integration: Integration,
+  projectDir: string,
+): WizardTestEnv {
+  const binPath = path.join(__dirname, '../../dist/bin.js');
+
+  revertLocalChanges(projectDir);
+  cleanupGit(projectDir);
+  initGit(projectDir);
+
+  return new WizardTestEnv(
+    'node',
+    [
+      binPath,
+      '--debug',
+      '-i',
+      integration,
+      '--preSelectedProject.authToken',
+      TEST_ARGS.AUTH_TOKEN,
+      '--preSelectedProject.dsn',
+      TEST_ARGS.PROJECT_DSN,
+    ],
+    { cwd: projectDir },
+  );
+}
+
+/**
+ * Read the file contents and check if it contains the given content
+ *
+ * @param filePath
+ * @param content
+ */
+export function checkFileContents(
+  filePath: string,
+  content: string | string[],
+) {
+  const fileContent = fs.readFileSync(filePath, 'utf-8');
+  const contentArray = Array.isArray(content) ? content : [content];
+
+  for (const c of contentArray) {
+    expect(fileContent).toContain(c);
+  }
+}
+
+/**
+ * Check if the file exists
+ *
+ * @param filePath
+ */
+export function checkFileExists(filePath: string) {
+  expect(fs.existsSync(filePath)).toBe(true);
+}
+
+/**
+ * Check if the package.json contains the given integration
+ * @param projectDir
+ * @param integration
+ */
+export function checkPackageJson(projectDir: string, integration: Integration) {
+  checkFileContents(`${projectDir}/package.json`, `@sentry/${integration}`);
+}
+
+/**
+ * Check if the .sentryclirc contains the auth token
+ * @param projectDir
+ */
+export function checkSentryCliRc(projectDir: string) {
+  checkFileContents(
+    `${projectDir}/.sentryclirc`,
+    `token=${TEST_ARGS.AUTH_TOKEN}`,
+  );
+}
+
+/**
+ * Check if the .env.sentry-build-plugin contains the auth token
+ * @param projectDir
+ */
+export function checkEnvBuildPlugin(projectDir: string) {
+  checkFileContents(
+    `${projectDir}/.env.sentry-build-plugin`,
+    `SENTRY_AUTH_TOKEN=${TEST_ARGS.AUTH_TOKEN}`,
+  );
+}
+
+/**
+ * Check if the project builds
+ * @param projectDir
+ */
+export async function checkIfBuilds(
+  projectDir: string,
+  expectedOutput: string,
+) {
+  const testEnv = new WizardTestEnv('npm', ['run', 'build'], {
+    cwd: projectDir,
+  });
+
+  await expect(testEnv.waitForOutput(expectedOutput)).resolves.toBe(true);
+}
+
+/**
+ * Check if the project runs on dev mode
+ * @param projectDir
+ * @param expectedOutput
+ */
+export async function checkIfRunsOnDevMode(
+  projectDir: string,
+  expectedOutput: string,
+) {
+  const testEnv = new WizardTestEnv('npm', ['run', 'dev'], { cwd: projectDir });
+
+  await expect(testEnv.waitForOutput(expectedOutput)).resolves.toBe(true);
+  testEnv.kill();
+}
+
+/**
+ * Check if the project runs on prod mode
+ * @param projectDir
+ * @param expectedOutput
+ */
+export async function checkIfRunsOnProdMode(
+  projectDir: string,
+  expectedOutput: string,
+) {
+  const testEnv = new WizardTestEnv('npm', ['run', 'start'], {
+    cwd: projectDir,
+  });
+
+  await expect(testEnv.waitForOutput(expectedOutput)).resolves.toBe(true);
+  testEnv.kill();
+}

package/lib/Steps/SentryProjectSelector.ts

@@ -13,7 +13,7 @@ export class SentryProjectSelector extends BaseStep {
     this.debug(answers);
 
     if (!_.has(answers, 'wizard')) {
-      // we skip this completly because the wizard wasn't running
+      // we skip this completely because the wizard wasn't running
       return {};
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry/wizard",
-  "version": "3.32.0",
+  "version": "3.33.0",
   "homepage": "https://github.com/getsentry/sentry-wizard",
   "repository": "https://github.com/getsentry/sentry-wizard",
   "description": "Sentry wizard helping you to configure your project",
@@ -27,7 +27,7 @@
     "@clack/prompts": "0.7.0",
     "@sentry/cli": "^1.72.0",
     "@sentry/node": "^7.69.0",
-    "axios": "1.6.0",
+    "axios": "1.7.4",
     "chalk": "^2.4.1",
     "glob": "^8.1.0",
     "inquirer": "^6.2.0",
@@ -44,6 +44,7 @@
   },
   "devDependencies": {
     "@sentry-internal/eslint-config-sdk": "^7.48.0",
+    "@types/chai": "^4.3.17",
     "@types/glob": "^7.2.0",
     "@types/inquirer": "^0.0.43",
     "@types/jest": "^29.5.0",
@@ -62,6 +63,7 @@
     "rimraf": "^3.0.2",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
+    "tsx": "^3.14.0",
     "typescript": "^5.0.4"
   },
   "resolutions": {
@@ -85,6 +87,7 @@
     "fix:prettier": "prettier --write \"{lib,src,test}/**/*.ts\"",
     "fix:eslint": "eslint . --format stylish --fix",
     "test": "yarn build && jest",
+    "test:e2e": "yarn build && jest -c=\"./e2e-tests/jest.config.ts\" ./e2e-tests/",
     "try": "ts-node bin.ts",
     "try:uninstall": "ts-node bin.ts --uninstall",
     "test:watch": "jest --watch"
@@ -112,7 +115,8 @@
       "/dist/",
       "/node_modules/",
       "\\.d\\.(jsx?|tsx?)$",
-      "\\.no-jest\\.(jsx?|tsx?)$"
+      "\\.no-jest\\.(jsx?|tsx?)$",
+      "/e2e-tests/"
     ],
     "testEnvironment": "node"
   },

package/src/remix/sdk-example.ts

@@ -13,6 +13,12 @@ export async function createExamplePage(options: {
   url: string;
   isTS: boolean;
 }) {
+  const routesPath = 'app/routes';
+
+  if (!fs.existsSync(routesPath)) {
+    fs.mkdirSync(routesPath, { recursive: true });
+  }
+
   const exampleRoutePath = `app/routes/sentry-example-page.${
     options.isTS ? 'ts' : 'js'
   }x`;