Error boundary

AskdepthCatch is a React error boundary. It replaces a failing descendant tree with a fallback and reports a handled JavaScript anomaly through core when collection is active.

Wrap a feature

'use client';

import type { ReactNode } from 'react';
import { AskdepthCatch } from '@askdepth/react';

export function FeatureBoundary({ children }: { children: ReactNode }) {
  return (
    <AskdepthCatch
      fallback={(_error, reset) => (
        <div role="alert">
          <p>This feature could not load.</p>
          <button type="button" onClick={reset}>Try again</button>
        </div>
      )}
    >
      {children}
    </AskdepthCatch>
  );
}

The fallback can be a React node or a function (error, reset) => ReactNode. Omitting it uses the package's default error interface. Provide your own fallback to match your application's design and avoid displaying raw exception text.

The reset function clears the boundary's internal error state and retries rendering the children. It does not repair application state or refetch data automatically. If the underlying error remains, the boundary can fail again.

Telemetry behavior

The boundary reports ERROR_CLICK with error_type: 'js_exception' and handled: true. It uses a target from the adapter's recent interaction memory when one is available within 500 ms. Otherwise core can use react:error-boundary as the target selector.

The transmitted message is the generic React component error. Core sanitizes and bounds the JavaScript and component stacks, retaining up to eight source-position frames rather than the raw error message and full file paths. Stack formats without recognized source positions can result in empty stack fields.

If core is not ready when componentDidCatch runs, the boundary schedules one immediate deferred report. This is not a durable error queue: collection still must be active when reporting occurs.

With replay enabled, reporting also signals a replay flash. A flash needs recorded context; the boundary does not reconstruct browser activity from before the recorder started.

Boundary limits

The boundary follows React error-boundary semantics. It does not catch arbitrary asynchronous errors, server rendering failures, errors in itself, or ordinary exceptions thrown from event handlers. Core separately observes window errors and unhandled rejections when collection is active, with recent-click correlation limits.

Use this boundary around meaningful feature areas, keep the provider above it, and test both the fallback and recovery behavior. It supplements your application error handling; it does not define Next.js server error recovery.