Error handling

When a stream errors, useObservable re-throws the error during render. It surfaces at the nearest Error Boundary , the same place a rendering error would.

Click the button to error the stream and watch the boundary catch it. The counter next to it keeps ticking, because it reads a different observable.

Want errors to render as UI instead (a retry button, a degraded state)? Catch them in the stream with catchError and emit a value. See errors: boundary or value in the guide.

import {useErrorBoundary} from 'use-error-boundary'

import {Example} from './Example'

export default function App() {
  const {ErrorBoundary, didCatch, error, reset} =
    useErrorBoundary()

  if (didCatch) {
    return (
      <>
        <div
          style={{
            color: 'crimson',
          }}
        >
          Oh no! An error occurred:
          <br />
          {error.message}
        </div>
        <button onClick={reset}>Try again</button>
      </>
    )
  }

  return (
    <ErrorBoundary>
      <Example />
    </ErrorBoundary>
  )
}

Open Sandbox