System Error Boundaries404, 401, 403, 503, 500
Error templates with editorial typography, 5-band spectrum ribbons, sharp buttons, and recovery actions for Texas A&M Transportation Institute applications.
system response
Page Not Found
The requested route has moved, been retired, or never existed in the TUX ecosystem. Use the links below to return to safety or search the catalog.
Diagnostic Details:
[InstitutionalTraceException]: Connection timeout to rellis-cluster.tti.tamu.edu:9443
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1607:16)
at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17)
Status: TTI-FAILOVER-TRIGGERED
Correlation-ID: tti-node-tx-77492-ax9Need assistance? Contact TTI Help Desk (979-317-2000) or check the Component Health Matrix.
Institutional Implementation
Nuxt 4 Root Boundary
Standard app/error.vue
In Nuxt 4, uncaught router exceptions and SSR halts flow to the root app/error.vue boundary. It wraps <TuxErrorPage> with institutional header navigation, brand lockup, and clearError({ redirect: '/' }) hooks.
<script setup lang="ts">
import type { NuxtError } from "#app";
defineProps<{ error: NuxtError }>();
const handleError = () => clearError({ redirect: "/" });
</script>
<template>
<TuxErrorPage
:code="String(error.statusCode || 404)"
:title="error.statusMessage"
:details="error.stack"
:actions="[
{ label: 'Return Home', intent: 'primary', onClick: handleError }
]"
/>
</template>WCAG 2.2 Level AAA Compliance
Accessibility Guarantees
Every error condition implements role="alert" and aria-live="polite" so screen readers announce the state change immediately without interrupting critical speech synthesizers.
- Contrast: Minimum 7.0:1 contrast ratio across TTI Maroon, dark ink, and eggshell surfaces.
- Touch Targets: Primary recovery buttons preserve minimum 44px hit-box sizing.
- Keyboard Focus: 3px high-visibility gold/maroon focus rings on all interactive recovery links.