From dce3f120e89a30839c9b89c10f6d5ef821666dd4 Mon Sep 17 00:00:00 2001 From: Thibaud Av Date: Fri, 3 Sep 2021 16:11:16 +0200 Subject: [PATCH] fix(angular): add error handler for build standalone --- .../builders/build-storybook/index.spec.ts | 38 ++++++++++++++++--- .../src/builders/build-storybook/index.ts | 9 +++-- .../builders/start-storybook/index.spec.ts | 38 ++++++++++++++++--- .../src/builders/start-storybook/index.ts | 3 +- .../utils/build-standalone-errors-handler.ts | 31 +++++++++++++++ 5 files changed, 103 insertions(+), 16 deletions(-) create mode 100644 app/angular/src/builders/utils/build-standalone-errors-handler.ts diff --git a/app/angular/src/builders/build-storybook/index.spec.ts b/app/angular/src/builders/build-storybook/index.spec.ts index af9681b7b8e..4b0f37602c5 100644 --- a/app/angular/src/builders/build-storybook/index.spec.ts +++ b/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(); }); @@ -82,6 +87,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', diff --git a/app/angular/src/builders/build-storybook/index.ts b/app/angular/src/builders/build-storybook/index.ts index 3be09098e45..57899c0e373 100644 --- a/app/angular/src/builders/build-storybook/index.ts +++ b/app/angular/src/builders/build-storybook/index.ts @@ -5,14 +5,15 @@ import { targetFromTargetString, } 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 } from 'rxjs/operators'; +import { catchError, map, 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; @@ -66,5 +67,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))) + ); } diff --git a/app/angular/src/builders/start-storybook/index.spec.ts b/app/angular/src/builders/start-storybook/index.spec.ts index 9ae5cf74ea3..bd5a9d3b930 100644 --- a/app/angular/src/builders/start-storybook/index.spec.ts +++ b/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(); }); @@ -88,6 +93,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', diff --git a/app/angular/src/builders/start-storybook/index.ts b/app/angular/src/builders/start-storybook/index.ts index 6d1d90a208c..b2a06f2243c 100644 --- a/app/angular/src/builders/start-storybook/index.ts +++ b/app/angular/src/builders/start-storybook/index.ts @@ -13,6 +13,7 @@ import { map, switchMap } 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; @@ -81,7 +82,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)) ); }); } diff --git a/app/angular/src/builders/utils/build-standalone-errors-handler.ts b/app/angular/src/builders/utils/build-standalone-errors-handler.ts new file mode 100644 index 00000000000..d912c016312 --- /dev/null +++ b/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. + `; +};