# react-hooks/error-boundaries

> Disallow JSX inside a `try` block, where `catch` cannot see rendering errors

`<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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

{/* End of the generated section. */}

## Examples

Reported:

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

Not reported:

{/* good */}
```jsx
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:

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