From 625bcc38825fa9080ba57ac3477ac40be552f534 Mon Sep 17 00:00:00 2001
From: glazk0 <43091603+glazk0@users.noreply.github.com>
Date: Tue, 17 Sep 2024 19:14:19 +0200
Subject: [PATCH] feat: better issues handling

---
 src/hooks.client.ts      | 12 ++++++++++++
 src/hooks.server.ts      | 14 ++++++--------
 src/routes/+error.svelte | 13 ++++++-------
 3 files changed, 24 insertions(+), 15 deletions(-)
 create mode 100644 src/hooks.client.ts

diff --git a/src/hooks.client.ts b/src/hooks.client.ts
new file mode 100644
index 0000000..13a16f4
--- /dev/null
+++ b/src/hooks.client.ts
@@ -0,0 +1,12 @@
+import type { HandleClientError } from "@sveltejs/kit";
+
+export const handleError: HandleClientError = ({ error, status }) => {
+  const errorId = crypto.randomUUID();
+
+  console.error(`Client - Error ID: ${errorId} - Status: ${status} - ${error}`);
+
+  return {
+    message: 'Whoops!',
+    errorId,
+  };
+};
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 5de6ebc..ef6fc79 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -5,12 +5,11 @@ import { API_URL } from '$env/static/private';
 import type { User } from '$lib/types';
 
 export const handle: Handle = async ({ event, resolve }) => {
-
 	const session = event.cookies.get('session');
 
 	if (!session) {
 		event.locals.user = undefined;
-		return resolve(event);
+		return await resolve(event);
 	}
 
 	const res = await fetch(`${API_URL}/player/`, {
@@ -22,7 +21,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 	if (!res.ok) {
 		event.locals.user = undefined;
 		event.cookies.delete('session', { path: '/' });
-		return resolve(event);
+		return await resolve(event);
 	}
 
 	try {
@@ -33,11 +32,10 @@ export const handle: Handle = async ({ event, resolve }) => {
 		event.cookies.delete('session', { path: '/' });
 	}
 
-	return resolve(event);
+	return await resolve(event);
 };
 
-export const handleFetch: HandleFetch = async ({ request, fetch, event: { cookies } }) => {
-
+export const handleFetch: HandleFetch = ({ request, fetch, event: { cookies } }) => {
 	const session = cookies.get('session');
 
 	if (!session) {
@@ -53,10 +51,10 @@ export const handleFetch: HandleFetch = async ({ request, fetch, event: { cookie
 	return fetch(request);
 }
 
-export const handleError: HandleServerError = async ({ error, status }) => {
+export const handleError: HandleServerError = ({ error, status }) => {
 	const errorId = crypto.randomUUID();
 
-	console.error(`Error ID: ${errorId} - Status: ${status} - ${error}`);
+	console.error(`Server - Error ID: ${errorId} - Status: ${status} - ${error}`);
 
 	return {
 		message: 'Whoops!',
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 54061c8..1bdfb20 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+	import { page } from '$app/stores';
 
-	import Button from '$lib/components/ui/button/button.svelte';
+	import { Button } from '$lib/components/ui/button';
 </script>
 
 <div class="flex min-h-screen items-center justify-center">
-	<div class="text-center">
+	<div class="flex flex-col gap-4 text-center">
 		<h1 class="text-6xl font-bold text-red-500">Oops!</h1>
-		<p class="mt-4 text-xl">Apparement tu as navigué en eau trouble...</p>
-		<Button class="mt-4" href="/">Retour au port</Button>
-		<p class="mt-4 text-xs text-muted-foreground">{$page.error?.message}</p>
-		<p class="mt-4 text-xs text-muted-foreground">{$page.error?.errorId}</p>
+		<p class="text-xl">Apparement tu as navigué en eau trouble...</p>
+		<Button href="/">Retour au port</Button>
+		<span class="text-xs text-muted-foreground">Error ID: {$page.error?.errorId}</span>
 	</div>
 </div>