Highchart错误使整个页面崩溃

Question

后端返回的config中的series数据类型错误显示为highcharts error #14。

如果出现类似的highcharts错误代码，则整个页面为空白。

如何监控Highcharts React中的错误并在div中显示错误消息而不是导致整个页面崩溃

constructor(props) {
    super(props);
    this.state = {
        config: {
            title: {
                text: 'test'
            },
            series: [{"type":"column",
                "data":[{"date":1546790400000,"y":'323'},
                {"date":1546790400000,"y":'756'},
                {"date":1546790400000,"y":'646'}]
            }]
        }
    };
}
render() {
    return (
        <div>
            <HighchartsReact highcharts={Highcharts}
                options={this.state.config} />;
        </div>
    );
}
I expect：
render() {
    return (
        <div>
        uncaught at _callee Error: Highcharts error #14
        </div>
    );
}

但不是整个页面崩溃

Answer 1

您的 javascript 代码中的任何错误都将导致用于生产的空白页面和开发中的堆栈跟踪。

如果您知道某个组件可能会引发错误，或者您只是想防止可能出现的错误，您应该使用error boundaries。

您只需将整个应用程序或仅将某些组件包装在错误边界中（每个应用程序可能有多个边界）。如果发生错误，错误将向上传递到组件树，直到达到边界。通过保存状态和有条件的回退错误页面来对错误做出反应，您可以为整个应用程序或仅显示子组件的回退页面来处理错误。

对于您的项目，我建议至少使用 2 个边界：1 用于您的应用程序中围绕主要组件的任何错误。另一个应该直接包装 HighChartComponent 以仅显示该图表的后备，例如：该图表失败。请重新加载。

这样做，错误不会破坏整个应用程序，而只会破坏一部分，可以处理。