Added error handler components.

Author: actions-user

src/components/ErrorBoundary.tsx

@@ -0,0 +1,49 @@
+'use client' // This must be a Client Component
+
+import React, { Component, ErrorInfo, ReactNode } from 'react'
+import { reportError } from '@/lib/errorReportingService' // Adjust path if needed
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  hasError: boolean
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(_: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Log the error to your reporting service
+    reportError(error, { errorInfo })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div style={{ padding: '2rem', textAlign: 'center' }}>
+          <h2>Something went wrong.</h2>
+          <p>
+            An unexpected error has occurred. We have been notified and are working to fix the
+            issue.
+          </p>
+          <button onClick={() => this.setState({ hasError: false })}>Try again</button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

src/components/GlobalErrorHandler.tsx

@@ -0,0 +1,39 @@
+'use client' // This component must be a Client Component
+
+import { useEffect } from 'react'
+import { reportError } from '@/lib/errorReportingService' // Adjust path if needed
+
+export default function GlobalErrorHandler() {
+  useEffect(() => {
+    // --- Handler for uncaught errors ---
+    const handleError = (event: ErrorEvent) => {
+      event.preventDefault()
+      reportError(event.error, { isFatal: true })
+    }
+
+    // --- Handler for unhandled promise rejections ---
+    const handleRejection = (event: PromiseRejectionEvent) => {
+      event.preventDefault()
+      // A rejection reason can be anything, but we'll try to handle it as an Error
+      const error =
+        event.reason instanceof Error
+          ? event.reason
+          : new Error(`Promise rejected with a non-error value: ${String(event.reason)}`)
+
+      reportError(error, { isFatal: true })
+    }
+
+    window.addEventListener('error', handleError)
+    window.addEventListener('unhandledrejection', handleRejection)
+
+    // --- Cleanup function ---
+    // This will run when the component unmounts
+    return () => {
+      window.removeEventListener('error', handleError)
+      window.removeEventListener('unhandledrejection', handleRejection)
+    }
+  }, []) // The empty dependency array ensures this runs only once
+
+  // This component renders nothing to the DOM
+  return null
+}