Initial commit

skills/sentry-and-otel-setup/assets/error-page.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+import { useEffect } from 'react';
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log error to Sentry
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="max-w-md rounded-lg border p-6">
+        <h2 className="mb-2 text-2xl font-semibold">Something went wrong</h2>
+
+        <p className="mb-4 text-gray-600">
+          An unexpected error occurred. Please try again.
+        </p>
+
+        {process.env.NODE_ENV === 'development' && (
+          <details className="mb-4">
+            <summary className="cursor-pointer text-sm text-gray-500">
+              Error details
+            </summary>
+            <pre className="mt-2 overflow-auto rounded bg-gray-100 p-2 text-xs">
+              {error.message}
+            </pre>
+            {error.digest && (
+              <p className="mt-2 text-xs text-gray-500">
+                Error ID: {error.digest}
+              </p>
+            )}
+          </details>
+        )}
+
+        <div className="flex gap-2">
+          <button
+            onClick={reset}
+            className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+          >
+            Try again
+          </button>
+
+          <a
+            href="/"
+            className="rounded border border-gray-300 px-4 py-2 hover:bg-gray-50"
+          >
+            Go home
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}