Unable to use CustomErrorBoundary component due to Storybook's internal ErrorBoundary

[andreadeluisi-ryte]

I'm trying to create a CustomErrorBoundary component in my Storybook project, but I'm having trouble using it because the internal ErrorBoundary that Storybook provides as a wrapper for is being rendered instead of my custom component.

I've tried creating a <CustomErrorBoundary> component, forcing an error at runtime for children, and wrapping my story components with it, but it doesn't seem to have any effect. It appears that Storybook's internal ErrorBoundary is still being used instead.

Is there any way to disable the internal ErrorBoundary that Storybook provides as a wrapper for <Docs/>?

Thank you for your help!

[lucksp]

Watching...we want to show our "break things" UI based on error triggered.

I have tried:

import { Meta } from '@storybook/react-native';
import { Text } from 'components/Text';
import React, { useState } from 'react';
import { FakeError } from '.';
import ErrorBoundary from './ErrorBoundary';

const FakeErr: Meta<typeof FakeError> = {
    // Using CSF3 convention of the `title` field for Grouping components:
    // https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#grouping
    title: 'Design System/Features/Errors',
    // component: FakeError,
    render: () => {
        return (
            <ErrorBoundary>
                 <Button
                    onPress={() => {
                        throw new Error('Woops, broken!');
                    }}
                >
                    Break the App
                </Button>
            </ErrorBoundary>
        );
    },
};

export default FakeErr;

export const BreakIt: typeof FakeErr = {};

with Custom Error Boundary Class:

import ErrorView from 'components/ErrorView';
import React, { Component, ErrorInfo, ReactElement, ReactNode } from 'react';

interface Props {
    children?: ReactNode;
}

interface State {
    hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
    public state: State = {
        hasError: false,
    };

    public static getDerivedStateFromError(_: Error): State {
        console.log(arguments);

        // Update state so the next render will show the fallback UI.
        return { hasError: true };
    }

    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
        console.error('Uncaught error:', error, errorInfo);
    }

    public render() {
        console.log('hasError: ', this.state.hasError);

        if (this.state.hasError) {
            return <ErrorView />;
        }

        return this.props.children;
    }
}

export default ErrorBoundary;

the getDerivedStateFromError never toggles to true, but my render function is called because I can see the test button and upon press, the error is caught in dev, but the fallback or hasError if block is not triggered.

[Audiopolis]

I wouldn't expect an error thrown in an event handler to trigger the error boundary (has to happen in render), but I'm seeing this while throwing directly in the render method of a functional component wrapped by the error boundary.

[newsiberian]

I've managed to handle that in the following way:

import { useError } from 'react-use';
// ... some imports

const meta: Meta<typeof ComponentErrorBoundary> = {
    component: ComponentErrorBoundary,
    tags: ['autodocs'],
};

export default meta;

type Story = StoryObject<typeof ComponentErrorBoundary>;

const BadComponent = () => {
    const dispatchError = useError();

    return (
        <Button
            onClick={() => {
                dispatchError(new Error('Error happens'));
            }}
        >
            Generate Exception
        </Button>
    );
};

export const Default: Story = {
    render: (args) => {
        return (
            <ComponentErrorBoundary {...args}>
                <BadComponent />
            </ComponentErrorBoundary>
        );
    },
    args: {
        onContactSupport: () => {},
    },
};

[philwolstenholme]

I'm also having this issue