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

[mklueh]

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]

Hi @danielroe , that indeed helped quite a bit, but not to that extend I would like. For example:

[nuxt] [request error] [unhandled] [500] Invalid value used as weak map key
  at WeakMap.set (<anonymous>)
  at normalizePropsOptions (/home/user/workspace/my-app/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3966:11)
  at createComponentInstance (/home/user/workspace/my-app/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6957:23)
  at renderComponentVNode (/home/user/workspace/my-app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:171:22)
  at Module.ssrRenderComponent (/home/user/workspace/my-app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:608:12)
  at _sfc_ssrRender (./pages/blog/[slug].vue:145:32)
  at renderComponentSubTree (/home/user/workspace/my-app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:253:13)
  at /home/user/workspace/my-app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:185:29
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async unrollBuffer (/home/user/workspace/my-app/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:405:24)

Now I know there is a problem in the blog page, but what exactly? If I use dozens of components within that page, there might as well be a problem within one of those components that results in an error of the actual page.

It is not even clear to me what a weak map key actually is, to be honest, and what value is meant is also unclear to me.

Can't there be something simple like "Could not load page x because of component y having issue z"?

[danielroe]

@mklueh This is actually a bug in Vue I have an open PR to fix: vuejs/core#6266. It is triggered by using a component on the server that isn't registered on the server. If you look a few lines up in the log you should see what component it is: #11740

[mklueh]

@danielroe in my case it seems at least this time it is related to a missing import statement, although I thought auto imports should make it work without it.

not working

<template>
  <section id="sidebar"
           class="relative h-full w-full bg-gray-100 md:bg-transparent
           md:w-1/5 md:max-w-sm flex flex-col md:px-2 md:pt-12 md:ml-2">
    <div class="block md:absolute right-0">
      <BookRecommendationBox/>
    </div>
  </section>
</template>
<script setup>
</script>

working

<template>
  <section id="sidebar"
           class="relative h-full w-full bg-gray-100 md:bg-transparent
           md:w-1/5 md:max-w-sm flex flex-col md:px-2 md:pt-12 md:ml-2">
    <div class="block md:absolute right-0">
      <BookRecommendationBox/>
    </div>
  </section>
</template>
<script setup>
import BookRecommendationBox from "../recommendations/BookRecommendationBox";
</script>

It is only happening in this case, while other components work with auto imports most of the time.

[danielroe]

Looks like it should possibly be named <RecommendationsBookRecommendationBox />

[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