Day 24: 404/500 Error Pages

Overview

Implemented custom error pages for shikadigital.co.jp that maintain brand consistency while providing helpful navigation recovery options. Both pages feature the Shika Digital design system with responsive layouts and accessibility-first design.

Implementation Details

404 Page (src/pages/404.astro)

  • Large teal “404” status code with Jost typography
  • “Page Not Found” heading with helpful description
  • Primary CTA: “Return to Homepage” button
  • Navigation recovery links: Assessment, About, How We Work
  • Analytics integration: Tracks 404 page views with attempted path and referrer
  • View Transitions support: Prevents duplicate tracking on history navigation

500 Page (src/pages/500.astro)

  • Large teal “500” status code matching 404 design
  • “Something Went Wrong” heading with reassuring message
  • Primary CTA: “Return to Homepage” button
  • Contact fallback: Email link ([email protected]) for persistent issues
  • No JavaScript dependencies: Renders as static HTML for reliability

Shared Features

FeatureImplementation
Brand consistencyBaseLayout wrapper, CSS custom properties
Responsive designMobile-first with tablet (768px) and desktop (1024px) breakpoints
AccessibilityARIA labels, focus-visible states, 48px minimum touch targets
AnimationFade-in with prefers-reduced-motion respect
SEOnoindex={true} to prevent indexing error pages

CSS Architecture

  • Mobile-first approach with error code scaling: 5rem → 8rem → 12rem
  • Title scaling: --text-2xl → --text-4xl → --text-5xl
  • Navigation links: Vertical stack on mobile, horizontal row on tablet+
  • Overflow protection: overflow-x: hidden, overflow-wrap: break-word

Test Coverage

  • Unit tests: 404.test.ts, 500.test.ts - Page structure and content validation
  • Property tests: Responsive design, touch target sizes, descriptive link text
  • E2E tests: error-pages.spec.ts - Visual regression and navigation testing

Key Bug Fixes

  • Prevented duplicate 404 tracking with View Transitions enabled
  • Adjusted top padding for proper viewport spacing below header
  • Ensured email link wraps correctly on very small screens