Блог

Я пытаюсь добавить границы ошибок для простого приложения.Когда я нажимаю кнопку, на экране должно отображаться «Что-то пошло не так».Но в моем случае это отображается не так.Как я понимаю ErrorBoundary.js , не работает, так как я попытался записать его в консоль.Когда я запускаю это приложение на экране, оно показывает ошибку: неправильный щелчок

App.js

 
import './App.css';
import Button from './Components/Button';
import ErrorBoundary from './Components/ErrorBoundary';

function App() {
  return (
    <div className="App">
      
        <ErrorBoundary>
        <Button />
        </ErrorBoundary>
    </div>
  );
}

export default App;
  

Button.js

 import React, { Component } from 'react';

class Button extends Component {

    constructor(props) {
        super(props);
        this.state = { error: null };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log("Test Button")
        this.state = { error: true};
        throw new Error('Not a correct click');
    }


    render() {
        if (this.state.error) {
            return <h1>Caught an error!</h1>
        }
        return <button onClick={this.handleClick} style={{ color: 'white', background: 'blue', width: 200, height: 50 }}>Throw Error</button>
    }
}

export default Button;
  

ErrorBoundary.js

 import React, { Component } from 'react'

class ErrorBoundary extends Component {

    constructor (props){
        super(props);

        this.state = {
            hasError: false,
            error: null,
            info: null
        }
    }

    static getDerivedStateFromError(error){
        this.state.hasError = true
    }

    componentDidCatch (error,info){
        console.log(error);
        console.log(info)
    }

    render() {
        if(this.state.hasError){
            return <h2>Something went wrong</h2>
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

  

Все выглядит правильно, но в соответствии с документами:

Границы ошибок не перехватывают ошибки для:

• Обработчики событий (подробнее)
• Асинхронный код (например, обратные вызовы setTimeout или requestAnimationFrame)
• Рендеринг на стороне сервера
• Ошибки, возникающие в самой границе ошибки (а не в ее дочерних элементах)

По моему опыту, границы ошибок улавливают ошибки в render() и останавливают их распространение за пределы границы.

Цель, стоящая за границами ошибок, состоит в том, чтобы избежать наполовину нарушенного состояния рендеринга React.

Рекомендуется использовать try/catch для перехвата ошибок в обработчиках событий.

Переход throw к Button.render должен помочь ErrorBoundary перехватить ошибку в вашем примере:

 handleClick() {
    console.log("Test Button")
    this.state = { error: true};
    // throw new Error('Not a correct click');
}

render() {
    if (this.state.error) {
        throw new Error('Not a correct click')
        return <h1>Caught an error!</h1>
    }
    return <button onClick={this.handleClick} style={{ color: 'white', background: 'blue', width: 200, height: 50 }}>Throw Error</button>
}