Updated next.js error handler to use error reporting api.

Author: actions-user

src/app/error.tsx

@@ -1,6 +1,9 @@
+// app/error.tsx
+
 'use client' // Error boundaries must be Client Components
 
 import { useEffect } from 'react'
+import { reportError } from '@/lib/errorReportingService' // 1. Import the service
 
 export default function Error({
   error,
@@ -10,18 +13,24 @@ export default function Error({
   reset: () => void
 }) {
   useEffect(() => {
-    // Log the error to an error reporting service
-    console.error(error)
+    // 2. Log the error to your reporting service instead of just the console
+    reportError(error)
   }, [error])
 
   return (
-    <div>
+    <div style={{ padding: '2rem', textAlign: 'center' }}>
       <h2>Something went wrong!</h2>
+      <p>An error occurred while loading this page.</p>
       <button
         onClick={
           // Attempt to recover by trying to re-render the segment
           () => reset()
         }
+        style={{
+          marginTop: '1rem',
+          padding: '0.5rem 1rem',
+          cursor: 'pointer',
+        }}
       >
         Try again
       </button>