Dashboard Error Page — Final Report

What Was Built

A dedicated error page for the admin dashboard that displays full error context when HTTP errors (403, 404, 500, 503) occur on dashboard routes. Previously, dashboard errors redirected to a generic error page using the public site layout (navbar + footer), which was confusing for admin users.

The new DashboardError.vue component renders within the Dashboard layout (sidebar + header) and shows:

Error status code and description
Request URL and HTTP method
Current user info (if authenticated)
Timestamp of the error
Stack trace and request parameters (visible only to super_admin users in non-production environments)

Architecture

Components

File	Role
`resources/js/Pages/Dashboard/DashboardError.vue`	Vue error page with full context display
`app/Exceptions/Handler.php`	Detects dashboard routes, renders DashboardError
`app/Ship/Exceptions/Handler.php`	Duplicate handler (Porto architecture)

Data Flow

Exception thrown
    ↓
Handler.php render()
    ↓
isDashboardRequest()? ──Yes──→ renderDashboardError()
    │                              ↓
    │                         Check user role
    │                              ↓
    │                         Build props (status, message, url, etc.)
    │                              ↓
    │                         Inertia::render('Dashboard/DashboardError', $props)
    │
    └──No──→ Original Error.vue (public layout)

Access Control

All users: See error status, description, URL, method, user info, timestamp
Super_admin only (non-production): Additionally see stack trace and request parameters
Production: Stack trace and params never shown (regardless of role)

Usage

When a dashboard route returns an HTTP error (403, 404, 500, 503), the user is automatically redirected to the DashboardError page with full context. No configuration required.

Example scenarios:

User navigates to /dashboard/nonexistent-page → 404 with URL info
User accesses restricted route without permission → 403 with user info
Server error occurs → 500 with timestamp

Navigation:

"Назад" button: Returns to previous page (or dashboard index if no history)
"На главную" button: Navigates to dashboard index

Verification

404 test: curl -s -o /dev/null -w "%{http_code}" http://localhost/dashboard/nonexistent-page → Returns 404
Props verification: Confirmed status=404, message, url, method, timestamp all present in Inertia page data
Stack trace hidden: Confirmed stack trace and params not included for unauthenticated users
Public site unchanged: Public site errors still render with original Error.vue layout
PHP syntax: Both Handler files pass php -l syntax check

Journey Log

[lesson] Vite manifest requires rebuild after adding new Vue components — npm run build needed before testing
[lesson] Porto architecture has duplicate exception handlers (app/Exceptions/ and app/Ship/Exceptions/) — both must be updated identically

3.3 KiB Raw Blame History