Nuxt/packages/nuxt/src/app/components/nuxt-error-page.vue
renovate[bot] 754955545e
chore(deps): update all non-major dependencies (main) (#22866)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>
2023-09-05 12:27:41 +01:00

48 lines
1.6 KiB
Vue

<template>
<ErrorTemplate v-bind="{ statusCode, statusMessage, description, stack }" />
</template>
<script setup>
import { defineAsyncComponent } from 'vue'
const props = defineProps({
error: Object
})
// Deliberately prevent reactive update when error is cleared
const _error = props.error
// TODO: extract to a separate utility
const stacktrace = (_error.stack || '')
.split('\n')
.splice(1)
.map((line) => {
const text = line
.replace('webpack:/', '')
.replace('.vue', '.js') // TODO: Support sourcemap
.trim()
return {
text,
internal: (line.includes('node_modules') && !line.includes('.cache')) ||
line.includes('internal') ||
line.includes('new Promise')
}
}).map(i => `<span class="stack${i.internal ? ' internal' : ''}">${i.text}</span>`).join('\n')
// Error page props
const statusCode = Number(_error.statusCode || 500)
const is404 = statusCode === 404
const statusMessage = _error.statusMessage ?? (is404 ? 'Page Not Found' : 'Internal Server Error')
const description = _error.message || _error.toString()
const stack = import.meta.dev && !is404 ? _error.description || `<pre>${stacktrace}</pre>` : undefined
// TODO: Investigate side-effect issue with imports
const _Error404 = defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-404.vue').then(r => r.default || r))
const _Error = import.meta.dev
? defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-dev.vue').then(r => r.default || r))
: defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-500.vue').then(r => r.default || r))
const ErrorTemplate = is404 ? _Error404 : _Error
</script>