feat(nuxt): add formal error page

This commit is contained in:
parent c9be671507
commit 6dfabd87d0
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
2 changed files with 53 additions and 0 deletions

43
components/errorBound.vue Normal file

@ -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>

10
error.vue Normal file

@ -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>