Error Boundary UI

Component 3

About

An error display component for React error boundaries showing the message, parsed stack trace, component stack, with retry and copy-error actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Error Boundary UI to your project and fits it to your theme.

Code

How Error Boundary UI is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ErrorBoundaryUi } from "@/components/ui/error-boundary-ui";

function makeSampleError() {
  const error = new Error("Cannot read properties of undefined (reading 'map')");
  error.name = "TypeError";
  error.stack = `TypeError: Cannot read properties of undefined (reading 'map')
    at ProductList (webpack-internal:///./src/components/ProductList.tsx:24:18)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16305:18)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20074:13)`;
  return error;
}

export default function Default() {
  const error = makeSampleError();
  const componentStack = `
    at ProductList (src/components/ProductList.tsx:24:18)
    at Page (src/app/products/page.tsx:12:9)`;

  return (
    <div className="w-full max-w-xl mx-auto p-6">
      <ErrorBoundaryUi
        error={error}
        isDev
        componentStack={componentStack}
        resetError={() => window.location.reload()}
      />
    </div>
  );
}