时间戳

首页 > 解决方案 > Highchart错误使整个页面崩溃

reactjs - Highchart错误使整个页面崩溃

问题描述

后端返回的配置中的系列数据类型错误显示为highcharts错误#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>
    );
}

但不是整个页面崩溃

标签： reactjshighcharts

解决方案

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

如果您知道某个组件可能会抛出错误，或者您只是想保护自己免受可能的错误，您应该使用错误边界。

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

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

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

推荐阅读