devtape-react

DevTape for React — error boundary + provider that records causal browser failure evidence with a docked dev overlay. Install for React/Vite frontend debugging, fetch error timelines, and unhandled rejection capture.

Install

npm install devtape-react

Requires React 18+.

Quick start

import {
  FailureRecorderProvider,
  FailureErrorBoundary,
} from "devtape-react";

export function App() {
  return (
    <FailureRecorderProvider
      environment="development"
      overlay
      redact={["authorization", "cookie", "password", "token"]}
    >
      <FailureErrorBoundary fallback={<p>Render failure captured.</p>}>
        {/* your app */}
      </FailureErrorBoundary>
    </FailureRecorderProvider>
  );
}

API

| Export | Purpose | |--------|---------| | FailureRecorderProvider | Starts capture on mount, disposes on unmount | | FailureErrorBoundary | Records React render failures | | useFailureRecorder() | Access the active recorder handle | | initFailureRecorder() | Standalone init (supports redact alias) |

Options

• overlay: true — mounts the docked DevTape timeline viewer (drag the top edge to resize; height is remembered)
• captureInteractions: true — record actionable clicks and form submits in the timeline (off by default). Never records typing. DevTape overlay clicks are never recorded.
• redact — alias for redaction.keys
• failedStatuses — HTTP statuses that trigger a freeze (default: 400, 401, 403, 404, 5xx)

Related

• devtape-nextjs — App Router and Pages Router navigation probes
• devtape-browser — underlying instrumentation

License

MIT