propagate notFound errors past a segment's error boundary (#60567)

### What?
Throwing a `notFound()` error inside of a segment that has an error
boundary will cause it to be handled by the segment's error boundary
rather than a parent not-found boundary.

### Why?
We assume anything that hits an `ErrorBoundary` is an actual error, but
this should not be the case when the caught error is one that is handled
by Next.js.

### How?
This checks if the caught error is one that is expected to be handled
someplace else.

Closes NEXT-2080
[slack
x-ref](https://vercel.slack.com/archives/C03S8ED1DKM/p1705003189392509?thread_ts=1704868742.169129&cid=C03S8ED1DKM)

packages/next/src/client/components/error-boundary.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import { usePathname } from './navigation'
+import { isNextRouterError } from './is-next-router-error'
 
 const styles = {
   error: {
@@ -73,6 +74,12 @@ export class ErrorBoundaryHandler extends React.Component<
   }
 
   static getDerivedStateFromError(error: Error) {
+    if (isNextRouterError(error)) {
+      // Re-throw if an expected internal Next.js router error occurs
+      // this means it should be handled by a different boundary (such as a NotFound boundary in a parent segment)
+      throw error
+    }
+
     return { error }
   }
 

test/e2e/app-dir/not-found-default/index.test.ts

@@ -21,13 +21,6 @@ createNextDescribe(
           )
           return 'success'
         }, /success/)
-      } else {
-        expect(await browser.elementByCss('h2').text()).toBe(
-          'Application error: a server-side exception has occurred (see the server logs for more information).'
-        )
-        expect(await browser.elementByCss('p').text()).toBe(
-          'Digest: NEXT_NOT_FOUND'
-        )
       }
     })
 
@@ -54,13 +47,6 @@ createNextDescribe(
         expect(await getRedboxDescription(browser)).toBe(
           'Error: notFound() is not allowed to use in root layout'
         )
-      } else {
-        expect(await browser.elementByCss('h2').text()).toBe(
-          'Application error: a server-side exception has occurred (see the server logs for more information).'
-        )
-        expect(await browser.elementByCss('p').text()).toBe(
-          'Digest: NEXT_NOT_FOUND'
-        )
       }
     })
 

test/e2e/app-dir/not-found/basic/app/error-boundary/error.js

@@ -0,0 +1,4 @@
+'use client'
+export default function Error() {
+  return <div>There was an error</div>
+}

test/e2e/app-dir/not-found/basic/app/error-boundary/nested/[dynamic]/page.js

@@ -0,0 +1,10 @@
+import { notFound } from 'next/navigation'
+import React from 'react'
+
+export default function Page({ params }) {
+  if (params.dynamic === 'trigger-not-found') {
+    notFound()
+  }
+
+  return <div>Hello World</div>
+}

test/e2e/app-dir/not-found/basic/app/error-boundary/nested/nested-2/error.js

@@ -0,0 +1,4 @@
+'use client'
+export default function Error() {
+  return <div>There was an error</div>
+}

test/e2e/app-dir/not-found/basic/app/error-boundary/nested/nested-2/page.js

@@ -0,0 +1,18 @@
+'use client'
+import { notFound } from 'next/navigation'
+import React from 'react'
+export default function Page() {
+  const [shouldError, setShouldError] = React.useState(false)
+  if (shouldError) {
+    notFound()
+  }
+  return (
+    <button
+      onClick={() => {
+        setShouldError(true)
+      }}
+    >
+      Trigger Not Found
+    </button>
+  )
+}

test/e2e/app-dir/not-found/basic/app/error-boundary/nested/not-found.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Not Found (error-boundary/nested)</h1>
+}

test/e2e/app-dir/not-found/basic/app/error-boundary/page.js

@@ -0,0 +1,18 @@
+'use client'
+import { notFound } from 'next/navigation'
+import React from 'react'
+export default function Page() {
+  const [shouldError, setShouldError] = React.useState(false)
+  if (shouldError) {
+    notFound()
+  }
+  return (
+    <button
+      onClick={() => {
+        setShouldError(true)
+      }}
+    >
+      Trigger Not Found
+    </button>
+  )
+}

test/e2e/app-dir/not-found/basic/index.test.ts

@@ -8,6 +8,23 @@ createNextDescribe(
     skipDeployment: true,
   },
   ({ next, isNextDev, isNextStart }) => {
+    it("should propagate notFound errors past a segment's error boundary", async () => {
+      let browser = await next.browser('/error-boundary')
+      await browser.elementByCss('button').click()
+      expect(await browser.elementByCss('h1').text()).toBe('Root Not Found')
+
+      browser = await next.browser('/error-boundary/nested/nested-2')
+      await browser.elementByCss('button').click()
+      expect(await browser.elementByCss('h1').text()).toBe(
+        'Not Found (error-boundary/nested)'
+      )
+
+      browser = await next.browser('/error-boundary/nested/trigger-not-found')
+      expect(await browser.elementByCss('h1').text()).toBe(
+        'Not Found (error-boundary/nested)'
+      )
+    })
+
     if (isNextStart) {
       it('should include not found client reference manifest in the file trace', async () => {
         const fileTrace = JSON.parse(