CODEWITHSUNDEEP
reactjshighcharts
every
every

Reputation: 1

Highchart error make the whole page breakdown

The series data type error in the config returned by the back end appears as highcharts error #14.

If a similar highcharts error code occurs, the whole page will be blank.

How to monitor errors in Highcharts React and display error messages in div instead of causing the whole page to crash

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>
    );
}

but not the whole page to crash

Upvotes: 0

Views: 249

Answers (1)

Domino987
Domino987

Reputation: 8774

any error in your javascript code will result in the a blank page for production and a stack trace in development.

If you know, that a certain component will likely throw an error or if you just want to guard yourself against possible errors, you should use error boundaries.

You simply wrap your whole application or just certain components in an error boundary (multiple boundaries per app are possible). If an error occurs, the error will be passed up the component tree, until a boundary is reached. By reacting to the error with a saving to the state and a conditionally fallback error page, you can display a fallback page for your whole application or just the child component to handle the errors.

For your project, I would recommend to use at least 2 boundaries: 1 for any errors within your application around your main components. The other should directly wrap the HighChartComponent to just display a fallback for that chart for example: Something failed with that Chart. Please reload.

By doing that, errors will not break your whole application but only a part, which can be handled.

Upvotes: 2

Related Questions