chore(ux): added a generic error page. Closes #619

knowii-oss · Sep 6, 2024 · 6712b6e · 6712b6e
1 parent a295adf
commit 6712b6e
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 25 deletions.
diff --git a/_TO_CONVERT_NOW/0knowii-old/errors.ts b/_TO_CONVERT_NOW/0knowii-old/errors.ts
diff --git a/apps/knowii/src/Pages/Error.tsx b/apps/knowii/src/Pages/Error.tsx
@@ -0,0 +1,70 @@
+import PageHeader from '@/Components/PageHeader';
+import { PageContentWrapper } from '@/Components/PageContentWrapper';
+import { Head, Link } from '@inertiajs/react';
+import FooterGuest from '@/Components/FooterGuest';
+import { HOME_URL, LOGOUT_URL } from '@knowii/common';
+import { Button } from 'primereact/button';
+import classNames from 'classnames';
+import { FaHome, FaSignOutAlt } from 'react-icons/fa';
+import { useRoute } from 'ziggy-js';
+
+interface Props {
+  status: string;
+}
+
+export default function Contact(props: Props) {
+  const route = useRoute();
+
+  const errorTitle = {
+    503: '503: Service Unavailable',
+    500: '500: Server Error',
+    404: '404: Page Not Found',
+    403: '403: Forbidden',
+  }[props.status];
+
+  const errorDescription = {
+    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];
+
+  return (
+    <>
+      <Head title={`Error: ${errorTitle}`} />
+
+      <div className="page-wrapper">
+        <PageHeader
+          compact={true}
+          addLinkOnLogo={true}
+          showDashboardButton={false}
+          showLogoutButton={false}
+          showLoginButton={false}
+          showRegisterButton={false}
+        />
+
+        <PageContentWrapper>
+          <div className="flex flex-col items-center">
+            <div className="min-w-full md:min-w-[75%] xl:min-w-[50%] p-6 mt-6 overflow-hidden prose bg-white shadow-md sm:max-w-2xl sm:rounded-lg">
+              <h1>{errorTitle}</h1>
+              <h2>{errorDescription}</h2>
+              <div className="mt-12 flex flex-row justify-center">
+                <a href={HOME_URL} className="">
+                  <Button aria-label={'Go back to the homepage'} severity="primary" className="">
+                    <FaHome />
+                    &nbsp;Go back to the homepage
+                  </Button>
+                </a>
+              </div>
+              <p className="mt-12 text-center">
+                If the problem persists, you can contact us at the following address:{' '}
+                <a href="mailto:contact@knowii.net">contact@knowii.net</a>
+              </p>
+            </div>
+          </div>
+          <FooterGuest />
+        </PageContentWrapper>
+      </div>
+    </>
+  );
+}
diff --git a/bootstrap/app.php b/bootstrap/app.php
@@ -3,22 +3,44 @@
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Inertia\Inertia;
 
 return Application::configure(basePath: dirname(__DIR__))
-    ->withRouting(
-        web: __DIR__.'/../routes/web.php',
-        api: __DIR__.'/../routes/api.php',
-        commands: __DIR__.'/../routes/console.php',
-        health: '/up',
-    )
-    ->withMiddleware(function (Middleware $middleware) {
-        $middleware->web(append: [
-            \App\Http\Middleware\HandleInertiaRequests::class,
-            \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
+  ->withRouting(
+    web: __DIR__ . '/../routes/web.php',
+    api: __DIR__ . '/../routes/api.php',
+    commands: __DIR__ . '/../routes/console.php',
+    health: '/up',
+  )
+  ->withMiddleware(function (Middleware $middleware) {
+    $middleware->web(append: [
+      \App\Http\Middleware\HandleInertiaRequests::class,
+      \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
+    ]);
+
+    //
+  })
+  // Health check endpoint: https://laravel.com/docs/11.x/releases#health
+  ->withRouting(
+    web: __DIR__.'/../routes/web.php',
+    commands: __DIR__.'/../routes/console.php',
+    health: '/up',
+  )
+  // Referencees
+  // https://inertiajs.com/error-handling
+  // https://laravel.com/docs/11.x/errors#handling-exceptions
+  ->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', ['status' => $response->getStatusCode()])->toResponse($request)->setStatusCode($response->getStatusCode());
+      } elseif ($response->getStatusCode() === 419) {
+        return back()->with([
+          'message' => 'The page expired, please try again.',
         ]);
+      }
 
-        //
-    })
-    ->withExceptions(function (Exceptions $exceptions) {
-        //
-    })->create();
+      return $response;
+    });
+  })->create();