Error page

Author: connorabbas

bootstrap/app.php

@@ -1,8 +1,13 @@
 <?php
 
+use App\Http\Middleware\HandleInertiaRequests;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
+use Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Symfony\Component\HttpFoundation\Response;
 
 return Application::configure(basePath: dirname(__DIR__))
     ->withRouting(
@@ -12,12 +17,28 @@
     )
     ->withMiddleware(function (Middleware $middleware) {
         $middleware->web(append: [
-            App\Http\Middleware\HandleInertiaRequests::class,
-            Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
+            HandleInertiaRequests::class,
+            AddLinkHeadersForPreloadedAssets::class,
         ]);
-
-        //
     })
     ->withExceptions(function (Exceptions $exceptions) {
-        //
+        $exceptions->respond(function (Response $response, Throwable $exception, Request $request) {
+            if (
+                !app()->environment(['local', 'testing'])
+                && in_array($response->getStatusCode(), [500, 503, 404, 403])
+            ) {
+                return Inertia::render('Error', [
+                    'homepageRoute' => route('welcome'),
+                    'status' => $response->getStatusCode()
+                ])
+                    ->toResponse($request)
+                    ->setStatusCode($response->getStatusCode());
+            } elseif ($response->getStatusCode() === 419) {
+                return back()->with([
+                    'message' => 'The page expired, please try again.',
+                ]);
+            }
+
+            return $response;
+        });
     })->create();

resources/js/pages/Error.vue

@@ -1,61 +1,62 @@
-<script setup>
-import { computed } from 'vue';
-import { ArrowLeft } from 'lucide-vue-next';
-
-const props = defineProps({
-    homeRoute: String,
-    status: Number
-});
-
-const title = computed(() => {
-    return {
-        503: '503: Service Unavailable',
-        500: '500: Server Error',
-        404: '404: Page Not Found',
-        403: '403: Forbidden',
-    }[props.status];
-});
-
-const description = computed(() => {
-    return {
-        503: 'Sorry, we are doing some maintenance. Please check back soon.',
-        500: 'Whoops, something went wrong on our servers.',
-        404: 'Sorry, the page you are looking for could not be found.',
-        403: 'Sorry, you are forbidden from accessing this page.',
-    }[props.status];
-});
-</script>
-
-<template>
-    <InertiaHead title="Error" />
-    <Container fluid>
-        <main>
-            <div class="h-screen flex items-center justify-center">
-                <Card class="p-4 py-6 sm:p-12">
-                    <template #content>
-                        <div class="text-center">
-                            <section>
-                                <h2 class="mb-8 font-extrabold text-5xl md:text-8xl">
-                                    {{ title }}
-                                </h2>
-                                <p class="mb-8 text-2xl font-semibold md:text-3xl text-muted-color">
-                                    {{ description }}
-                                </p>
-                                <InertiaLink :href="props.homeRoute">
-                                    <Button
-                                        label="Back to homepage"
-                                        raised
-                                    >
-                                        <template #icon>
-                                            <ArrowLeft />
-                                        </template>
-                                    </Button>
-                                </InertiaLink>
-                            </section>
-                        </div>
-                    </template>
-                </Card>
-            </div>
-        </main>
-    </Container>
+<script setup>
+import { computed } from 'vue';
+import { ArrowLeft } from 'lucide-vue-next';
+
+const props = defineProps({
+    homepageRoute: String,
+    status: Number
+});
+
+const title = computed(() => {
+    return {
+        503: 'Service Unavailable',
+        500: 'Server Error',
+        404: 'Page Not Found',
+        403: 'Forbidden',
+    }[props.status];
+});
+
+const description = computed(() => {
+    return {
+        503: 'Sorry, we are doing some maintenance. Please check back soon.',
+        500: 'Whoops, something went wrong on our servers.',
+        404: 'Sorry, the page you are looking for could not be found.',
+        403: 'Sorry, you are forbidden from accessing this page.',
+    }[props.status];
+});
+</script>
+
+<template>
+    <InertiaHead title="Error" />
+    <Container fluid>
+        <main>
+            <div class="h-screen flex items-center justify-center">
+                <Card class="p-4 py-6 sm:p-12">
+                    <template #content>
+                        <div class="flex flex-col gap-8 items-center justify-center text-center">
+                            <h1 class="font-extrabold text-5xl md:text-8xl text-primary">
+                                {{ props.status }}
+                            </h1>
+                            <h2 class="font-extrabold text-4xl md:text-6xl">
+                                {{ title }}
+                            </h2>
+                            <p class="text-xl font-semibold md:text-3xl text-muted-color">
+                                {{ description }}
+                            </p>
+                            <InertiaLink :href="props.homepageRoute">
+                                <Button
+                                    label="Back to homepage"
+                                    raised
+                                >
+                                    <template #icon>
+                                        <ArrowLeft />
+                                    </template>
+                                </Button>
+                            </InertiaLink>
+                        </div>
+                    </template>
+                </Card>
+            </div>
+        </main>
+    </Container>
 </template>