How to Generate Proper Error Boundaries with Cursor

1# .cursorrules
2
3## React Error Boundaries
4- Error boundaries MUST be class components implementing getDerivedStateFromError and componentDidCatch.
5- NEVER generate functional error boundaries — React 18 does not support them.
6- Always type ErrorBoundaryProps with a 'fallback' render prop: (error: Error, reset: () => void) => React.ReactNode
7- Always type ErrorBoundaryState as { hasError: boolean; error: Error | null }
8- Include a 'resetError' method that sets state back to { hasError: false, error: null }
9- Call props.onError(error, info) inside componentDidCatch if the prop is provided
10- Export the component as a named export, not default

1Generate a typed React 18 error boundary at src/components/ErrorBoundary.tsx.
2Requirements:
3- Class component, strict TypeScript, no 'any'
4- Props: { fallback: (error: Error, reset: () => void) => React.ReactNode; onError?: (error: Error, info: React.ErrorInfo) => void; children: React.ReactNode }
5- State: { hasError: boolean; error: Error | null }
6- Implement getDerivedStateFromError and componentDidCatch
7- componentDidCatch must call this.props.onError if provided
8- Include a resetError arrow method
9- Use named export

1Using @file src/pages/Dashboard.tsx and @file src/components/ErrorBoundary.tsx:
2
3Wrap the entire JSX returned from Dashboard in <ErrorBoundary>.
4The fallback prop should render a centered div with:
5- An h2 reading 'Something went wrong'
6- A <p> showing error.message
7- A <button onClick={reset}>Try again</button> styled with Tailwind

1Extend componentDidCatch to also call logErrorToService(error, info.componentStack).
2logErrorToService should be imported from src/utils/errorLogger.ts.
3Create that file if it does not exist: export it as an async function that accepts (error: Error, stack: string | null | undefined) => Promise<void> and currently just console.errors in development (NODE_ENV check).

1Generate two files:
21. src/components/__tests__/ErrorBoundary.test.tsx
3   - Uses @testing-library/react and @testing-library/jest-dom
4   - Creates a ThrowingComponent that throws new Error('test error') on render
5   - Wraps it in <ErrorBoundary fallback={(err, reset) => <button onClick={reset}>{err.message}</button>}>
6   - Asserts fallback renders 'test error'
7   - Asserts clicking the button removes the fallback (reset works)
82. No separate ThrowingComponent file — define it inline in the test