add custom rendering for exceptions

blumilksoftware · Aug 6, 2024 · ea4843c · ea4843c
1 parent 5a3f5eb
commit ea4843c
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/bootstrap/app.php b/bootstrap/app.php
@@ -5,6 +5,9 @@
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Symfony\Component\HttpFoundation\Response;
 
 return Application::configure(basePath: dirname(__DIR__))
     ->withRouting(
@@ -16,4 +19,17 @@
     ->withMiddleware(function (Middleware $middleware): void {
     })
     ->withExceptions(function (Exceptions $exceptions): void {
+        $exceptions->respond(function (Response $response, Throwable $exception, Request $request) {
+            if (!app()->environment(["local", "testing"]) && in_array($response->getStatusCode(), [500, 503, 404, 403], true)) {
+                return Inertia::render("Errors/Error", ["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();
diff --git a/resources/js/Pages/Errors/Error.vue b/resources/js/Pages/Errors/Error.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import GuestLayout from '@/Layouts/GuestLayout.vue'
+import { Head } from '@inertiajs/vue3'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  status: number
+}>()
+
+const title = computed(() => {
+  return {
+    503: '503: Service Unaviable',
+    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>
+  <Head title="Error" />
+  <div class="flex flex-col justify-between h-full items-center">
+    <h2 class="text-2xl text-center"> {{ title }}</h2>
+    <p class="text-center my-auto">{{ description }}</p>
+    <a class="bg-blue-800 rounded-md block text-center text-white w-5/6 py-3 hover:bg-blue-700" href="/">Back</a>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  layout: GuestLayout,
+}
+</script>