高图表错误使整个页面崩溃

Question

后端返回的配置中的序列数据类型错误显示为 highcharts 错误 #14。

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

如何在 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代码中的任何错误都将导致生产中的空白页和开发中的堆栈跟踪。

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

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

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

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