Error Handling
Error Handling
myProp uses a layered error boundary system to ensure that every error state — from a missing page to a complete application crash — is caught and presented to the user with clear messaging, a support reference code, and a path back to a working state.
Error Boundary Architecture
Error boundaries are arranged in a hierarchy so that errors are always caught at the most specific level possible, preserving as much of the UI as possible.
| Boundary | File | Behaviour |
|---|---|---|
| Global | src/app/global-error.tsx | Catches errors when the root Next.js layout itself fails. Renders using inline styles and an inline SVG only — no Tailwind, no external components — so it works even if CSS and the component tree are unavailable. |
| Root app | src/app/error.tsx | Catches runtime errors on any page outside /dashboard. |
| Root 404 | src/app/not-found.tsx | Shown for any unknown top-level route. |
| Dashboard | src/app/dashboard/error.tsx | Catches runtime errors within dashboard pages. The dashboard shell layout remains visible. |
| Dashboard 404 | src/app/dashboard/not-found.tsx | Shown for unknown routes under /dashboard. |
| Dashboard catch-all | src/app/dashboard/[...slug]/page.tsx | Any unmatched /dashboard/* path calls notFound(), delegating to the dashboard 404 boundary. |
| Company not found | src/app/company-not-found/page.tsx | Shown when the user's property company or organisation cannot be resolved. |
User-Facing Error Pages
Something Went Wrong (Runtime Error)
Displayed when an unexpected error occurs at runtime, either inside or outside the dashboard.
- Shows the
server-errorillustration variant - Displays an error reference code (digest) when available — users should quote this when contacting support
- Try Again button re-renders the failed page segment
- Back to Home / Back to Dashboard navigation button
Page Not Found (404)
Displayed when a user navigates to a route that does not exist.
- Root-level: shows the
not-foundillustration with links to Home and Dashboard - Dashboard-level: stays within the dashboard shell, with a link back to
/dashboard
Company Not Found
Displayed at /company-not-found when the property company or organisation linked to the user's account cannot be resolved.
Common causes:
- The organisation has been deleted or suspended
- The AgentOS company reference is invalid
- The user's invitation link has expired
The page includes an actionable checklist:
- Double-check the URL or invitation link
- Contact your letting or estate agent for an updated link
- Sign in with a different account if you have multiple
Navigation options: Sign In and Back to Home.
Critical Error (Global)
Displayed when the root Next.js layout itself crashes. This is the last-resort error page.
- Rendered entirely with inline styles (dark theme,
system-uifont) — no Tailwind or external CSS - Uses an inline SVG warning icon — no
lucide-reactor other component library dependency - Logs the error to the browser console
- Displays an error digest code if available
- Try Again and Back to Home buttons
ErrorIllustration Component
All error pages (except global-error.tsx) use the shared ErrorIllustration component located at src/components/error-illustration.tsx.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
variant | 'not-found' | 'server-error' | 'company-not-found' | 'unknown' | Yes | Selects the icon displayed |
size | number | No | Icon size in pixels. Defaults to the component's built-in default. |
Variants
| Variant | Used on |
|---|---|
not-found | 404 pages (root and dashboard) |
server-error | Runtime error pages (root and dashboard) |
company-not-found | /company-not-found page |
unknown | Fallback for unclassified error states |
Icons are sourced from lucide-react.
Error Reporting
All client-side error boundaries automatically call captureError(error, { domain }) via src/lib/capture-error.ts inside a useEffect hook when an error is caught. This forwards errors to the platform's observability layer without any manual action.
| Boundary | Domain tag |
|---|---|
Root app (error.tsx) | app |
Dashboard (dashboard/error.tsx) | dashboard |
Global (global-error.tsx) | Console only (captureError may be unavailable if the root layout crashed) |
Error Reference Codes
Next.js generates a digest (short hash) for each server-side error. myProp surfaces this code on all error pages:
Error reference: a1b2c3d4
When contacting support or your letting agent about an error, quote this reference code to help identify the exact incident in logs.