Error
Cannot read properties of undefined (reading 'map')
atUserList(src/components/UserList.tsx:15:23)
atrenderWithHooks(node_modules/react-dom/cjs/react-dom.development.js:14985:18)
atmountIndeterminateComponent(node_modules/react-dom/cjs/react-dom.development.js:17811:13)
Overview
An error display component designed for React error boundaries. Shows user-friendly messages in production and detailed stack traces in development, with retry and copy functionality.
Installation
bunx shadcn@latest add @elements/error-boundary-uiUsage
import { ErrorBoundaryUi } from "@/components/elements/devtools/error-boundary-ui";
export function ErrorFallback({ error, resetErrorBoundary }) {
return (
<ErrorBoundaryUi
error={error}
resetError={resetErrorBoundary}
isDev={process.env.NODE_ENV === "development"}
/>
);
}
// With react-error-boundary
<ErrorBoundary FallbackComponent={ErrorFallback}>
<App />
</ErrorBoundary>Props
| Prop | Type | Default | Description |
|---|---|---|---|
error | Error | - | Error object to display |
resetError | () => void | - | Callback to retry/reset |
componentStack | string | null | - | React component stack trace |
isDev | boolean | NODE_ENV === "development" | Show detailed info |
className | string | - | Additional CSS classes |
Development vs Production
Development mode:
- Shows error name and full message
- Expandable stack trace with parsed frames
- Expandable component stack (if available)
Production mode:
- Shows generic "Something went wrong" message
- Hides technical details from users
Features
- Dev/prod mode switching
- Collapsible stack trace
- Component stack display
- Copy error to clipboard
- Try again button
- Parsed stack frames with file locations