Emit event on config error

lib/core-events/src/index.ts

@@ -1,5 +1,7 @@
 enum events {
   CHANNEL_CREATED = 'channelCreated',
+  // There was an error executing the config, likely an bug in the user's preview.js
+  CONFIG_ERROR = 'configError',
   // When the preview boots, the first story is chosen via a selection specifier
   STORY_SPECIFIED = 'storySpecified',
   // Emitted by the preview whenever the list of stories changes (in batches)
@@ -51,6 +53,7 @@ export default events;
 // This is the preferred method
 export const {
   CHANNEL_CREATED,
+  CONFIG_ERROR,
   STORY_SPECIFIED,
   SET_STORIES,
   SET_CURRENT_STORY,

lib/web-preview/src/WebPreview.integration.test.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import global from 'global';
 import { RenderContext } from '@storybook/store';
-import { addons } from '@storybook/addons';
 
 import { WebPreview } from './WebPreview';
 import {
@@ -19,7 +18,7 @@ import {
 //   - ie. from`renderToDOM()` (stories) or`ReactDOM.render()` (docs) in.
 // This file lets them rip.
 
-addons.setChannel(mockChannel as any);
+jest.mock('@storybook/channel-postmessage', () => () => mockChannel);
 
 jest.mock('./WebView');
 const mockStoriesList = storiesList;

lib/web-preview/src/WebPreview.test.ts

@@ -3,7 +3,6 @@ import Events from '@storybook/core-events';
 import fetch from 'unfetch';
 import * as ReactDOM from 'react-dom';
 import { logger } from '@storybook/client-logger';
-import { addons } from '@storybook/addons';
 import merge from 'lodash/merge';
 
 import { WebPreview } from './WebPreview';
@@ -21,8 +20,6 @@ import {
   waitForQuiescence,
 } from './WebPreview.mockdata';
 
-addons.setChannel(mockChannel as any);
-
 jest.mock('./WebView');
 const mockStoriesList = storiesList;
 jest.mock('unfetch', () =>
@@ -46,6 +43,8 @@ jest.mock('global', () => ({
 jest.mock('@storybook/client-logger');
 jest.mock('react-dom');
 
+jest.mock('@storybook/channel-postmessage', () => () => mockChannel);
+
 const createGate = () => {
   let openGate = (_?: any) => {};
   const gate = new Promise<any | undefined>((resolve) => {
@@ -73,14 +72,16 @@ beforeEach(() => {
 describe('WebPreview', () => {
   describe('constructor', () => {
     it('shows an error if getGlobalAnnotations throws', async () => {
+      const err = new Error('meta error');
       const preview = new WebPreview({
         getGlobalAnnotations: () => {
-          throw new Error('meta error');
+          throw err;
         },
         importFn,
       });
 
       expect(preview.view.showErrorDisplay).toHaveBeenCalled();
+      expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, err);
     });
   });
 
@@ -1576,7 +1577,7 @@ describe('WebPreview', () => {
         expect(mockChannel.emit).not.toHaveBeenCalledWith(Events.STORY_CHANGED, 'component-one--a');
       });
 
-      it('emits STORY_PREPARED', async () => {
+      it('emits STORY_PREPARED with new annotations', async () => {
         document.location.search = '?id=component-one--a';
         const preview = new WebPreview({ getGlobalAnnotations, importFn });
         await preview.initialize();
@@ -1852,13 +1853,15 @@ describe('WebPreview', () => {
       await waitForRender();
 
       mockChannel.emit.mockClear();
+      const err = new Error('error getting meta');
       preview.onGetGlobalAnnotationsChanged({
         getGlobalAnnotations: () => {
-          throw new Error('error getting meta');
+          throw err;
         },
       });
 
       expect(preview.view.showErrorDisplay).toHaveBeenCalled();
+      expect(mockChannel.emit).toHaveBeenCalledWith(Events.CONFIG_ERROR, err);
     });
 
     const newGlobalDecorator = jest.fn((s) => s());

lib/web-preview/src/WebPreview.tsx

@@ -56,7 +56,8 @@ export class WebPreview<TFramework extends Framework> {
     getGlobalAnnotations: () => WebGlobalAnnotations<TFramework>;
     importFn: ModuleImportFn;
   }) {
-    this.channel = addons.getChannel();
+    this.channel = createChannel({ page: 'preview' });
+    addons.setChannel(this.channel);
     this.view = new WebView();
 
     const globalAnnotations = this.getGlobalAnnotationsOrRenderError(getGlobalAnnotations);
@@ -494,7 +495,7 @@ export class WebPreview<TFramework extends Framework> {
 
   renderPreviewEntryError(err: Error) {
     this.view.showErrorDisplay(err);
-    // TODO -- should we emit here?
+    this.channel.emit(Events.CONFIG_ERROR, err);
   }
 
   renderMissingStory(storySpecifier?: StorySpecifier) {