Error name is always overridden with "Error"

[skolodyazhnyy]

Link to the code that reproduces this issue

https://github.com/skolodyazhnyy/nextjs-error-name-overridden

To Reproduce

1. Start application dev server: npm run dev
2. Open /demo page

Current vs. Expected behavior

Current behavior:

• Page throws an error with err.name = "PermissionDeniedError"
• Error component renders err.name as "Error"

Expected behavior:

• Page throws an error with err.name = "PermissionDeniedError"
• Error component receives error name unchanged: err.name = "PermissionDeniedError"

Which area(s) are affected? (Select all that apply)

Runtime

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

I want to render different illustration and localised error message in my error.tsx depending on the error type. The issue is that there is no way to differentiate errors except by analyzing the error message itself, which is often dynamic and prone to changes overtime.

Currently I have to do something like err.message.includes("permission denied") || err.message.includes("access denied") || err.message.includes("forbidden") which is messy to say the least.

[skolodyazhnyy]

Everything is much worse, in prod all errors are opaque there is not even message to check. Now it makes much more sense that all i see is a generic error screen in production, even if the error is as trivial as "Unauthenticated" 🤦

I stumbled at #49506, bottom line there is no solution except to add error handling code on every page.