feat(error): add stacktrace

components/VioError.vue

@@ -1,17 +1,26 @@
 <template>
-  <h1>{{ statusCode ? `${statusCode} - ` : '' }}{{ statusReason }}</h1>
+  <h1>{{ `${statusCode} - ${statusReason}` }}</h1>
+  <div>
+    {{ description }}
+  </div>
+  <div v-if="stack && !runtimeConfig.public.isInProduction" v-html="stack" />
 </template>
 
 <script setup lang="ts">
 import { status } from '@http-util/status-i18n'
 
 export interface Props {
-  statusCode?: number
+  statusCode: number
+  statusMessage?: string
+  description: string
+  stack?: string
 }
 const props = withDefaults(defineProps<Props>(), {
-  statusCode: undefined,
+  statusMessage: undefined,
+  stack: undefined,
 })
 
+const runtimeConfig = useRuntimeConfig()
 const { locale, t } = useI18n()
 
 // computations

error.vue

@@ -1,21 +1,23 @@
 <template>
   <NuxtLayout>
     <VioError
-      :status-code="error?.statusCode ? +error?.statusCode : undefined"
+      :status-code="error.statusCode"
+      :status-message="error.statusMessage"
+      :description="error.message"
+      :stack="error.stack"
     />
   </NuxtLayout>
 </template>
 
 <script setup lang="ts">
-export type Error = { statusCode: string }
+import { NuxtError } from 'nuxt/app'
+
 export interface Props {
-  error?: Error
+  error: NuxtError
 }
-const props = withDefaults(defineProps<Props>(), {
-  error: undefined,
-})
+const props = withDefaults(defineProps<Props>(), {})
 
 useHead({
-  title: props.error?.statusCode?.toString(),
+  title: `${props.error.statusCode} - ${props.error.message}`,
 })
 </script>

nuxt.config.ts

@@ -41,6 +41,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       googleAnalyticsId: '', // set via environment variable `NUXT_PUBLIC_GOOGLE_ANALYTICS_ID` only
+      isInProduction: process.env.NODE_ENV === 'production',
       isTesting: false,
       ...{
         siteName: SITE_NAME,