Make sure story play function fails if there are any unhandled error

code/addons/interactions/src/Panel.tsx

@@ -4,10 +4,10 @@ import React, { Fragment, memo, useEffect, useMemo, useRef, useState } from 'rea
 import { useAddonState, useChannel, useParameter } from '@storybook/manager-api';
 import {
   FORCE_REMOUNT,
-  IGNORED_EXCEPTION,
   STORY_RENDER_PHASE_CHANGED,
   STORY_THREW_EXCEPTION,
   PLAY_FUNCTION_THREW_EXCEPTION,
+  UNHANDLED_ERRORS_DURING_PLAYING,
 } from '@storybook/core-events';
 import { EVENTS, type Call, CallStates, type LogItem } from '@storybook/instrumenter';
 
@@ -91,6 +91,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
     hasException: false,
     caughtException: undefined,
     interactionsCount: 0,
+    unhandledErrors: undefined,
   });
 
   // local state
@@ -104,6 +105,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
     interactions = [],
     isPlaying = false,
     caughtException = undefined,
+    unhandledErrors = undefined,
   } = addonState;
 
   // Log and calls are tracked in a ref so we don't needlessly rerender.
@@ -157,6 +159,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
             hasException: false,
             caughtException: undefined,
             interactionsCount: 0,
+            unhandledErrors: undefined,
           });
           return;
         }
@@ -180,11 +183,10 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
         set((s) => ({ ...s, isErrored: true }));
       },
       [PLAY_FUNCTION_THREW_EXCEPTION]: (e) => {
-        if (e?.message !== IGNORED_EXCEPTION.message) {
-          set((s) => ({ ...s, caughtException: e }));
-        } else {
-          set((s) => ({ ...s, caughtException: undefined }));
-        }
+        set((s) => ({ ...s, caughtException: e }));
+      },
+      [UNHANDLED_ERRORS_DURING_PLAYING]: (e) => {
+        set((s) => ({ ...s, unhandledErrors: e }));
       },
     },
     [collapsed]
@@ -224,7 +226,10 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
   const [fileName] = storyFilePath.toString().split('/').slice(-1);
   const scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'end' });
 
-  const hasException = !!caughtException || interactions.some((v) => v.status === CallStates.ERROR);
+  const hasException =
+    !!caughtException ||
+    !!unhandledErrors ||
+    interactions.some((v) => v.status === CallStates.ERROR);
 
   if (isErrored) {
     return <Fragment key="interactions" />;
@@ -240,6 +245,7 @@ export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId
         fileName={fileName}
         hasException={hasException}
         caughtException={caughtException}
+        unhandledErrors={unhandledErrors}
         isPlaying={isPlaying}
         pausedAt={pausedAt}
         endRef={endRef}

code/addons/interactions/src/components/Interaction.tsx

@@ -10,6 +10,7 @@ import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
 import type { Controls } from './InteractionsPanel';
+import { isJestError } from '../utils';
 
 const MethodCallWrapper = styled.div(() => ({
   fontFamily: typography.fonts.mono,
@@ -112,16 +113,15 @@ const RowMessage = styled('div')(({ theme }) => ({
   },
 }));
 
-const Exception = ({ exception }: { exception: Call['exception'] }) => {
-  if (exception.message.startsWith('expect(')) {
+export const Exception = ({ exception }: { exception: Call['exception'] }) => {
+  if (isJestError(exception)) {
     return <MatcherResult {...exception} />;
   }
   const paragraphs = exception.message.split('\n\n');
   const more = paragraphs.length > 1;
   return (
     <RowMessage>
       <pre>{paragraphs[0]}</pre>
-
       {exception.showDiff && exception.diff ? (
         <>
           <br />

code/addons/interactions/src/components/InteractionsPanel.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import * as React from 'react';
 import { Link, Placeholder } from '@storybook/components';
 import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
@@ -7,6 +8,7 @@ import { transparentize } from 'polished';
 import { Subnav } from './Subnav';
 
 import { Interaction } from './Interaction';
+import { isTestAssertionError } from '../utils';
 
 export interface Controls {
   start: (args: any) => void;
@@ -30,23 +32,23 @@ interface InteractionsPanelProps {
   fileName?: string;
   hasException?: boolean;
   caughtException?: Error;
+  unhandledErrors?: SerializedError[];
   isPlaying?: boolean;
   pausedAt?: Call['id'];
   calls: Map<string, any>;
   endRef?: React.Ref<HTMLDivElement>;
   onScrollToEnd?: () => void;
 }
 
-const Container = styled.div<{ withException: boolean }>(({ theme, withException }) => ({
+const Container = styled.div(({ theme }) => ({
   minHeight: '100%',
   background: theme.background.content,
-  ...(withException && {
-    backgroundColor:
-      theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
-  }),
 }));
 
 const CaughtException = styled.div(({ theme }) => ({
+  borderBottom: `1px solid ${theme.appBorderColor}`,
+  backgroundColor:
+    theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
   padding: 15,
   fontSize: theme.typography.size.s2 - 1,
   lineHeight: '19px',
@@ -69,9 +71,13 @@ const CaughtExceptionDescription = styled.p({
   margin: 0,
   padding: '0 0 20px',
 });
+
 const CaughtExceptionStack = styled.pre(({ theme }) => ({
   margin: 0,
   padding: 0,
+  '&:not(:last-child)': {
+    paddingBottom: 16,
+  },
   fontSize: theme.typography.size.s1 - 1,
 }));
 
@@ -84,13 +90,14 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
     fileName,
     hasException,
     caughtException,
+    unhandledErrors,
     isPlaying,
     pausedAt,
     onScrollToEnd,
     endRef,
   }) {
     return (
-      <Container withException={!!caughtException}>
+      <Container>
         {(interactions.length > 0 || hasException) && (
           <Subnav
             controls={controls}
@@ -119,20 +126,34 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
             />
           ))}
         </div>
-        {caughtException && !caughtException.message?.startsWith('ignoredException') && (
+        {caughtException && !isTestAssertionError(caughtException) && (
           <CaughtException>
             <CaughtExceptionTitle>
               Caught exception in <CaughtExceptionCode>play</CaughtExceptionCode> function
             </CaughtExceptionTitle>
-            <CaughtExceptionDescription>
-              This story threw an error after it finished rendering which means your interactions
-              couldn&apos; t be run.Go to this story&apos; s play function in {fileName} to fix.
-            </CaughtExceptionDescription>
             <CaughtExceptionStack data-chromatic="ignore">
-              {caughtException.stack || `${caughtException.name}: ${caughtException.message}`}
+              {printSerializedError(caughtException)}
             </CaughtExceptionStack>
           </CaughtException>
         )}
+        {unhandledErrors && (
+          <CaughtException>
+            <CaughtExceptionTitle>Unhandled Errors</CaughtExceptionTitle>
+            <CaughtExceptionDescription>
+              Found {unhandledErrors.length} unhandled error{unhandledErrors.length > 1 ? 's' : ''}{' '}
+              while running the play function. This might cause false positive assertions. Resolve
+              unhandled errors or ignore unhandled errors with setting the
+              <CaughtExceptionCode>test.dangerouslyIgnoreUnhandledErrors</CaughtExceptionCode>{' '}
+              parameter to <CaughtExceptionCode>true</CaughtExceptionCode>.
+            </CaughtExceptionDescription>
+
+            {unhandledErrors.map((error, i) => (
+              <CaughtExceptionStack key={i} data-chromatic="ignore">
+                {printSerializedError(error)}
+              </CaughtExceptionStack>
+            ))}
+          </CaughtException>
+        )}
         <div ref={endRef} />
         {!isPlaying && !caughtException && interactions.length === 0 && (
           <Placeholder>
@@ -150,3 +171,13 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
     );
   }
 );
+
+interface SerializedError {
+  name: string;
+  stack?: string;
+  message: string;
+}
+
+function printSerializedError(error: SerializedError) {
+  return error.stack || `${error.name}: ${error.message}`;
+}

code/addons/interactions/src/utils.ts

@@ -0,0 +1,23 @@
+export function isTestAssertionError(error: unknown) {
+  return isChaiError(error) || isJestError(error);
+}
+
+export function isChaiError(error: unknown) {
+  return (
+    error &&
+    typeof error === 'object' &&
+    'name' in error &&
+    typeof error.name === 'string' &&
+    error.name === 'AssertionError'
+  );
+}
+
+export function isJestError(error: unknown) {
+  return (
+    error &&
+    typeof error === 'object' &&
+    'message' in error &&
+    typeof error.message === 'string' &&
+    error.message.startsWith('expect(')
+  );
+}

code/lib/core-events/src/index.ts

@@ -38,6 +38,8 @@ enum events {
   STORY_RENDER_PHASE_CHANGED = 'storyRenderPhaseChanged',
   // Emitted when the play function throws
   PLAY_FUNCTION_THREW_EXCEPTION = 'playFunctionThrewException',
+  // Emitted when there were unhandled errors during playing the story
+  UNHANDLED_ERRORS_DURING_PLAYING = 'unhandledErrorsDuringPlaying',
   // Tell the story store to update (a subset of) a stories arg values
   UPDATE_STORY_ARGS = 'updateStoryArgs',
   // The values of a stories args just changed
@@ -88,6 +90,7 @@ export const {
   GLOBALS_UPDATED,
   NAVIGATE_URL,
   PLAY_FUNCTION_THREW_EXCEPTION,
+  UNHANDLED_ERRORS_DURING_PLAYING,
   PRELOAD_ENTRIES,
   PREVIEW_BUILDER_PROGRESS,
   PREVIEW_KEYDOWN,
@@ -124,10 +127,6 @@ export const {
   TELEMETRY_ERROR,
 } = events;
 
-// Used to break out of the current render without showing a redbox
-// eslint-disable-next-line local-rules/no-uncategorized-errors
-export const IGNORED_EXCEPTION = new Error('ignoredException');
-
 export interface WhatsNewCache {
   lastDismissedPost?: string;
   lastReadPost?: string;

code/lib/instrumenter/src/instrumenter.ts

@@ -2,11 +2,10 @@
 import type { Channel } from '@storybook/channels';
 import { addons } from '@storybook/preview-api';
 import type { StoryId } from '@storybook/types';
-import { once, logger } from '@storybook/client-logger';
+import { once } from '@storybook/client-logger';
 import './typings.d.ts';
 import {
   FORCE_REMOUNT,
-  IGNORED_EXCEPTION,
   SET_CURRENT_STORY,
   STORY_RENDER_PHASE_CHANGED,
 } from '@storybook/core-events';
@@ -403,10 +402,6 @@ export class Instrumenter {
   }
 
   invoke(fn: Function, object: Record<string, unknown>, call: Call, options: Options) {
-    // TODO this doesnt work because the abortSignal we have here is the newly created one
-    // const { abortSignal } = global.window.__STORYBOOK_PREVIEW__ || {};
-    // if (abortSignal && abortSignal.aborted) throw IGNORED_EXCEPTION;
-
     const { callRefsByResult, renderPhase } = this.getState(call.storyId);
 
     // Map complex values to a JSON-serializable representation.
@@ -475,7 +470,7 @@ export class Instrumenter {
           diff = undefined,
           actual = undefined,
           expected = undefined,
-        } = processError(e);
+        } = e.name === 'AssertionError' ? processError(e) : e;
 
         const exception = { name, message, stack, callId, showDiff, diff, actual, expected };
         this.update({ ...info, status: CallStates.ERROR, exception });
@@ -495,13 +490,6 @@ export class Instrumenter {
           }
           throw e;
         }
-
-        // We need to throw to break out of the play function, but we don't want to trigger a redbox
-        // so we throw an ignoredException, which is caught and silently ignored by Storybook.
-        if (e !== alreadyCompletedException) {
-          logger.warn(e);
-          throw IGNORED_EXCEPTION;
-        }
       }
       throw e;
     };

code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import type {
   Renderer,
   RenderContext,
@@ -12,11 +13,11 @@ import type {
   ViewMode,
 } from '@storybook/types';
 import type { Channel } from '@storybook/channels';
-import { logger } from '@storybook/client-logger';
 import {
   STORY_RENDER_PHASE_CHANGED,
   STORY_RENDERED,
   PLAY_FUNCTION_THREW_EXCEPTION,
+  UNHANDLED_ERRORS_DURING_PLAYING,
 } from '@storybook/core-events';
 import type { StoryStore } from '../../store';
 import type { Render, RenderType } from './Render';
@@ -218,22 +219,43 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       this.notYetRendered = false;
       if (abortSignal.aborted) return;
 
+      const ignoreUnhandledErrors =
+        this.story.parameters?.test?.dangerouslyIgnoreUnhandledErrors === true;
+
+      const unhandledErrors: Set<unknown> = new Set();
+      const onError = (event: ErrorEvent | PromiseRejectionEvent) =>
+        unhandledErrors.add('error' in event ? event.error : event.reason);
+
       // The phase should be 'rendering' but it might be set to 'aborted' by another render cycle
       if (this.renderOptions.autoplay && forceRemount && playFunction && this.phase !== 'errored') {
+        window.addEventListener('error', onError);
+        window.addEventListener('unhandledrejection', onError);
         this.disableKeyListeners = true;
         try {
           await this.runPhase(abortSignal, 'playing', async () => {
             await playFunction(renderContext.storyContext);
           });
-          await this.runPhase(abortSignal, 'played');
+          if (!ignoreUnhandledErrors && unhandledErrors.size > 0) {
+            await this.runPhase(abortSignal, 'errored');
+          } else {
+            await this.runPhase(abortSignal, 'played');
+          }
         } catch (error) {
-          logger.error(error);
           await this.runPhase(abortSignal, 'errored', async () => {
             this.channel.emit(PLAY_FUNCTION_THREW_EXCEPTION, serializeError(error));
           });
           if (this.story.parameters.throwPlayFunctionExceptions !== false) throw error;
+          console.error(error);
+        }
+        if (!ignoreUnhandledErrors && unhandledErrors.size > 0) {
+          this.channel.emit(
+            UNHANDLED_ERRORS_DURING_PLAYING,
+            Array.from(unhandledErrors).map(serializeError)
+          );
         }
         this.disableKeyListeners = false;
+        window.removeEventListener('unhandledrejection', onError);
+        window.removeEventListener('error', onError);
         if (abortSignal.aborted) return;
       }
 

code/ui/manager/src/globals/exports.ts

@@ -139,7 +139,6 @@ export default {
     'FORCE_REMOUNT',
     'FORCE_RE_RENDER',
     'GLOBALS_UPDATED',
-    'IGNORED_EXCEPTION',
     'NAVIGATE_URL',
     'PLAY_FUNCTION_THREW_EXCEPTION',
     'PRELOAD_ENTRIES',
@@ -173,6 +172,7 @@ export default {
     'STORY_UNCHANGED',
     'TELEMETRY_ERROR',
     'TOGGLE_WHATS_NEW_NOTIFICATIONS',
+    'UNHANDLED_ERRORS_DURING_PLAYING',
     'UPDATE_GLOBALS',
     'UPDATE_QUERY_PARAMS',
     'UPDATE_STORY_ARGS',