Remove nopreview UI and show redbox for any error.

Some errors don't have a meaningful stack trace -- for those we include some debugging instructions in the error message

lib/preview-web/src/PreviewWeb.tsx

@@ -255,11 +255,23 @@ export class PreviewWeb<TFramework extends AnyFramework> {
 
     if (!storyId) {
       if (storySpecifier === '*') {
-        this.renderMissingStory();
+        this.renderStoryLoadingException(
+          storySpecifier,
+          new Error(dedent`
+            Couldn't find any stories in your Storybook.
+            - Please check your stories field of your main.js config.
+            - Also check the browser console and terminal for error messages.
+          `)
+        );
       } else {
         this.renderStoryLoadingException(
           storySpecifier,
-          new Error(`Couldn't find story matching ${storySpecifier}.`)
+          new Error(dedent`
+            Couldn't find story matching '${storySpecifier}'.
+            - Are you sure a story with that id exists?
+            - Please check your stories field of your main.js config.
+            - Also check the browser console and terminal for error messages.
+          `)
         );
       }
 

lib/preview-web/src/WebView.ts

@@ -79,8 +79,16 @@ export class WebView {
   }
 
   showErrorDisplay({ message = '', stack = '' }) {
-    document.getElementById('error-message').innerHTML = ansiConverter.toHtml(message);
-    document.getElementById('error-stack').innerHTML = ansiConverter.toHtml(stack);
+    let header = message;
+    let detail = stack;
+    const parts = message.split('\n');
+    if (parts.length > 1) {
+      [header] = parts;
+      detail = parts.slice(1).join('\n');
+    }
+
+    document.getElementById('error-message').innerHTML = ansiConverter.toHtml(header);
+    document.getElementById('error-stack').innerHTML = ansiConverter.toHtml(detail);
 
     document.body.classList.remove(classes.MAIN);
     document.body.classList.remove(classes.NOPREVIEW);

lib/store/src/StoryIndexStore.ts

@@ -1,3 +1,4 @@
+import dedent from 'ts-dedent';
 import { Channel } from '@storybook/addons';
 import { StoryId } from '@storybook/csf';
 
@@ -40,7 +41,11 @@ export class StoryIndexStore {
   storyIdToEntry(storyId: StoryId): StoryIndexEntry {
     const storyEntry = this.stories[storyId];
     if (!storyEntry) {
-      throw new Error(`Didn't find '${storyId}' in story index (\`stories.json\`)`);
+      throw new Error(dedent`Couldn't find story matching '${storyId}' after HMR.
+      - Did you remove it from your CSF file?
+      - Are you sure a story with that id exists?
+      - Please check your stories field of your main.js config.
+      - Also check the browser console and terminal for error messages.`);
     }
 
     return storyEntry;