← Back to rules

react/error-boundaries Correctness

What it does

Validates using error boundaries instead of try/catch around JSX for errors in child components.

Powered by the React Compiler, which runs once per file and is shared with the other React Compiler rules. Port of react-hooks/error-boundaries.

Why is this bad?

React renders components lazily — the child has not rendered yet inside the try block, so the catch never sees its errors; only an error boundary can catch them.

Examples

Examples of incorrect code for this rule:

function Component(props) {
  let el;
  try {
    el = <Child />;
  } catch {
    return null;
  }
  return el;
}

Examples of correct code for this rule:

function Component(props) {
  return (
    <ErrorBoundary fallback={null}>
      <Child />
    </ErrorBoundary>
  );
}

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/error-boundaries": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/error-boundaries": "error",
  },
});

CLI

oxlint --deny react/error-boundaries --react-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground