feat(nuxt): add formal error page
This commit is contained in:
parent
c9be671507
commit
6dfabd87d0
43
components/errorBound.vue
Normal file
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
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>
|
Loading…
Reference in New Issue
Block a user