From 97aa5f8deb82a832b53325b8f1df61cf11426c6e Mon Sep 17 00:00:00 2001
From: abdulmohsen <admin@arabcoders.org>
Date: Sun, 19 May 2024 19:11:25 +0300
Subject: [PATCH] Added custom errors page.

---
 frontend/error.vue | 47 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 frontend/error.vue

diff --git a/frontend/error.vue b/frontend/error.vue
new file mode 100644
index 00000000..98aec5d1
--- /dev/null
+++ b/frontend/error.vue
@@ -0,0 +1,47 @@
+<template>
+  <NuxtLayout>
+    <div class="columns is-multiline">
+      <div class="column is-12">
+        <h1 class="title is-4">
+
+          {{ props.error.statusCode }}<span v-if="props.error.statusMessage"> - {{ props.error.statusMessage }}</span>
+        </h1>
+      </div>
+    </div>
+    <div class="column is-12" v-if="props.error.message">
+      <div class="notification has-background-warning-90 has-text-dark">
+        <p>{{ props.error.message }}</p>
+      </div>
+    </div>
+
+    <div class="column is-12" v-if="props.error.stack">
+      <h2 class="title is-5 is-clickable" @click="showStacks = !showStacks">
+        <span class="icon-text">
+          <span class="icon">
+            <i v-if="showStacks" class="fas fa-arrow-up"></i>
+            <i v-else class="fas fa-arrow-down"></i>
+          </span>
+          <span>Stack trace</span>
+        </span>
+      </h2>
+
+      <pre v-if="showStacks"><code>{{ props.error.stack }}</code></pre>
+    </div>
+
+    <div class="column is-12">
+      <h2 class="title is-5">
+        <NuxtLink to="/">
+          <span class="icon-text">
+            <span class="icon"><i class="fas fa-home"></i></span>
+            <span>Back to Home</span>
+          </span>
+        </NuxtLink>
+      </h2>
+    </div>
+  </NuxtLayout>
+</template>
+
+<script setup>
+const props = defineProps({'error': Object})
+const showStacks = ref(false)
+</script>