Improve logs to make life more easy by showing affected page / component at least

Describe the feature

I’m currently migrating my site built with Gridsome to Nuxt. In the process, I’m running into errors such as this

[nuxt] [request error] [unhandled] [500] nuxt instance unavailable
  at Module.useNuxtApp (./.nuxt/dist/server/server.mjs:479:13)
  at Module.useHead (./.nuxt/dist/server/server.mjs:1580:25)
  at $id_0ptq61qRX8 (./.nuxt/dist/server/server.mjs:3027:23)
  at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:7310:3)

From a dev perspective, this is a nightmare. I don’t know where to search first, but I have to go through all of my files by trial and error. I wish there would be even a vague hint of what it could be, and which page / component is causing it so finding the issue won’t take hours.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[danielroe]

This should now be the default option on edge releases, and if you aren’t there yet you can enable experimental.viteNode.

You will get an error that looks like this instead:

✔ Nitro built in 1764 ms
[Vue warn]: Unhandled error during execution of setup function 
  at <App>
[nuxt] [request error] [unhandled] [500] nuxt instance unavailable
  at Module.useNuxtApp (./node_modules/.pnpm/nuxt3@3.0.0-rc.8-27688153.422d5c4/node_modules/nuxt3/dist/app/nuxt.mjs:141:13)  
  at Module.useBad (./composables/bad.ts:5:37)  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async setup (./app.vue:17:3)

(You can also try looking at the line of the server.mjs in the console log and you should be able to see what component it is coming from.)

[mklueh]

Looks like it should possibly be named <RecommendationsBookRecommendationBox />

I didn’t know that sub directories have an impact on the component name. Thanks, I’ll try that