[feature request] improved error pages while developing

[Hebilicious]

Describe the feature

The DX for error page during development could be improved.

For example, here's a screenshot wrangler error when using wrangler dev

This is done using youch, which severals projects are using: wrangler, adonis, Nuxt 2 ...

It would be great if we could implement something similar while keeping the Nuxt 3 looks style wise. Maybe we could re-use the nuxt devtools styles for maximum consistency. Tagging @Barbapapazes in case you have some neat design ideas.

Due to the way h3 -> nitro -> nuxt + modules are interacting, this is probably harder to do than in Nuxt 2.

Nice features to have

Some of them are probably a little too crazy, just brainstorming here.

• Have CTAs to open nuxt docs and nuxt issues.
• Jump to IDE file (similar to nuxt-devtools, maybe through an integration?)
• "Smart detection" detect if the error comes from h3/nitro/nuxt/module and show the docs accordingly
• Have some small CTA (behind a details/toggle) to open an issue in h3/nitro/nuxt according to the error
• Maintain a list of known errors and show a link of the open issue when detected like https://github.com/nuxt/nuxt/issues/13309

Helpful libraries

https://github.com/poppinss/youch https://github.com/xpl/stacktracey

Nuxt 2 Reference

https://github.com/nuxt/youch https://github.com/nuxt/nuxt/blob/2.x/packages/server/src/middleware/error.js

Wrangler reference

https://github.com/cloudflare/workers-sdk/blob/main/packages/format-errors/README.md

Additional information

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

Final checks

• [X] Read the contribution guide.
• [X] Check existing discussions and issues.

[danielroe]

cc: @pi0 who was planning previously to tackle this.

(I think there is also an issue somewhere tracking this.)

[pi0]

There are two parts to this:

Better UI (Interactive)

An (interactive) new error page similar to youch. I prefer if we can rewrite it because working on the legacy codebase of youch it wasn't easy to maintain.

We can develop it in nuxt/assets using vue-petit and nuxt UI components or a bundled vite app since I guess nuxt branding is essential (otherwise also happy to consider it as part of unjs and reuse for nitro designs too).

Nuxt devtools might also be a good starting point to prototype UI since it includes setup for building UI and can "replace" default error pages using hooks. /cc @antfu wdyt?

Better Stack Traces

A source map consumption layer that we use both for Nitro and Nuxt stack traces. It shouldn't be a blocker for this issue but coupling them together might be nice. In Nuxt 2 we were using a fork of youch + lots of (ugly) code in core to do this. I prefer to work on a clean solution this time and is definitely on my tasklist.

[Hebilicious]

There are two parts to this:

Better UI (Interactive)

An (interactive) new error page similar to youch. I prefer if we can rewrite it because working on the legacy codebase of youch it wasn't easy to maintain.

We can develop it in nuxt/assets using vue-petit and nuxt UI components or a bundled vite app since I guess nuxt branding is essential (otherwise also happy to consider it as part of unjs and reuse for nitro designs too).

Nuxt devtools might also be a good starting point to prototype UI since it includes setup for building UI and can "replace" default error pages using hooks. /cc @antfu wdyt?

Better Stack Traces

A source map consumption layer that we use both for Nitro and Nuxt stack traces. It shouldn't be a blocker for this issue but coupling them together might be nice. In Nuxt 2 we were using a fork of youch + lots of (ugly) code in core to do this. I prefer to work on a clean solution this time and is definitely on my tasklist.

So if I understand correctly, you would suggest rewriting something like youch as part of the unjs org ?

Maybe that can be built with nuxt itself, similarly to the devtools client UI ? For customisation we could allow simple css vars/custom assets configuration options, but also make it easy for people to create their own client with something similar to @nuxt/kit. Which means that for nuxt branding, we could re-use the devtools-ui-kit styles.

For the 2nd part, would https://github.com/xpl/stacktracey fit your requirements? Or would you also want to build an unjs custom solution ?

[Barbapapazes]

Hello,

Here an exemple of something that can be improve.

I'm working on a project where I made 4 requests (each function is a useFetch with some validation):

<script lang="ts" setup>
const { data: repos } = await fetchReposCount()
const { data: followers } = await fetchFollowersLatest()
const { data: stars } = await fetchStarsLatest()
const { data: downloads } = await fetchDownloadsLatest()
</script>

When I have an error on one fetch, the log looks like this:

[nuxt] [request error] [unhandled] [500] expected type to be object but got null
  at ObjectType.typeError (./node_modules/.pnpm/[email protected]/node_modules/myzod/libs/types.js:68:16)
  at ObjectType.parse (./node_modules/.pnpm/[email protected]/node_modules/myzod/libs/types.js:546:24)
  at ReactiveEffect.fn (./composables/followers.ts:26:8)
  at ReactiveEffect.run (./node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:182:19)
  at get value [as value] (./node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1131:33)
  at unref (./node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1014:29)
  at Object.get (./node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:1020:35)
  at ./pages/index.vue:68:20
  at renderFnWithContext (./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:767:13)
  at ssrRenderSlotInner (./node_modules/.pnpm/@[email protected][email protected]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:113:17)

And it's very difficult to know where the error is thrown. In the middle of the log, we can read ./composables/followers.ts et later /pages/index.vue.