How to use custom UI when highcharts throw error

[ranafaraznaru]

After extensive research, I've decided to post my question here.

I'm working with React Highcharts and I'm trying to implement custom error handling. Instead of the entire page crashing when Highcharts encounters an error, I want to display a custom UI component.

I've looked through Stack Overflow and the official Highcharts documentation, but I haven't been able to find a solution that works for me.

I've provided a CodeSandbox link below. Please help me achieve this, thank you! https://codesandbox.io/p/sandbox/highcharts-react-forked-hfc6y3?workspaceId=b878446b-0701-41fb-b944-d231bbae84f1

Code :

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";

const App = () => {
  const [hasError, setHasError] = useState(false);

  const [options] = useState({
    chart: {
      type: "sdcnsdcns",
    },
    series: [
      {
        data: [4, 3, 5, 6, 2, 3],
      },
    ],
  });
  useEffect(() => {
    const handleError = (err) => {
      console.error("Highcharts Error:", err);
      setHasError(true); // Trigger React re-render
    };

    // Attach the Highcharts error event
    Highcharts.addEvent(Highcharts, "displayError", handleError);

    // return () => {
    //   // Clean up the error event listener
    //   Highcharts.removeEvent(Highcharts, "displayError", handleError);
    // };
  }, []);

  if (hasError) {
    // Render custom error UI
    return (
      <div className="error-ui">
        <h2>Error Loading Chart</h2>
        <p>An error occurred. Please refresh or try again later.</p>
      </div>
    );
  }
  return (
    <div>
      <HighchartsReact highcharts={Highcharts} options={options} />
    </div>
  );
};

render(<App />, document.getElementById("root"));

[KamilKubik]

Hi ranafaraznaru!

Highcharts throws a default Error object that should be handled during the runtime on the React side to display the fallback UI. What React recommends is the green note under this section. Considering this, I think the easiest way would be to wrap the Highcharts component with the custom error boundary. Kindly refer to an example based on the mentioned React docs, demo.

The above example shows the properly rendered UI, but the message persists (you can close it and see the UI) because React uses the react-error-overlay package in the development mode when initializing it with create-react-app (so depending on your project, you may see it or not).

To sump up, I'd highly recommend using the official React boundary (or the react-error-boundary package they recommend) to handle the UI and test it in the React production mode, not to experience the error.

Kind Regards!

[ranafaraznaru]

Hi @KamilKubik Thanks i will test and come back here again if i need anything.