React用错误边界来捕获和处理异常错误!

一、解决什么问题?

UI 中 JavaScript 错误不应该导致整个应用崩溃,错误边界就是解决方案(React 16 增加的功能)。


二、有哪些特性?
1、定义
  • 可捕获子组件 JavaScript 错误,打印错误并展示备用UI的clas组件。
2、无法捕获的错误:
  • 事件处理
  • 异步代码(例如 setTimeoutrequestAnimationFrame 回调函数)
  • 服务端渲染
  • 它自身抛出来的错误(并非它的子组件)
3、怎么写?

错误边界是包含下面任意一个或两个方法 的class组件:

  • static getDerivedStateFromError() :渲染备用 UI

  • componentDidCatch() :打印错误信息

//  错误边界  实例
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染能够显示降级后的 UI
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        // 你同样可以将错误日志上报给服务器
        logErrorToMyService(error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            // 你可以自定义降级后的 UI 并渲染
            return <h1>Something went wrong.</h1>;
        }

        return this.props.children;
    }
}
// 使用 错误边界
<ErrorBoundary>
    <MyWidget />
</ErrorBoundary>

4、js代码还是用try / catch 捕获错误
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        try {
            // 执行操作,如有错误则会抛出
        } catch (error) {
            this.setState({ error });
        }
    }

    render() {
        if (this.state.error) {
            return <h1>Caught an error.</h1>
        }
        return <button onClick={this.handleClick}>Click Me</button>
    }
}

三、实例展示

一个使用 错误边界 的示例,新建并复制下面代码到index.html文件,浏览器打开index.html即可看到效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <!-- 第一步:加载开发版本的React -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- 部署时,请用下面链接替代上面 -->
    <!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->

    <!-- 第二步:加载开发版本的babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class ErrorBoundary extends React.Component {
            constructor(props) {
                super(props);
                this.state = { error: null, errorInfo: null };
            }

            componentDidCatch(error, errorInfo) {
                // Catch errors in any components below and re-render with error message
                this.setState({
                    error: error,
                    errorInfo: errorInfo
                })
                // You can also log error messages to an error reporting service here
            }

            render() {
                if (this.state.errorInfo) {
                    // Error path
                    return (
                        <div>
                            <h2>Something went wrong.</h2>
                            <details style={{ whiteSpace: 'pre-wrap' }}>
                                {this.state.error && this.state.error.toString()}
                                <br />
                                {this.state.errorInfo.componentStack}
                            </details>
                        </div>
                    );
                }
                // Normally, just render children
                return this.props.children;
            }
        }

        class BuggyCounter extends React.Component {
            constructor(props) {
                super(props);
                this.state = { counter: 0 };
                this.handleClick = this.handleClick.bind(this);
            }

            handleClick() {
                this.setState(({ counter }) => ({
                    counter: counter + 1
                }));
            }

            render() {
                if (this.state.counter === 5) {
                    // Simulate a JS error
                    throw new Error('I crashed!');
                }
                return <h1 onClick={this.handleClick}>{this.state.counter}</h1>;
            }
        }

        function Err() {
            return (
                <div>
                    <p>
                        <b>
                            This is an example of error boundaries in React 16.
                            <br /><br />
                            Click on the numbers to increase the counters.
                            <br />
                            The counter is programmed to throw when it reaches 5. This simulates a JavaScript error in a component.
                        </b>
                    </p>
                    <hr />
                    <ErrorBoundary>
                        <p>These two counters are inside the same error boundary. If one crashes, the error boundary will replace both of them.</p>
                        <BuggyCounter />
                        <BuggyCounter />
                    </ErrorBoundary>
                    <hr />
                    <p>These two counters are each inside of their own error boundary. So if one crashes, the other is not affected.</p>
                    <ErrorBoundary><BuggyCounter /></ErrorBoundary>
                    <ErrorBoundary><BuggyCounter /></ErrorBoundary>
                </div>
            );
        }

        ReactDOM.render(
            <Err />,
            document.getElementById('root')
        );

    </script>
</body>
</html>

四、参考文档:
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容