Error handling

When a stream errors, useObservable re-throws the error during render, so 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.

When errors should 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