Files
vibn-frontend/app/global-error.tsx
Mark Henderson 9eab86f8c2 feat(observability): wire Sentry for runtime error capture
Adds @sentry/nextjs v10 with the Next.js 16 instrumentation pattern:
- instrumentation.ts        — server + edge runtime init
- instrumentation-client.ts — browser init with Session Replay
                              (free tier, mask all text/inputs by
                              default since chat content is sensitive)
- app/global-error.tsx      — catches root-layout crashes that escape
                              every other error boundary
- app/sentry-example-page   — verification page; click both buttons
- next.config.ts            — wrapped with withSentryConfig, source
                              maps upload to Sentry on every build,
                              client error events tunneled through
                              /monitoring to bypass ad-blockers

Runtime capture works as soon as NEXT_PUBLIC_SENTRY_DSN is in Coolify
env (already added). Full source-map de-minification of prod stack
traces requires SENTRY_AUTH_TOKEN in Coolify env — pending user.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-01 11:24:10 -07:00

54 lines
1.4 KiB
TypeScript

"use client";
/**
* Next.js global error boundary. Renders only when a render error
* escapes every other error.tsx boundary in the tree (including the
* root layout). Required for Sentry to capture root-layout crashes
* — the more granular `error.tsx` files don't run when the layout
* itself blows up.
*/
import * as Sentry from "@sentry/nextjs";
import { useEffect } from "react";
export default function GlobalError({
error,
}: {
error: Error & { digest?: string };
}) {
useEffect(() => {
Sentry.captureException(error);
}, [error]);
return (
<html>
<body>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
minHeight: "100vh",
padding: "2rem",
fontFamily: "system-ui, -apple-system, sans-serif",
color: "#1a1a1a",
}}
>
<h1 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
Something went wrong
</h1>
<p style={{ color: "#666", marginBottom: "1.5rem" }}>
We&apos;ve been notified and will look into it. Try refreshing.
</p>
{error.digest ? (
<code style={{ fontSize: "0.75rem", color: "#999" }}>
ref: {error.digest}
</code>
) : null}
</div>
</body>
</html>
);
}