From 6dfabd87d08f20c1d380bd30ee1eea90201fd2be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Sat, 9 Dec 2023 17:03:36 -0500
Subject: [PATCH] feat(nuxt): add formal error page

---
 components/errorBound.vue | 43 +++++++++++++++++++++++++++++++++++++++
 error.vue                 | 10 +++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 components/errorBound.vue
 create mode 100644 error.vue

diff --git a/components/errorBound.vue b/components/errorBound.vue
new file mode 100644
index 0000000..3a793b1
--- /dev/null
+++ b/components/errorBound.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+	const p = defineProps<{ error: any }>();
+	const unError = {
+		...p.error,
+		stack: undefined,
+	};
+
+	const copied = `
+\`${JSON.stringify(unError, null, "\t")}\`
+
+---
+
+Stack trace:
+
+\`\`\`
+${p.error.stack}
+\`\`\`
+`;
+</script>
+<template>
+	<a-typography-title> We ran into an issue.... :( <br /> </a-typography-title>
+	<a-typography-paragraph
+		style="font-size: 125%"
+		:copyable="{
+			text: copied,
+			tooltip: true,
+			onCopy: () => {
+				setTimeout(() => {
+					clearError({ redirect: '/' });
+					navigateTo('/');
+				}, 30000);
+			},
+		}"
+	>
+		<a-typography-text code>
+			{{ JSON.stringify(unError, null, "\t") }}
+		</a-typography-text>
+		<a-typography-title :level="4"> Stack trace: </a-typography-title>
+		<a-typography-text>
+			<a-typography-text v-html="error.stack"> </a-typography-text>
+		</a-typography-text>
+	</a-typography-paragraph>
+</template>
diff --git a/error.vue b/error.vue
new file mode 100644
index 0000000..316c1f9
--- /dev/null
+++ b/error.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+	import errorBound from "~/components/errorBound.vue";
+	const p = defineProps<{ error: any }>();
+</script>
+
+<template>
+	<NuxtLayout>
+		<error-bound :error="error" />
+	</NuxtLayout>
+</template>