Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-02 19:55:18 +02:00
Code Issues Releases Activity

feat: Add server error handling and SVG asset for 500 error page

Browse source
This commit is contained in:
Sean Morley 2025-04-18 21:55:30 -04:00
parent 1ea4022e80
commit 7499722867
2 changed files with 51 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/lib/assets/undraw_server_error.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="799.031" height="618.112" viewBox="0 0 799.031 618.112" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><g transform="translate(-893 -197)"><path d="M15.18,488.763c0,.872.478,1.573,1.073,1.573h535.1c.6,0,1.073-.7,1.073-1.573s-.478-1.573-1.073-1.573H16.253C15.658,487.191,15.18,487.891,15.18,488.763Z" transform="translate(1007.711 324.776)" fill="#ccc"/><rect width="19.105" height="3.371" transform="translate(1198.162 808.354)" fill="#b6b3c5"/><rect width="19.105" height="3.371" transform="translate(1367.295 808.917)" fill="#b6b3c5"/><path d="M352.955,370.945a27.529,27.529,0,0,1-54.321,0H229.146V521.536h193.3V370.945Z" transform="translate(966.721 287.378)" fill="#d6d6e3"/><rect width="193.296" height="5.242" transform="translate(1196.43 796.983)" fill="#090814"/><path d="M788.255,487.17H10.776A10.788,10.788,0,0,1,0,476.394V32.688A10.788,10.788,0,0,1,10.776,21.911H788.255a10.789,10.789,0,0,1,10.776,10.776V476.394a10.789,10.789,0,0,1-10.776,10.776Z" transform="translate(893 175.089)" fill="#090814"/><rect width="760.822" height="429.297" transform="translate(911.104 213.968)" fill="#fff"/><g transform="translate(20.477 16.308)"><path d="M604.463,379.271H317.442a8.655,8.655,0,0,1-8.645-8.645V273.8a8.655,8.655,0,0,1,8.645-8.645H604.463a8.655,8.655,0,0,1,8.645,8.645v96.826a8.655,8.655,0,0,1-8.645,8.645Z" transform="translate(811.648 85.826)" fill="#6c63ff"/><rect width="76.078" height="8.645" rx="2" transform="translate(1165.4 380.374)" fill="#fff"/><ellipse cx="5.187" cy="5.187" rx="5.187" ry="5.187" transform="translate(1336.576 380.374)" fill="#090814"/><ellipse cx="5.187" cy="5.187" rx="5.187" ry="5.187" transform="translate(1353.865 380.374)" fill="#090814"/><ellipse cx="5.187" cy="5.187" rx="5.187" ry="5.187" transform="translate(1371.156 380.374)" fill="#090814"/></g><ellipse cx="40.952" cy="40.952" rx="40.952" ry="40.952" transform="translate(1404.281 440.452)" fill="#090814"/><path d="M10.863-57.7l-.524-29.6h8.246l-.554,29.6Zm3.613,14.307a4.7,4.7,0,0,1-3.409-1.3,4.368,4.368,0,0,1-1.34-3.278,4.39,4.39,0,0,1,1.34-3.322,4.732,4.732,0,0,1,3.409-1.282,4.732,4.732,0,0,1,3.409,1.282,4.39,4.39,0,0,1,1.34,3.322,4.368,4.368,0,0,1-1.34,3.278A4.7,4.7,0,0,1,14.476-43.394Z" transform="translate(1430.76 546.754)" fill="#fff"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

50
frontend/src/routes/+error.svelte
View file

@ -2,6 +2,7 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import Lost from '$lib/assets/undraw_lost.svg';
import ServerError from '$lib/assets/undraw_server_error.svg';
</script>
{#if $page.status === 404}
@ -24,3 +25,52 @@
</div>
</div>
{/if}
{#if $page.status === 500}
<div
class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8"
>
<div class="mx-auto max-w-md text-center">
<img src={ServerError} alt="Lost in the forest" />
<h1 class="text-center text-5xl font-extrabold mt-2">
{$page.status}: {$page.error?.message}
</h1>
<h1 class="mt-4 text-xl font-bold tracking-tight text-foreground">
Oops, looks like something went wrong.
</h1>
<p class="mt-4">
AdventureLog server encountered an error while processing your request.
<br />
Please check the server logs for more information.
</p>
<div class="alert alert-warning mt-4">
<p class="text-muted-foreground">
<strong>Administrators:</strong> Please check your setup using the
<a class="link link-primary" target="_blank" href="https://adventurelog.app"
>documentation</a
>.
</p>
</div>
<!-- If the route is /login give a hint as an alert -->
{#if $page.url.pathname === '/login' || $page.url.pathname === '/signup'}
<div class="alert alert-info mt-4">
<p
class="text-muted
-foreground"
>
<strong>Hint:</strong> If you are an administrator, please check your PUBLIC_SERVER_URL
in the frontend config to make sure it can reach the backend.
<br />
</p>
</div>
{/if}
<div class="mt-6 flex flex-col items-center gap-4 sm:flex-row">
<button class="btn btn-neutral" on:click={() => goto('/')}>Go to Homepage</button>
</div>
</div>
</div>
{/if}