Spaces:

DAG-UPB
/

TS-Arena

Running

App Files Files Community

mmcux commited on 14 days ago

Commit

4bea006

1 Parent(s): a0a1d01

Show a proper error page instead of a blank application error, and log client-side faults

Browse files

Files changed (4) hide show

src/app/api/client-error/route.ts +80 -0
src/app/error.tsx +19 -0
src/app/global-error.tsx +27 -0
src/components/ErrorFallback.tsx +124 -0

src/app/api/client-error/route.ts ADDED Viewed

	@@ -0,0 +1,80 @@

+import { NextRequest, NextResponse } from 'next/server';
+/**
+ * Sink for client-side exceptions caught by the error boundaries.
+ *
+ * Writes one line to the container log, which is readable through the Coolify API. That
+ * keeps error reporting entirely on UPB infrastructure — no third-party service, and
+ * nothing to configure on a host with no outbound internet.
+ *
+ * This endpoint is public, because the errors worth catching happen before any session
+ * exists. So it treats its input as hostile: the body is size-capped, every field is
+ * truncated, and the whole route is rate-limited, since its only effect is to write to a
+ * log that someone could otherwise flood.
+ */
+const MAX_BODY_BYTES = 16_000;
+const MAX_MESSAGE_CHARS = 500;
+const MAX_STACK_CHARS = 4_000;
+const MAX_FIELD_CHARS = 300;
+// Per-instance throttle. Not a security boundary — a cheap ceiling on log volume.
+const WINDOW_MS = 60_000;
+const MAX_REPORTS_PER_WINDOW = 60;
+let windowStartedAt = 0;
+let reportsThisWindow = 0;
+function withinRateLimit(now: number): boolean {
+  if (now - windowStartedAt > WINDOW_MS) {
+    windowStartedAt = now;
+    reportsThisWindow = 0;
+  }
+  reportsThisWindow += 1;
+  return reportsThisWindow <= MAX_REPORTS_PER_WINDOW;
+}
+/** Coerce anything to a single-line, length-capped string. */
+function clean(value: unknown, max: number): string {
+  if (typeof value !== 'string') return '';
+  return value.replace(/\s+/g, ' ').trim().slice(0, max);
+}
+export async function POST(request: NextRequest) {
+  // 204 on every path below: the caller is an error boundary and must never be handed
+  // another failure to deal with.
+  const ok = new NextResponse(null, { status: 204 });
+  if (!withinRateLimit(Date.now())) return ok;
+  let raw: string;
+  try {
+    raw = await request.text();
+  } catch {
+    return ok;
+  }
+  if (raw.length > MAX_BODY_BYTES) return ok;
+  let body: Record<string, unknown>;
+  try {
+    body = JSON.parse(raw);
+  } catch {
+    return ok;
+  }
+  const message = clean(body.message, MAX_MESSAGE_CHARS);
+  const digest = clean(body.digest, MAX_FIELD_CHARS);
+  const pathname = clean(body.pathname, MAX_FIELD_CHARS);
+  const userAgent = clean(body.userAgent, MAX_FIELD_CHARS);
+  // Newlines are what make a stack readable, so keep them — but cap the length.
+  const stack =
+    typeof body.stack === 'string' ? body.stack.slice(0, MAX_STACK_CHARS) : '';
+  if (!message && !stack && !digest) return ok;
+  console.error(
+    `CLIENT ERROR: ${JSON.stringify({ message, digest, pathname, userAgent })}` +
+      (stack ? `\n${stack}` : ''),
+  );
+  return ok;
+}

src/app/error.tsx ADDED Viewed

	@@ -0,0 +1,19 @@

+'use client';
+import ErrorFallback from '@/src/components/ErrorFallback';
+/**
+ * Route-level error boundary. Catches exceptions thrown while rendering any page below
+ * the root layout; the layout itself (nav, footer) keeps rendering around it.
+ *
+ * A failure in the root layout escapes this one — `global-error.tsx` catches those.
+ */
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return <ErrorFallback error={error} reset={reset} />;
+}

src/app/global-error.tsx ADDED Viewed

	@@ -0,0 +1,27 @@

+'use client';
+import ErrorFallback from '@/src/components/ErrorFallback';
+import './globals.css';
+/**
+ * Last-resort boundary for failures in the root layout itself.
+ *
+ * It replaces the whole document, so it has to supply its own `<html>` and `<body>` — the
+ * root layout is precisely what did not render. It also imports the stylesheet directly,
+ * since the layout that normally pulls it in never ran.
+ */
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <ErrorFallback error={error} reset={reset} />
+      </body>
+    </html>
+  );
+}

src/components/ErrorFallback.tsx ADDED Viewed

	@@ -0,0 +1,124 @@

+'use client';
+import { useEffect, useRef, useSyncExternalStore } from 'react';
+/** The `?debug=1` flag lives in the URL, which React does not own. */
+const subscribeToNothing = () => () => {};
+const readDebugFlag = () =>
+  new URLSearchParams(window.location.search).get('debug') === '1';
+// Server snapshot: the flag is unknowable until there is a `window`, and claiming `false`
+// keeps server and client output identical until React re-renders on the client.
+const debugFlagOnServer = () => false;
+interface ErrorFallbackProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+/**
+ * What a visitor sees when a client-side exception escapes to an error boundary.
+ *
+ * Without a boundary Next.js renders its own bare "Application error: a client-side
+ * exception has occurred" stub, which tells the visitor nothing and — more importantly —
+ * leaves us with no record that anything happened at all.
+ *
+ * Raw exception text is deliberately **not** shown by default. Next.js strips server error
+ * messages in production and substitutes `digest` precisely so internals do not leak, and
+ * this is a public site. Visitors get the digest as a short reference; the full message and
+ * stack go to the server log, and are additionally rendered inline when the URL carries
+ * `?debug=1` so the fault can be read straight off a phone or tablet with no devtools.
+ */
+export default function ErrorFallback({ error, reset }: ErrorFallbackProps) {
+  const showDetail = useSyncExternalStore(
+    subscribeToNothing,
+    readDebugFlag,
+    debugFlagOnServer,
+  );
+  // Reporting is idempotent per mount: React may re-render the boundary (e.g. Strict Mode
+  // double-invokes effects in development) and one fault should produce one log line.
+  const reported = useRef(false);
+  useEffect(() => {
+    if (reported.current) return;
+    reported.current = true;
+    // Fire-and-forget. A failure to report must never surface to the visitor or throw from
+    // inside the boundary that is already handling an error. `keepalive` lets the request
+    // outlive the page if they navigate away immediately.
+    try {
+      void fetch('/api/client-error', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: error.message,
+          stack: error.stack,
+          digest: error.digest,
+          pathname: window.location.pathname + window.location.search,
+          userAgent: navigator.userAgent,
+        }),
+        keepalive: true,
+      }).catch(() => {});
+    } catch {
+      // Ignore: serialisation or a blocked request must not escalate.
+    }
+  }, [error]);
+  return (
+    <div className="min-h-screen bg-gray-50 p-4 sm:p-6 lg:p-8">
+      <main className="max-w-2xl mx-auto">
+        <div className="bg-white rounded-lg shadow-md p-6 sm:p-8 mt-8">
+          <h1 className="text-2xl font-semibold text-gray-900">Something went wrong</h1>
+          <p className="mt-3 text-gray-600">
+            This page hit an unexpected error. Trying again usually works — the rankings and
+            forecast data themselves are unaffected.
+          </p>
+          <div className="mt-6 flex flex-wrap gap-3">
+            <button
+              onClick={reset}
+              className="px-4 py-2 rounded-md bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
+            >
+              Try again
+            </button>
+            {/* Deliberately a plain anchor, not next/link. The rule exists to avoid full
+                page reloads, but a full reload is the point here: client-side navigation
+                would route within the same broken runtime the boundary just caught, and
+                `global-error` renders when the root layout itself failed. */}
+            {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
+            <a
+              href="/"
+              className="px-4 py-2 rounded-md border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50"
+            >
+              Back to homepage
+            </a>
+          </div>
+          {error.digest && (
+            <p className="mt-6 text-xs text-gray-500">
+              Reference: <code className="font-mono text-gray-700">{error.digest}</code>
+              <span className="block mt-1">
+                Quote this if you report the problem to us.
+              </span>
+            </p>
+          )}
+          {showDetail && (
+            <div className="mt-6 border-t border-gray-200 pt-4">
+              <p className="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                Debug detail
+              </p>
+              <p className="mt-2 text-sm font-medium text-gray-900 break-words">
+                {error.message || '(no message)'}
+              </p>
+              {error.stack && (
+                <pre className="mt-3 max-h-80 overflow-auto rounded bg-gray-900 p-3 text-xs leading-relaxed text-gray-100 whitespace-pre-wrap break-words">
+                  {error.stack}
+                </pre>
+              )}
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}