Не могу вывести компонент при ErrorBoundary

Question

Не могу вывести компонент при работе с ErrorBoundary. Делаю это впервые и использую для этого библиотеку. Хотела сделать так, что бы при нажатии на красную кнопку в консоли появлялась ошибка (ЧТО И ПРОИСХОДИТ!), а так же появлялся компонент с 'Что-то пошло не так!' и ошибка.

Сама ошибка в консоле появляется, но компонент - нет. Что мне нужно сделать?

    <div id='root'></div>
    <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/react-error-boundary.js"></script>
    <script type='text/babel'>
        function ErrorButtonsDemo() {
            const ErrorBoundary = ReactErrorBoundary.ErrorBoundary;

            function ErrorFallback({error}) {
                return (
                    <div>
                        <p>Что-то пошло не так!</p>
                        <pre style={{ color: 'red' }}>{error.message}</pre>
                    </div>
                );
            }

            function Bomb() {
                throw new Error('Красная кнопка взорвала компонент!');
            }

            return (
                <div>
                    <h1>Проверьте поведение кнопок</h1>
                    <ErrorBoundary FallbackComponent={ErrorFallback}>
                        <button style={{backgroundColor: 'red', color: 'white', marginRight: 10}} onClick={Bomb}>Красная кнопка</button>
                        <button style={{backgroundColor: 'blue', color: 'white'}} onClick={() => alert('Синяя кнопка не взорвала компонент!')}>Синяя кнопка</button>
                    </ErrorBoundary>
                </div>
            );
        }

        const rootElement = document.getElementById('root');
        const root = ReactDOM.createRoot(rootElement);
        root.render(<ErrorButtonsDemo />);
    </script>
</body>

Answer 1

Я исправила код.
Надо было создать для этого надо было создать useState и клик на состояние кнопки, которые будет менять с false на true, что бы под кнопками отображался наш текст, а не что бы текст заменялся на кнопки.
А так же сделала для этого два варианта:

Как в проблеме. через библиотеку

<body>
    <div id='root'></div>
    <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/react-error-boundary.js"></script>
    <script type='text/babel'>
        function ErrorButtonsDemo() {
            const ErrorBoundary = ReactErrorBoundary.ErrorBoundary;
            const [explode, setExplode] = React.useState(false)

            function ErrorFallback({error}) {
                return (
                    <div>
                        <p>Что-то пошло не так!</p>
                        <pre style={{ color: 'red' }}>{error.message}</pre>
                    </div>
                );
            }

            function Bomb() {
                throw new Error('Красная кнопка взорвала компонент!');
            }

            return (
                <div>
                    <h1>Проверьте поведение кнопок</h1>
                    <button style={{backgroundColor: 'red', color: 'white', marginRight: 10}} onClick={() => setExplode(true)}>Красная кнопка</button>
                    <button style={{backgroundColor: 'blue', color: 'white'}} onClick={() => alert('Синяя кнопка не взорвала компонент!')}>Синяя кнопка</button>
                    <ErrorBoundary FallbackComponent={ErrorFallback}>
                        {explode ? <Bomb /> : null}
                    </ErrorBoundary>
                </div>
            );
        }

        const rootElement = document.getElementById('root');
        const root = ReactDOM.createRoot(rootElement);
        root.render(<ErrorButtonsDemo />);
    </script>
</body>

Через класс. Без библиотеки

<body>
    <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
    <div id='root'></div>
    <script type='text/babel'>
        class ErrorBoundary extends React.Component {
            state = { error: null }

            static getDerivedStateFromError(error) {
                return { error }
            }

            render() {
                const { error } = this.state
                if (error) {
                    return <this.props.FallbackComponent error={error} />
                }
                return this.props.children
            }
        }

        function Bomb() {
            throw new Error('Красная кнопка взорвала компонент!');
        }

        function ErrorFallback({ error }) {
            return (
                <div>
                    <p>Что-то пошло не так!</p>
                    <pre style={{ color: 'red' }}>{error.message}</pre>
                </div>
            )
        }

        function ErrorButtonsDemo() {
            const [explode, setExplode] = React.useState(false);

            return (
                <div>
                    <h1>Проверьте поведение кнопок</h1>
                    <button style={{ backgroundColor: 'red', color: 'white', marginRight: 10 }} onClick={() => setExplode(true)}>Красная кнопка</button>
                    <button style={{backgroundColor: 'blue', color: 'white'}} onClick={() => alert('Синяя кнопка не взорвала компонент!')}>Синяя кнопка</button>
                    <ErrorBoundary FallbackComponent={ErrorFallback}>
                        {explode ? <Bomb /> : 'жми на кнопку'}
                    </ErrorBoundary>
                </div>
            );
        }

        const rootElement = document.getElementById('root');
        const root = ReactDOM.createRoot(rootElement);
        root.render(<ErrorButtonsDemo />);
    </script>
</body>

Answer 2

Компонент ErrorBoundary внутри себя использует getDerivedStateFromError. Данный метод вызывается в случае, если ошибка произошла во время рендера компонента. Т.е. в процессе выполнения render-функции.

В коде в вопросе ошибка вызывается в обработчике клика, поэтому ошибка и не отлавливается.

БЛОГ НА HUSL

Не могу вывести компонент при ErrorBoundary

Ответы (2 шт):