Merge pull request #15978 from storybookjs/angular/fix-builder-error-handler

Angular: Fix error handling for angular builder standalone builds

app/angular/src/builders/build-storybook/index.spec.ts

@@ -3,15 +3,11 @@ import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 import { schema } from '@angular-devkit/core';
 import * as path from 'path';
 
-const buildStandaloneMock = jest.fn().mockImplementation((_options: unknown) => Promise.resolve());
+const buildStandaloneMock = jest.fn();
 jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock);
 
 const cpSpawnMock = {
-  spawn: jest.fn().mockImplementation(() => ({
-    stdout: { on: () => {} },
-    stderr: { on: () => {} },
-    on: (_event: string, cb: any) => cb(0),
-  })),
+  spawn: jest.fn(),
 };
 jest.doMock('child_process', () => cpSpawnMock);
 describe('Build Storybook Builder', () => {
@@ -51,6 +47,15 @@ describe('Build Storybook Builder', () => {
     await architectHost.addBuilderFromPackage(path.join(__dirname, '../../..'));
   });
 
+  beforeEach(() => {
+    buildStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve());
+    cpSpawnMock.spawn.mockImplementation(() => ({
+      stdout: { on: () => {} },
+      stderr: { on: () => {} },
+      on: (_event: string, cb: any) => cb(0),
+    }));
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -109,6 +114,27 @@ describe('Build Storybook Builder', () => {
     });
   });
 
+  it('should throw error', async () => {
+    buildStandaloneMock.mockRejectedValue(new Error());
+
+    const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
+      browserTarget: 'angular-cli:build-2',
+      port: 4400,
+      compodoc: false,
+    });
+
+    try {
+      await run.result;
+
+      expect(false).toEqual('Throw expected');
+    } catch (error) {
+      // eslint-disable-next-line jest/no-try-expect, jest/no-conditional-expect
+      expect(error).toEqual(
+        'Broken build, fix the error above.\nYou may need to refresh the browser.'
+      );
+    }
+  });
+
   it('should run compodoc', async () => {
     const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
       browserTarget: 'angular-cli:build-2',

app/angular/src/builders/build-storybook/index.ts

@@ -6,14 +6,15 @@ import {
   Target,
 } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
-import { from, Observable, of } from 'rxjs';
+import { from, Observable, of, throwError } from 'rxjs';
 import { CLIOptions } from '@storybook/core-common';
-import { map, switchMap, mapTo } from 'rxjs/operators';
+import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone';
 import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
 import { runCompodoc } from '../utils/run-compodoc';
+import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
 
 export type StorybookBuilderOptions = JsonObject & {
   browserTarget?: string | null;
@@ -78,5 +79,7 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext)
 }
 
 function runInstance(options: StandaloneOptions) {
-  return from(buildStandalone(options));
+  return from(buildStandalone(options)).pipe(
+    catchError((error: any) => throwError(buildStandaloneErrorHandler(error)))
+  );
 }

app/angular/src/builders/start-storybook/index.spec.ts

@@ -3,15 +3,11 @@ import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 import { schema } from '@angular-devkit/core';
 import * as path from 'path';
 
-const buildStandaloneMock = jest.fn().mockImplementation((_options: unknown) => Promise.resolve());
+const buildStandaloneMock = jest.fn();
 jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock);
 
 const cpSpawnMock = {
-  spawn: jest.fn().mockImplementation(() => ({
-    stdout: { on: () => {} },
-    stderr: { on: () => {} },
-    on: (_event: string, cb: any) => cb(0),
-  })),
+  spawn: jest.fn(),
 };
 jest.doMock('child_process', () => cpSpawnMock);
 
@@ -51,6 +47,15 @@ describe('Start Storybook Builder', () => {
     await architectHost.addBuilderFromPackage(path.join(__dirname, '../../..'));
   });
 
+  beforeEach(() => {
+    buildStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve());
+    cpSpawnMock.spawn.mockImplementation(() => ({
+      stdout: { on: () => {} },
+      stderr: { on: () => {} },
+      on: (_event: string, cb: any) => cb(0),
+    }));
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -121,6 +126,27 @@ describe('Start Storybook Builder', () => {
     });
   });
 
+  it('should throw error', async () => {
+    buildStandaloneMock.mockRejectedValue(new Error());
+
+    const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
+      browserTarget: 'angular-cli:build-2',
+      port: 4400,
+      compodoc: false,
+    });
+
+    try {
+      await run.result;
+
+      expect(false).toEqual('Throw expected');
+    } catch (error) {
+      // eslint-disable-next-line jest/no-try-expect, jest/no-conditional-expect
+      expect(error).toEqual(
+        'Broken build, fix the error above.\nYou may need to refresh the browser.'
+      );
+    }
+  });
+
   it('should run compodoc', async () => {
     const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
       browserTarget: 'angular-cli:build-2',

app/angular/src/builders/start-storybook/index.ts

@@ -14,6 +14,7 @@ import { map, switchMap, mapTo } from 'rxjs/operators';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone';
 import { runCompodoc } from '../utils/run-compodoc';
+import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
 
 export type StorybookBuilderOptions = JsonObject & {
   browserTarget?: string | null;
@@ -93,7 +94,7 @@ function runInstance(options: StandaloneOptions) {
     // This Observable intentionally never complete, leaving the process running ;)
     buildStandalone(options).then(
       () => observer.next(),
-      (error) => observer.error(error)
+      (error) => observer.error(buildStandaloneErrorHandler(error))
     );
   });
 }

app/angular/src/builders/utils/build-standalone-errors-handler.ts

@@ -0,0 +1,31 @@
+import { logger, instance as npmLog } from '@storybook/node-logger';
+import dedent from 'ts-dedent';
+
+export const buildStandaloneErrorHandler = (error: any): any => {
+  // Duplicate code for Standalone error handling
+  // Source: https://github.com/storybookjs/storybook/blob/39c7ba09ad84fbd466f9c25d5b92791a5450b9f6/lib/core-server/src/build-dev.ts#L136
+  npmLog.heading = '';
+
+  if (error instanceof Error) {
+    if ((error as any).error) {
+      logger.error((error as any).error);
+    } else if ((error as any).stats && (error as any).stats.compilation.errors) {
+      (error as any).stats.compilation.errors.forEach((e: any) => logger.plain(e));
+    } else {
+      logger.error(error as any);
+    }
+  } else if (error.compilation?.errors) {
+    error.compilation.errors.forEach((e: any) => logger.plain(e));
+  }
+
+  logger.line();
+  return error.close
+    ? dedent`
+    FATAL broken build!, will close the process,
+    Fix the error below and restart storybook.
+  `
+    : dedent`
+    Broken build, fix the error above.
+    You may need to refresh the browser.
+  `;
+};