errorFallback

It provides a fallback for components that throw errors.

// Automatic error fallback
export default function App() {
  // comment;me;out;
  return (
    <div className="flex flex-col gap-2">
      <button>Hello</button>
      <BadComponent />
    </div>
  )
}

function BadComponent() {
  comment;me;out;
  return (
    <button>Bad component 💀</button>
  )
}

Open Sandbox

Installation

npm install react-beyond @react-beyond/errorfallback

Usage

import { Beyond } from 'react-beyond'
import { errorFallback } from '@react-beyond/errorFallback'

<Beyond features={[errorFallback(<options>)]}>
  <App x-error-fallback={true} />
</Beyond>

Options

• id - The id of the feature HOC. Defaults to errorFallback.
• forAll? - Whether to apply error handling to all components or only to those that have the x-error-fallback prop. Defaults to true.
• mode?: 'trycatch' | 'errorboundary': The mode of error handling.
  • trycatch: uses a try/catch block when rendering the component.
  • errorboundary: wraps the component in an ErrorBoundary.
• defaultFallback?: ReactElement | ((componentName: string) => ReactElement) - The fallback to use when no fallback is provided for a component. Defaults to a component showing the text "[ComponentName error]".

Directive

• x-error-fallback?: | true | ReactElement | ((componentName: string) => ReactElement) - The fallback to render when an error occurs, or true to use the default fallback.