react-hooks/error-boundaries

<Chart /> doesn't call Chart. It only describes what to render, and React calls the component later, after your function has returned. So if Chart throws while rendering, the try around the JSX is long over and its catch never runs.

To handle a rendering error, wrap the component in an error boundary.

Configure

Off by default. To turn it on:

[lint.rules]
"react-hooks/error-boundaries" = "error" # or "warn"

Examples

Reported:

function Dashboard({ data }) {
  try {
    return <Chart data={data} />;
  } catch {
    return <p>Could not draw the chart.</p>;
  }
}

Not reported:

function Dashboard({ data }) {
  return (
    <ErrorBoundary fallback={<p>Could not draw the chart.</p>}>
      <Chart data={data} />
    </ErrorBoundary>
  );
}

A try around code that runs right away is fine, and so is JSX in the catch block:

function Dashboard({ json }) {
  let data;
  try {
    data = JSON.parse(json);
  } catch {
    return <p>Could not read the data.</p>;
  }
  return <Chart data={data} />;
}