Nuxt 3 - 404 页面未找到错误和 H3Error 页面未找到

Question

每当用户访问不存在的页面时，我都会在日志中收到以下错误，我宁愿不记录每个未找到的页面。

[nuxt] 在应用程序初始化期间捕获错误 H3Error：找不到页面：/.git/config 在 createError (file:///var/www/site1/.output/server/node_modules/h3/dist/index.mjs:128:15) 在文件：///var/www/site1/.nuxt/dist/server/server.mjs:2154:47 在 triggerAfterEach (file:///var/www/site1/.output/server/node_modules/vue-router/dist/vue-router.mjs:3306:13) 在文件：///var/www/site1/.output/server/node_modules/vue-router/dist/vue-router.mjs:3209:13 在 processTicksAndRejections (node:internal/process/task_queues:96:5) 在文件：///var/www/site1/.nuxt/dist/server/server.mjs:2170:7 在 createNuxtAppServer（文件：///var/www/site1/.nuxt/dist/server/server.mjs:19902:7） 在 Object.renderToString (file:///var/www/site1/.output/server/node_modules/vue-bundle-renderer/dist/runtime.mjs:172:19) 在文件：///var/www/site1/node_modules/nuxt/dist/core/runtime/nitro/renderer.mjs:128:21 在文件：///var/www/site1/node_modules/nitropack/dist/runtime/renderer.mjs:12:22 { 状态码：404， 致命的：假的， 未处理：假， statusMessage: '找不到页面：/.git/config', __nuxt_error：真 }

我尝试使用此代码在名为 errorhandler.ts 的插件文件夹中创建一个插件，但它没有记录任何内容

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (error, context) => {
    console.log(error);
    console.log(context);
  };
});

这是一个例子https://stackblitz.com/edit/nuxt-starter-q2rvlp?file=plugins%2Ferrorhandler.ts.

任何人都可以分享一些关于处理 Nuxt 3 中未发现错误甚至创建自定义 404 页面的想法吗？

提前谢谢你！！！

Answer 1

基于错误处理文档,

“您可以通过在应用程序的源目录中添加

~/error.vue

和 app.vue 来自定义此错误页面。此页面有一个道具 -

error

，其中包含一个错误供您处理。”

这是一个例子 https://stackblitz.com/edit/nuxt-starter-q97lbh?file=error.vue

Answer 2

我还在玩这个错误处理，这是我在 [id].vue 文件上的 fetcher。

const { id } = useRoute().params

const { data: student, error } = await useMyFetch<IStudentApplicationDetail>(
  `/api/member-student-application/${id}`
)

if (error.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}

这是我的 error.ts 插件

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (error, context) => {
    console.log('🚀 ~ file: error.ts:6 ~ defineNuxtPlugin ~ context:', context)
    console.log('🚀 ~ file: error.ts:6 ~ defineNuxtPlugin ~ error:', error)
  }
})

通过这个错误处理，我在服务器端获得了控制台日志。这是完整的错误

🚀 ~ file: error.ts:6 ~ defineNuxtPlugin ~ context: {}                                                               23:28:22
🚀 ~ file: error.ts:6 ~ defineNuxtPlugin ~ error: H3Error: Page Not Found                                            23:28:22
    at Module.createError (file:///Users/januarfonti/Code/Clearview/asifa/asifa-member-fe/node_modules/h3/dist/index.mjs:128:15)
    at Module.createError (/Users/januarfonti/Code/Clearview/asifa/asifa-member-fe/node_modules/nuxt/dist/app/composables/error.js:37:38)
    at setup (/Users/januarfonti/Code/Clearview/asifa/asifa-member-fe/pages/admin/members/student-applications/view/[id].vue:43:35)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  statusCode: 404,
  fatal: false,
  unhandled: false,
  statusMessage: 'Page Not Found',
  __nuxt_error: true
}

我不确定它是否是一个好的错误处理程序，因为我仍然收到另一个错误，而不仅仅是 console.log