ErrorBoundary

ErrorBoundary is a component that catches errors in its child component tree, preventing the entire application from crashing. When an error occurs, the fallback prop is rendered instead of the component tree.

You can provide a simple JSX element as the fallback, or a function that receives the error and returns JSX. Additionally, you can use the onError prop to handle errors (e.g., for logging).

Example

import { ErrorBoundary } from "kiru"

function ComponentThatThrows() {
  throw new Error("ComponentThatThrows")
  return null
}

function App() {
  return (
    <div>
      <ErrorBoundary fallback={<div>Something went wrong</div>}>
        <ComponentThatThrows />
      </ErrorBoundary>
      <ErrorBoundary
        onError={(e) => console.error(e)}
        fallback={(error) => <div>Something went wrong: {error.message}</div>}
      >
        <ComponentThatThrows />
      </ErrorBoundary>
    </div>
  )
}