How to handle unexpected errors thrown within the root layout in a Next 14 application?

[karimyilmaz]

Summary

I want to handle unexpected errors in my Next 14 application. My goal is to have a global error fallback UI that will handle all errors thrown within my root layout.

Based on the documentation, I could create a global error file inside my app directory which is responsible for handling all unexpected errors.

My project directory looks like the following:

While my global error page component:

For testing purposes, I threw an error inside my About page.

I expected the global error page component to get executed and replace the root layout. Instead, I got the following:

Am I doing something wrong?

Additional information

No response

Example

No response

[icyJoseph]

Is the problem, perhaps, that the About page is in another route group?

[karimyilmaz]

No, because I recently tried to throw an error inside the home page I got the same result. The global error page component didn't execute.
Based on the documentation, the global error will handle all errors thrown inside of the root layout; this means even if the about page is in another route group it is expected for the global error to handle errors thrown inside of the about page as well since the about page eventually is rendering inside of the root layout.

[icyJoseph]

Could you just verify one more thing?

In the docs it also says:

global-error.js is only enabled in production. In development, our error overlay will show instead.

Could you build, your app, and try again?

[karimyilmaz]

It worked after building. Thank you.
Do the same applies for error.js?

[icyJoseph]

I think, in that case, you'll get the error overlay, and when closing it, you should see the error boundary, IIRC