Not-found & Error behaviour not clear in docs

[danLDev]

We've recently been migrating to the app router, not-found and error.tsx caused us a bit of confusion.

Based on the docs The notFound function allows you to render the not-found file within a route segment, with the behaviour seeming to be that we could bubble up the tree until we hit a not-found.tsx handler.

This all worked fine for us to begin with, we opted for a top level app/not-found.tsx and app/error.tsx as catch all pages, and some slightly more granular not-found pages app/(storefront)/not-found.tsx.

Everything was great and behaving as we expected, if notFound() was called deep in the tree IE:app/(storefront)/products/[handle]/page.tsx then the error would bubble up to the nearest parent not-found.tsx, if an error was thrown then it would bubble up to the nearest parent error.tsx

We then had a requirement to add some granular error handling scenarios deep in the tree at /products/[handle]/error.tsx which broke everything, as calling notFound() from here now gets caught in the error.tsx in the same segment... catching Error: NEXT_NOT_FOUND

app/
  not-found.tsx
  (storefront)/
    not-found.tsx // Would have expected it to be caught here
    products/
        [handle]/
             page.tsx // call notFound() here
             error.tsx // Caught here??

This behaviour seems completely counter-intuitive, and means that we need to duplicate the not-found component everywhere we have an error component.

[SidKH]

Hey 👋

I tried to recreate the described issue in the Stackblitz.
The call to notFound() in products/[handle]/page.tsx gets caught by (storefront)/not-found.tsx

CleanShot.2024-02-15.at.16.29.58.mp4

https://stackblitz.com/edit/stackblitz-starters-m8uujb?file=app%2F(storefront)%2Fproducts%2F[handle]%2Fpage.tsx

[danLDev]

Hey @SidKH, thanks for the repro, noticed we're on 14.0.4... bumping to 14.1.0 as in your example fixed the issue 🙃

Appears to have been solved in #60567

Thanks!