Expose E2E build errors

node-src/lib/setExitCode.ts

@@ -25,6 +25,9 @@ export const exitCodes = {
   STORYBOOK_START_FAILED: 22,
   STORYBOOK_BROKEN: 23,
 
+  // E2E errors
+  E2E_BUILD_FAILED: 51,
+
   // Subprocess errors
   GIT_NOT_CLEAN: 101,
   GIT_OUT_OF_DATE: 102,

node-src/tasks/build.test.ts

@@ -166,3 +166,45 @@ describe('buildStorybook', () => {
     );
   });
 });
+
+describe('buildStorybook E2E', () => {
+  it('fails with missing dependency error when dependency not installed', async () => {
+    const ctx = {
+      buildCommand: 'npm exec build-archive-storybook',
+      options: { buildScriptName: '', playwright: true },
+      env: { STORYBOOK_BUILD_TIMEOUT: 0 },
+      log: { debug: vi.fn(), error: vi.fn() },
+    } as any;
+
+    const missingDependencyErrorMessages = [
+      'Command not found: build-archive-storybook',
+      'Command "build-archive-storybook" not found',
+      'NPM error code E404\n\nMore error info',
+      'Command failed with exit code 1: npm exec build-archive-storybook --output-dir /tmp/chromatic--4210-0cyodqfYZabe'
+    ];
+
+    for(const errorMessage of missingDependencyErrorMessages) {
+      command.mockRejectedValueOnce(new Error(errorMessage));
+      await expect(buildStorybook(ctx)).rejects.toThrow('Command failed');
+      expect(ctx.log.error).toHaveBeenCalledWith(expect.stringContaining('Failed to import `@chromatic-com/playwright`'));
+
+      ctx.log.error.mockClear();
+    };
+  });
+
+  it('fails with generic error message when not missing dependency error', async () => {
+    const ctx = {
+      buildCommand: 'npm exec build-archive-storybook',
+      options: { buildScriptName: '', playwright: true },
+      env: { STORYBOOK_BUILD_TIMEOUT: 0 },
+      log: { debug: vi.fn(), error: vi.fn() },
+    } as any;
+
+    const errorMessage = 'Command failed with exit code 1: npm exec build-archive-storybook --output-dir /tmp/chromatic--4210-0cyodqfYZabe\n\nMore error message lines\n\nAnd more';
+    command.mockRejectedValueOnce(new Error(errorMessage));
+    await expect(buildStorybook(ctx)).rejects.toThrow('Command failed');
+    expect(ctx.log.error).not.toHaveBeenCalledWith(expect.stringContaining('Failed to import `@chromatic-com/playwright`'));
+    expect(ctx.log.error).toHaveBeenCalledWith(expect.stringContaining('Failed to run `chromatic --playwright`'));
+    expect(ctx.log.error).toHaveBeenCalledWith(expect.stringContaining(errorMessage));
+  });
+});

node-src/tasks/build.ts

@@ -11,7 +11,8 @@
 import buildFailed from '../ui/messages/errors/buildFailed';
 import { failed, initial, pending, skipped, success } from '../ui/tasks/build';
 import { getPackageManagerRunCommand } from '../lib/getPackageManager';
-import { buildBinName as e2EbuildBinName, getE2EBuildCommand, isE2EBuild } from '../lib/e2e';
+import { buildBinName as e2eBuildBinName, getE2EBuildCommand, isE2EBuild } from '../lib/e2e';
+import e2eBuildFailed from '../ui/messages/errors/e2eBuildFailed';
 import missingDependency from '../ui/messages/errors/missingDependency';
 
 export const setSourceDir = async (ctx: Context) => {
@@ -60,6 +61,34 @@
 const timeoutAfter = (ms) =>
   new Promise((resolve, reject) => setTimeout(reject, ms, new Error(`Operation timed out`)));
 
+function isE2EBuildCommandNotFoundError(errorMessage: string) {
+  // It's hard to know if this is the case as each package manager has a different type of
+  // error for this, but we'll try to figure it out.
+  const errorRegexes = ['command not found', `[\\W]?${e2eBuildBinName}[\\W]? not found`, 'code E404', 'exit code 127', `command failed.*${e2eBuildBinName}.*$`];
+  return errorRegexes.some((regex) => errorMessage.match(new RegExp(regex, 'gi')));
+}
+
+function e2eBuildErrorMessage(err, workingDir: string, ctx: Context): { exitCode: number, message: string } {
+  const flag = ctx.options.playwright ? 'playwright' : 'cypress';
+  const errorMessage = err.message;
+
+  // If we tried to run the E2E package's bin directly (due to being in the action)
+  // and it failed, that means we couldn't find it. This probably means they haven't
+  // installed the right dependency or run from the right directory.
+  if (isE2EBuildCommandNotFoundError(errorMessage)) {
+    const dependencyName = `@chromatic-com/${flag}`;
+    return {
+      exitCode: exitCodes.MISSING_DEPENDENCY,
+      message: missingDependency({ dependencyName, flag, workingDir }),
+    };
+  }
+
+  return {
+    exitCode: exitCodes.E2E_BUILD_FAILED,
+    message: e2eBuildFailed({ flag, errorMessage }),
+  };
+}
+
 export const buildStorybook = async (ctx: Context) => {
   let logFile = null;
   if (ctx.options.storybookLogFile) {
@@ -77,7 +106,7 @@
     ctx.log.debug('Runtime metadata:', JSON.stringify(ctx.runtimeMetadata, null, 2));
 
     const subprocess = execaCommand(ctx.buildCommand, {
-      stdio: [null, logFile, logFile],
+      stdio: [null, logFile, null],
       signal,
       env: { NODE_ENV: ctx.env.STORYBOOK_NODE_ENV || 'production' },
     });
@@ -86,16 +115,10 @@
     // If we tried to run the E2E package's bin directly (due to being in the action)
     // and it failed, that means we couldn't find it. This probably means they haven't
     // installed the right dependency or run from the right directory
-    if (
-      ctx.options.inAction &&
-      (isE2EBuild(ctx.options)) &&
-      e.message.match(e2EbuildBinName)
-    ) {
-      const flag = ctx.options.playwright ? 'playwright' : 'cypress';
-      const dependencyName = `@chromatic-com/${flag}`;
-      ctx.log.error(missingDependency({ dependencyName, flag, workingDir: process.cwd() }));
-      ctx.log.debug(e);
-      setExitCode(ctx, exitCodes.MISSING_DEPENDENCY, true);
+    if (isE2EBuild(ctx.options)) {
+      const errorInfo = e2eBuildErrorMessage(e, process.cwd(), ctx);
+      ctx.log.error(errorInfo.message);
+      setExitCode(ctx, errorInfo.exitCode, true);
       throw new Error(failed(ctx).output);
     }
 

node-src/ui/messages/errors/e2eBuildFailed.stories.ts

@@ -0,0 +1,8 @@
+import e2eBuildFailed from './e2eBuildFailed';
+
+export default {
+  title: 'CLI/Messages/Errors',
+};
+
+export const E2EBuildFailed = () =>
+  e2eBuildFailed({ flag: 'playwright', errorMessage: 'Error Message' });

node-src/ui/messages/errors/e2eBuildFailed.ts

@@ -0,0 +1,17 @@
+import chalk from 'chalk';
+import { dedent } from 'ts-dedent';
+import { error } from '../../components/icons';
+
+export default ({
+  flag,
+  errorMessage,
+}: {
+  flag: string;
+  errorMessage: string;
+}) => {
+  return dedent(chalk`
+      ${error} Failed to run \`chromatic --${flag}\`:
+
+      ${errorMessage}
+    `);
+};