Hey @Blood cockle, as far as I know, in Next.js, Server Components cannot use error boundaries directly like Client Components, so errors thrown within a Server Component trigger the default 500 error page. To ensure that error.tsx is rendered instead, you need to manually catch errors in the Server Component and pass them to a Client Component that throws the error. Your approach of wrapping the fetch logic in a try/catch block and returning an <ErrorWrapper> Client Component is correct! In ErrorWrapper, which must be marked with "use client", simply throw error to trigger Next.js’ built-in error handling and render error.tsx. This method effectively bridges error handling between Server and Client Components while keeping Next.js' default behavior intact. If you need any further clarification, feel free to ask!

Thank you very much for your time and reply @Bertholdt Hoover I think I got the idea now and will continue to test this. As a side note. I think there is no way to use error.tsx on root layout level. E.g. if I have header component that fetches data to navbar. If fetcher gives error I need to use global-error.tsx if I've understood correctly?

Yes, you're correct! error.tsx works at the route segment level, so if your Header component (inside layout.tsx) fetches data and fails, the error won’t be caught by an error.tsx file. Instead, you need global-error.tsx, which acts as a global error boundary and handles errors occurring in the root layout and shared components like the Navbar.

@Bertholdt Hoover I was doing some more testing / studying and now I am confused again... Now when I use generateStaticParams with empty array, it means that the page is generated when its first visited - right? Based on my testing, it seems to be the reason why error.tsx isn't working without a wrapper. If I remove the generateStaticParams it seems that I dont need the error wrapper and I can just throw an error from server component?

@Blood cockle Yeah, you're right. By default, Next.js treats pages using generateStaticParams as static and pre-renders them at build time. This impacts error.tsx because errors occurring during on-demand generation (when the page is first visited) are not automatically caught. However, if you remove generateStaticParams, Next.js treats the page as dynamic (you can also explicitly set force-dynamic: true), allowing errors to be caught by error.tsx without requiring an explicit error boundary wrapper. Essentially, using generateStaticParams changes the rendering behavior and prevents error.tsx from handling errors as expected, whereas removing it enables direct error handling in a server component. Let me know if you need further clarification!

@Bertholdt Hoover thanks for your replies. Something just doesn't click in my head with this and I don't still fully understand why NextJS cant handle the errors if the page is generated when first visited, but it can when the page is dynamic. I don't probably understand the build related stuff that deeply. I don't fully understand why NextJS cant use error.tsx when it treats a page static. Both are generated on the server? And there is something that NextJS cant use when it treats page as static page, but what is the missing link in this static vs dynamic thing that I am missing? 😄

Good question, let me put it simple for you.

Static pages (using generateStaticParams) are pre-built or generated on the first request and cached, so errors during this process aren’t handled by error.tsx. Dynamic pages (without generateStaticParams) are generated on every request, allowing error.tsx to catch errors properly. Since static pages aren’t reprocessed on each request, Next.js doesn’t handle their errors the same way as dynamic pages. Let me know if you still have any questions—happy to help further!

Also, the part where you mentioned not understanding build-related stuff isn’t a big deal. During the build process, Next.js generates files and stores them in the .next folder, which are then served upon request. Static pages are pre-rendered once, and their responses are cached for future requests, while dynamic pages are not pre-rendered and are processed on every new request.

Does this pre rendered term apply also if the the generateStaticParams returns empty array - meaning is generated when first visited? So there is a difference how nextJS generates the pages? I undestand if the static pages would be generated during build time, but with empty array it should generate the page when first visidet? Does NextJS generate it still differently which makes error.tsx "out of reach"

Yes, Next.js does differ in how it generates pages. If generateStaticParams returns an empty array, the page is not pre-rendered during build time but rather generated on the first visit and cached. But although it's generated on demand, Next.js still considers it a static page, so it uses static generation rules instead of dynamic rendering. This is the reason why error.tsx doesn't behave as expected, it’s outside the standard request lifecycle used for dynamic pages (where it will process and serve the page on every new request).

Now I got it 👍 . Thank you very much for the help @Bertholdt Hoover

@Blood cockle Glad it clicked! 👍 Happy to help anytime!