Custom Error Handler

[OliverLeighC]

In the highchart library you can override the error handler by overwriting the Highcharts.error function (receives code, stop, and chart), but I haven't been able to get this to work with the react highchart wrapper.

Is there a way to capture the errors thrown by highcharts when using the react wrapper? Basically I want to be able to catch the error so I can display a better error message to the user rather than having the whole page crash with the full stack trace.

[ppotaczek]

Hi @OliverLeighC,

Thank you for contacting us!

You should be able to achieve the same behavior with our wrapper. The problem might be related directly with Highcharts. Which Highcharts version do you use? As yo can see in this issue: highcharts/highcharts#13549
a possibility to overwrite the error method has changed.

Working example with Highcharts 7 and highcharts-react wrapper: https://codesandbox.io/s/highcharts-react-demo-i1o6d6?file=/demo.jsx

You can also consider debugger mode: https://www.highcharts.com/docs/advanced-chart-features/debugger-mode

Best regards!

[OliverLeighC]

Thanks for responding! I am on version 10 of highcharts, I tried updating your codesandbox to the latest version and then using the error handling example from here highcharts/highcharts#13549 (comment) (uses the new displayError method) but it doesn't work.

https://codesandbox.io/s/highcharts-react-demo-forked-3nf51r?file=/demo.jsx

[ppotaczek]

Hi @OliverLeighC,

You need to use the new events structure:

Highcharts.addEvent(Highcharts, 'displayError', function (err) {
  console.log(err); 
}); 

Live demo: https://codesandbox.io/s/highcharts-react-demo-ich1ee?file=/demo.jsx

[OliverLeighC]

Sorry I don't think my codesandbox saved last time so I sent the wrong thing, this is what I meant to send

https://codesandbox.io/s/highcharts-react-demo-forked-udpibx?file=/demo.jsx

It still crashes, it doesn't actually catch the error

Highcharts.addEvent(Highcharts.Chart, "displayError", function (err) {
  // See https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
console.log("HC ERROR: ", err);
  // for error id's
  Highcharts.charts[0].renderer
    .text("Chart error " + err.code)
    .attr({
      fill: "red",
      zIndex: 20
    })
    .add()
    .align(
      {
        align: "center",
        verticalAlign: "middle"
      },
      null,
      "plotBox"
    );
});

const App = () => {
  const [options] = useState({
    yAxis: {
      type: "logarithmic",
      min: 0
    },
    series: [
      {
        data: [1, 2, 3]
      }
    ]
  });

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

[ppotaczek]

You need to add the event on Highcharts, not Highcharts.Chart. Please check my previous example.

[ranafaraznaru]

@ppotaczek can you please look into my issue? i followed what you mentioned above but i am not able to trigger my own UI when highcharts throws error.
#498