All Docs
FeaturesCalmony Sanctions MonitorUpdated March 12, 2026

Why We Added Custom Error Pages — and Why It Matters for a Compliance Product

Why We Added Custom Error Pages — and Why It Matters for a Compliance Product

Release: v0.1.78 · Control: SEO-25

The Problem

Until v0.1.78, the platform had no custom error.tsx or global-error.tsx defined in src/app/. That meant any unhandled runtime error — a failed API call, an unexpected null reference, a network timeout — would drop users onto Next.js's default error screen: a plain, unbranded page that gives no indication of where they are or what to do next.

For a general-purpose web app that might be acceptable. For a sanctions screening platform used by UK compliance teams, it is not.

Compliance work demands trust. When an analyst is mid-screen on a time-sensitive check and the application unexpectedly fails, the last thing they should see is an anonymous error page with no path forward. It raises doubts: Did my action complete? Is my data safe? Is this platform production-grade?

What We Built

We introduced two error boundary files following Next.js App Router conventions:

src/app/error.tsx — Route-Segment Error Boundary

'use client';

// Catches errors thrown within any route segment or its children.
// Receives `error` (the thrown Error) and `reset` (a function to
// re-render the segment and retry).
export default function Error({ error, reset }) {
  return (
    // Branded layout with:
    // - Clear error message
    // - 'Try again' button → calls reset()
    // - Link back to /dashboard or /
  );
}
  • Marked 'use client' as required by Next.js — error boundaries must be client components.
  • The reset function attempts to re-render the failed segment without a full page reload, giving users the quickest possible path back to work.
  • Navigation links return users to /dashboard (or / as a fallback) so they are never stranded.

src/app/global-error.tsx — Root-Level Error Boundary

'use client';

// Catches errors that escape all nested layouts and segments,
// including errors thrown in the root layout itself.
export default function GlobalError({ error, reset }) {
  return (
    // Minimal but branded fallback UI
  );
}
  • Acts as the last line of defence — it wraps the entire application, including the root layout.
  • Because it replaces the root layout when active, it must render its own <html> and <body> tags.

The SEO Angle

SEO-25 is categorised as a technical SEO control, not purely a UX one. Here is why error pages surface in SEO audits:

  • Crawler signals: If a crawler encounters a default framework error page, it cannot determine whether the page is intentionally empty or broken. A branded, structured error page communicates intent.
  • Core Web Vitals / experience signals: Unrecoverable error states that force users to hard-reload or navigate away affect engagement signals that modern search engines factor into rankings.
  • Trust & E-E-A-T: For compliance-adjacent products, demonstrating operational maturity — including graceful failure handling — contributes to the Expertise, Authoritativeness, and Trustworthiness signals that Google's quality raters assess.

User Experience Impact

Before v0.1.78From v0.1.78
Runtime errorDefault Next.js unbranded screenBranded error page with context
Recovery pathBrowser back button / manual URLTry again button + dashboard link
Root layout errorBlank or framework pageglobal-error.tsx branded fallback
User confidenceUnderminedMaintained

For Developers

If you are running the platform locally or contributing to it:

  • error.tsx is automatically picked up by Next.js for any segment under src/app/. You do not need to import or register it manually.
  • global-error.tsx follows the same convention at the root level.
  • Both files must be 'use client' components — this is a Next.js requirement for error boundaries.
  • The reset prop is a zero-argument function. Call it directly from a button's onClick handler.
  • Test error boundaries by deliberately throwing inside a page component during local development; Next.js will render your custom boundary instead of the default overlay in production mode.

This change satisfies SEO control SEO-25 from the platform's technical SEO audit programme.