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>