Fix custom 404 page when concurrentFeatures is enabled #31059

huozhi · 2021-11-05T22:32:55Z

This fix the custom 404 is not rendering properly and can’t be built in web runtime when concurrentFeatures is enabled. We force 404 page to be rendered outside of middleware ssr. Then it could be the real fallback 404 page in next-server when any routes is not macthed.
Will check 500 related after #31057 is landed.

Bug

Related to Error routes (404, 500) in React Server Components #30989
Integration tests added

packages/next/server/dev/next-dev-server.ts

packages/next/server/dev/on-demand-entry-handler.ts

packages/next/server/next-server.ts

packages/next/build/index.ts

packages/next/build/entries.ts

packages/next/build/webpack/plugins/middleware-plugin.ts

packages/next/server/dev/hot-reloader.ts

packages/next/server/dev/on-demand-entry-handler.ts

ijjk · 2021-11-06T01:25:47Z

Failing test suites

Commit: baf7ef4

test/development/basic/misc.test.ts

misc basic dev tests > Development Logs > should warn when prefetch is true
misc basic dev tests > Development Logs > should not warn when prefetch is false

Expand output

● misc basic dev tests › Development Logs › should warn when prefetch is true

thrown: "Exceeded timeout of 90000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  89 |   }
  90 |   describe('Development Logs', () => {
> 91 |     it('should warn when prefetch is true', async () => {
     |     ^
  92 |       const foundLog = await getLogs$('/development-logs')
  93 |       expect(foundLog).toBe(true)
  94 |     })

  at development/basic/misc.test.ts:91:5
  at development/basic/misc.test.ts:90:3
  at Object.<anonymous> (development/basic/misc.test.ts:8:1)

● misc basic dev tests › Development Logs › should not warn when prefetch is false

thrown: "Exceeded timeout of 90000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  93 |       expect(foundLog).toBe(true)
  94 |     })
> 95 |     it('should not warn when prefetch is false', async () => {
     |     ^
  96 |       const foundLog = await getLogs$(
  97 |         '/development-logs/link-with-prefetch-false'
  98 |       )

  at development/basic/misc.test.ts:95:5
  at development/basic/misc.test.ts:90:3
  at Object.<anonymous> (development/basic/misc.test.ts:8:1)

test/integration/react-streaming-and-server-components/test/index.test.js

CSS dev > should include global styles under concurrentFeatures: true
CSS dev > should include global styles with serverComponents: true
CSS prod > should include global styles under concurrentFeatures: true
CSS prod > should include global styles with serverComponents: true
concurrentFeatures - dev > should support React.lazy and dynamic imports
concurrentFeatures - dev > should render the correct html
concurrentFeatures - dev > should suspense next/link on server side
concurrentFeatures - dev > should suspense next/image on server side
concurrentFeatures - dev > should support multi-level server component imports
concurrentFeatures - prod > should have clientInfo in middleware manifest
concurrentFeatures - prod > should support React.lazy and dynamic imports
concurrentFeatures - prod > should render the correct html
concurrentFeatures - prod > should suspense next/link on server side
concurrentFeatures - prod > should suspense next/image on server side
concurrentFeatures - prod > should support multi-level server component imports

Expand output

● concurrentFeatures - prod › should have clientInfo in middleware manifest

expect(received).not.toContainEqual(expected) // deep equality

Matcher error: received value must not be null nor undefined

Received has value: undefined

  165 |   it('should support React.lazy and dynamic imports', async () => {
  166 |     const html = await renderViaHTTP(context.appPort, '/dynamic-imports')
> 167 |     expect(html).toContain('loading...')
      |                                        ^
  168 |
  169 |     const browser = await webdriver(context.appPort, '/dynamic-imports')
  170 |     const content = await browser.eval(`window.document.body.innerText`)

  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:167:40)

● concurrentFeatures - prod › should support React.lazy and dynamic imports

expect(received).toContain(expected) // indexOf

Expected substring: "foo.client"
Received string:    "<!DOCTYPE html><html><head><meta name=\"next-font-preconnect\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>500: Internal Server Error</title><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills-5cd94c89d3acac5f.js\"></script><script src=\"/_next/static/chunks/webpack-201c32d1ff6cb7d4.js\" defer=\"\"></script><script src=\"/_next/static/chunks/framework-c6501f8788ee8509.js\" defer=\"\"></script><script src=\"/_next/static/chunks/main-9bcd60940ab1732e.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app-47092cf4a80fec66.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_error-de35badb0969ed89.js\" defer=\"\"></script><script src=\"/_next/static/HXpbxTbAiEc4_GOGXKn7D/_buildManifest.js\" defer=\"\"></script><script src=\"/_next/static/HXpbxTbAiEc4_GOGXKn7D/_ssgManifest.js\" defer=\"\"></script><script src=\"/_next/static/HXpbxTbAiEc4_GOGXKn7D/_middlewareManifest.js\" defer=\"\"></script></head><body><div id=\"__next\"><div style=\"color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center\"><div><style>body { margin: 0 }</style><h1 style=\"display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top\">500<!-- --></h1><div style=\"display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle\"><h2 style=\"font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0\">Internal Server Error<!-- -->.<!-- --></h2></div></div></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"HXpbxTbAiEc4_GOGXKn7D\",\"isFallback\":false,\"err\":{\"name\":\"Internal Server Error.\",\"message\":\"500 - Internal Server Error.\",\"statusCode\":500},\"gip\":true,\"scriptLoader\":[]}</script></body></html>"

  177 | const cssSuite = {
  178 |   runTests: css,
> 179 |   before: () => appPage.write(appWithGlobalCss),
      |                 ^
  180 |   after: () => appPage.delete(),
  181 | }
  182 |

  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:179:17)

● concurrentFeatures - prod › should render the correct html

expect(received).toContain(expected) // indexOf

Expected substring: "thisistheindexpage.server"
Received string:    "<!DOCTYPE html><html><head><meta name=\"next-font-preconnect\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>500: Internal Server Error</title><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills-5cd94c89d3acac5f.js\"></script><script src=\"/_next/static/chunks/webpack-201c32d1ff6cb7d4.js\" defer=\"\"></script><script src=\"/_next/static/chunks/framework-c6501f8788ee8509.js\" defer=\"\"></script><script src=\"/_next/static/chunks/main-9bcd60940ab1732e.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app-47092cf4a80fec66.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_error-de35badb0969ed89.js\" defer=\"\"></script><script src=\"/_next/static/HXpbxTbAiEc4_GOGXKn7D/_buildManifest.js\" defer=\"\"></script><script src=\"/_next/static/HXpbxTbAiEc4_GOGXKn7D/_ssgManifest.js\" defer=\"\"></script><script src=\"/_next/static/HXpbxTbAiEc4_GOGXKn7D/_middlewareManifest.js\" defer=\"\"></script></head><body><div id=\"__next\"><div style=\"color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center\"><div><style>body { margin: 0 }</style><h1 style=\"display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top\">500<!-- --></h1><div style=\"display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle\"><h2 style=\"font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0\">Internal Server Error<!-- -->.<!-- --></h2></div></div></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"HXpbxTbAiEc4_GOGXKn7D\",\"isFallback\":false,\"err\":{\"name\":\"Internal Server Error.\",\"message\":\"500 - Internal Server Error.\",\"statusCode\":500},\"gip\":true,\"scriptLoader\":[]}</script></body></html>"

  257 |
  258 | function runSuite(suiteName, env, { runTests, before, after }) {
> 259 |   const context = { appDir }
      |                    ^
  260 |   describe(`${suiteName} ${env}`, () => {
  261 |     if (env === 'prod') {
  262 |       beforeAll(async () => {

  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:259:20)

● concurrentFeatures - prod › should suspense next/link on server side

expect(received).toContain(expected) // indexOf

Expected substring: "go home"
Received string:    ""

  266 |       })
  267 |     }
> 268 |     if (env === 'dev') {
      |                      ^
  269 |       beforeAll(async () => {
  270 |         before?.()
  271 |         context.appPort = await findPort()

  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:268:22)

● concurrentFeatures - prod › should suspense next/image on server side

expect(received).toContain(expected) // indexOf

Matcher error: received value must not be null nor undefined

Received has value: undefined

  272 |         context.server = await nextDev(context.appDir, context.appPort)
  273 |       })
> 274 |     }
      |      ^
  275 |     afterAll(async () => {
  276 |       after?.()
  277 |       await killApp(context.server)

  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:274:6)

● concurrentFeatures - prod › should support multi-level server component imports

expect(received).toContain(expected) // indexOf

Expected substring: "bar.server.js:"
Received string:    "<!DOCTYPE html><html><head><meta name=\"next-font-preconnect\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>500: Internal Server Error</title><meta name=\"next-head-count\" content=\"3\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills-5cd94c89d3acac5f.js\"></script><script src=\"/_next/static/chunks/webpack-201c32d1ff6cb7d4.js\" defer=\"\"></script><script src=\"/_next/static/chunks/framework-c6501f8788ee8509.js\" defer=\"\"></script><script src=\"/_next/static/chunks/main-9bcd60940ab1732e.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app-47092cf4a80fec66.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_error-de35badb0969ed89.js\" defer=\"\"></script><script src=\"/_next/static/HXpbxTbAiEc4_GOGXKn7D/_buildManifest.js\" defer=\"\"></script><script src=\"/_next/static/HXpbxTbAiEc4_GOGXKn7D/_ssgManifest.js\" defer=\"\"></script><script src=\"/_next/static/HXpbxTbAiEc4_GOGXKn7D/_middlewareManifest.js\" defer=\"\"></script></head><body><div id=\"__next\"><div style=\"color:#000;background:#fff;font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center\"><div><style>body { margin: 0 }</style><h1 style=\"display:inline-block;border-right:1px solid rgba(0, 0, 0,.3);margin:0;margin-right:20px;padding:10px 23px 10px 0;font-size:24px;font-weight:500;vertical-align:top\">500<!-- --></h1><div style=\"display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle\"><h2 style=\"font-size:14px;font-weight:normal;line-height:inherit;margin:0;padding:0\">Internal Server Error<!-- -->.<!-- --></h2></div></div></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"HXpbxTbAiEc4_GOGXKn7D\",\"isFallback\":false,\"err\":{\"name\":\"Internal Server Error.\",\"message\":\"500 - Internal Server Error.\",\"statusCode\":500},\"gip\":true,\"scriptLoader\":[]}</script></body></html>"

  276 |       after?.()
  277 |       await killApp(context.server)
> 278 |     })
      |      ^
  279 |
  280 |     runTests(context)
  281 |   })

  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:278:6)

● concurrentFeatures - dev › should support React.lazy and dynamic imports

thrown: "Exceeded timeout of 90000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  196 |     })
  197 |   },
> 198 |   before: () => documentPage.write(documentWithGip),
      |   ^
  199 |   after: () => documentPage.delete(),
  200 | }
  201 |

  at integration/react-streaming-and-server-components/test/index.test.js:198:3
  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:183:1)

● concurrentFeatures - dev › should render the correct html

thrown: "Exceeded timeout of 90000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  249 |   })
  250 |
> 251 |   it('should support multi-level server component imports', async () => {
      |   ^
  252 |     const html = await renderViaHTTP(context.appPort, '/multi')
  253 |     expect(html).toContain('bar.server.js:')
  254 |     expect(html).toContain('foo.client')

  at runBasicTests (integration/react-streaming-and-server-components/test/index.test.js:251:3)
  at integration/react-streaming-and-server-components/test/index.test.js:206:3
  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:183:1)

● concurrentFeatures - dev › should suspense next/link on server side

thrown: "Exceeded timeout of 90000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  203 | runSuite('document', 'prod', documentSuite)
  204 |
> 205 | async function runBasicTests(context) {
      |     ^
  206 |   it('should render the correct html', async () => {
  207 |     const homeHTML = await renderViaHTTP(context.appPort, '/')
  208 |

  at runBasicTests (integration/react-streaming-and-server-components/test/index.test.js:205:5)
  at integration/react-streaming-and-server-components/test/index.test.js:206:3
  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:183:1)

● concurrentFeatures - dev › should suspense next/image on server side

thrown: "Exceeded timeout of 90000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  209 |     // dynamic routes
  210 |     const dynamicRouteHTML1 = await renderViaHTTP(
> 211 |       context.appPort,
      |     ^
  212 |       '/routes/dynamic1'
  213 |     )
  214 |     const dynamicRouteHTML2 = await renderViaHTTP(

  at runBasicTests (integration/react-streaming-and-server-components/test/index.test.js:211:5)
  at integration/react-streaming-and-server-components/test/index.test.js:206:3
  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:183:1)

● concurrentFeatures - dev › should support multi-level server component imports

thrown: "Exceeded timeout of 90000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  215 |       context.appPort,
  216 |       '/routes/dynamic2'
> 217 |     )
      |     ^
  218 |
  219 |     const path404HTML = await renderViaHTTP(context.appPort, '/404')
  220 |     const pathNotFoundHTML = await renderViaHTTP(

  at runBasicTests (integration/react-streaming-and-server-components/test/index.test.js:217:5)
  at integration/react-streaming-and-server-components/test/index.test.js:206:3
  at Object.<anonymous> (integration/react-streaming-and-server-components/test/index.test.js:183:1)

● CSS dev › should include global styles under concurrentFeatures: true

page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:36165/global-styles", waiting until "load"
============================================================

  111 |       this.activeTrace = encodeURIComponent(url)
  112 |     }
> 113 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  114 |   }
  115 |
  116 |   back(): BrowserInterface {

  at Playwright.loadPage (lib/browsers/playwright.ts:113:16)
  at Object.webdriver [as default] (lib/next-webdriver.ts:83:3)
  at Object.<anonymous> (integration/react-streaming-and-server-components/test/css.js:6:21)

● CSS dev › should include global styles with serverComponents: true

page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:36165/global-styles-rsc", waiting until "load"
============================================================

  111 |       this.activeTrace = encodeURIComponent(url)
  112 |     }
> 113 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  114 |   }
  115 |
  116 |   back(): BrowserInterface {

  at Playwright.loadPage (lib/browsers/playwright.ts:113:16)
  at Object.webdriver [as default] (lib/next-webdriver.ts:83:3)
  at Object.<anonymous> (integration/react-streaming-and-server-components/test/css.js:13:21)

● CSS prod › should include global styles under concurrentFeatures: true

page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:34067/global-styles", waiting until "load"
============================================================

  111 |       this.activeTrace = encodeURIComponent(url)
  112 |     }
> 113 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  114 |   }
  115 |
  116 |   back(): BrowserInterface {

  at Playwright.loadPage (lib/browsers/playwright.ts:113:16)
  at Object.webdriver [as default] (lib/next-webdriver.ts:83:3)
  at Object.<anonymous> (integration/react-streaming-and-server-components/test/css.js:6:21)

● CSS prod › should include global styles with serverComponents: true

page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:34067/global-styles-rsc", waiting until "load"
============================================================

  111 |       this.activeTrace = encodeURIComponent(url)
  112 |     }
> 113 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  114 |   }
  115 |
  116 |   back(): BrowserInterface {

  at Playwright.loadPage (lib/browsers/playwright.ts:113:16)
  at Object.webdriver [as default] (lib/next-webdriver.ts:83:3)
  at Object.<anonymous> (integration/react-streaming-and-server-components/test/css.js:13:21)

test/integration/react-18/test/index.test.js

Concurrent mode > concurrentFeatures is enabled (dev) > should resolve suspense modules on server side if suspense
Concurrent mode > concurrentFeatures is enabled (dev) > should resolve suspense on server side if not suspended on server
Concurrent mode > concurrentFeatures is enabled (dev) > should resolve suspense on server side if suspended on server
Concurrent mode > concurrentFeatures is enabled (dev) > should hydrate suspenses on client side if suspended on server
Concurrent mode > concurrentFeatures is enabled (dev) > should drain the entire response
Concurrent mode > concurrentFeatures is enabled (dev) > should stream to users
Concurrent mode > concurrentFeatures is enabled (dev) > should not stream to bots
Concurrent mode > concurrentFeatures is enabled (prod) > should resolve suspense modules on server side if suspense
Concurrent mode > concurrentFeatures is enabled (prod) > should resolve suspense on server side if not suspended on server
Concurrent mode > concurrentFeatures is enabled (prod) > should resolve suspense on server side if suspended on server
Concurrent mode > concurrentFeatures is enabled (prod) > should hydrate suspenses on client side if suspended on server
Concurrent mode > concurrentFeatures is enabled (prod) > should drain the entire response

Expand output

● Concurrent mode › concurrentFeatures is enabled (dev) › should resolve suspense modules on server side if suspense

page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:32785/suspense/no-preload", waiting until "load"
============================================================

  111 |       this.activeTrace = encodeURIComponent(url)
  112 |     }
> 113 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  114 |   }
  115 |
  116 |   back(): BrowserInterface {

  at Playwright.loadPage (lib/browsers/playwright.ts:113:16)
  at Object.webdriver [as default] (lib/next-webdriver.ts:83:3)
  at withBrowser (integration/react-18/test/concurrent.js:10:17)
  at Object.<anonymous> (integration/react-18/test/concurrent.js:20:5)

● Concurrent mode › concurrentFeatures is enabled (dev) › should resolve suspense on server side if not suspended on server

page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:32785/suspense/no-thrown", waiting until "load"
============================================================

  111 |       this.activeTrace = encodeURIComponent(url)
  112 |     }
> 113 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  114 |   }
  115 |
  116 |   back(): BrowserInterface {

  at Playwright.loadPage (lib/browsers/playwright.ts:113:16)
  at Object.webdriver [as default] (lib/next-webdriver.ts:83:3)
  at withBrowser (integration/react-18/test/concurrent.js:10:17)
  at Object.<anonymous> (integration/react-18/test/concurrent.js:30:5)

● Concurrent mode › concurrentFeatures is enabled (dev) › should resolve suspense on server side if suspended on server

page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:32785/suspense/thrown", waiting until "load"
============================================================

  111 |       this.activeTrace = encodeURIComponent(url)
  112 |     }
> 113 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  114 |   }
  115 |
  116 |   back(): BrowserInterface {

  at Playwright.loadPage (lib/browsers/playwright.ts:113:16)
  at Object.webdriver [as default] (lib/next-webdriver.ts:83:3)
  at withBrowser (integration/react-18/test/concurrent.js:10:17)
  at Object.<anonymous> (integration/react-18/test/concurrent.js:43:5)

● Concurrent mode › concurrentFeatures is enabled (dev) › should hydrate suspenses on client side if suspended on server

page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:32785/suspense/thrown", waiting until "load"
============================================================

  111 |       this.activeTrace = encodeURIComponent(url)
  112 |     }
> 113 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  114 |   }
  115 |
  116 |   back(): BrowserInterface {

  at Playwright.loadPage (lib/browsers/playwright.ts:113:16)
  at Object.webdriver [as default] (lib/next-webdriver.ts:83:3)
  at withBrowser (integration/react-18/test/concurrent.js:10:17)
  at Object.<anonymous> (integration/react-18/test/concurrent.js:56:5)

● Concurrent mode › concurrentFeatures is enabled (dev) › should drain the entire response

page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:32785/suspense/backpressure", waiting until "load"
============================================================

  111 |       this.activeTrace = encodeURIComponent(url)
  112 |     }
> 113 |     await page.goto(url, { waitUntil: 'load' })
      |                ^
  114 |   }
  115 |
  116 |   back(): BrowserInterface {

  at Playwright.loadPage (lib/browsers/playwright.ts:113:16)
  at Object.webdriver [as default] (lib/next-webdriver.ts:83:3)
  at withBrowser (integration/react-18/test/concurrent.js:10:17)
  at Object.<anonymous> (integration/react-18/test/concurrent.js:66:5)

● Concurrent mode › concurrentFeatures is enabled (dev) › should stream to users

thrown: "Exceeded timeout of 90000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  168 |     concurrent(context, (p, q) => renderViaHTTP(context.appPort, p, q))
  169 |
> 170 |     it('should stream to users', async () => {
      |     ^
  171 |       const res = await fetchViaHTTP(context.appPort, '/ssr')
  172 |       expect(res.headers.get('etag')).toBeNull()
  173 |     })

  at integration/react-18/test/index.test.js:170:5
  at integration/react-18/test/index.test.js:210:5
  at runTest (integration/react-18/test/index.test.js:193:3)
  at runTests (integration/react-18/test/index.test.js:215:3)
  at integration/react-18/test/index.test.js:167:3
  at Object.<anonymous> (integration/react-18/test/index.test.js:152:1)

● Concurrent mode › concurrentFeatures is enabled (dev) › should not stream to bots

thrown: "Exceeded timeout of 90000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  173 |     })
  174 |
> 175 |     it('should not stream to bots', async () => {
      |     ^
  176 |       const res = await fetchViaHTTP(
  177 |         context.appPort,
  178 |         '/ssr',

  at integration/react-18/test/index.test.js:175:5
  at integration/react-18/test/index.test.js:210:5
  at runTest (integration/react-18/test/index.test.js:193:3)
  at runTests (integration/react-18/test/index.test.js:215:3)
  at integration/react-18/test/index.test.js:167:3
  at Object.<anonymous> (integration/react-18/test/index.test.js:152:1)

● Concurrent mode › concurrentFeatures is enabled (prod) › should resolve suspense modules on server side if suspense

TIMED OUT: /barfoo/

500
Internal Server Error.

  459 |
  460 |   if (hardError) {
> 461 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  462 |   }
  463 |   return false
  464 | }

  at Object.check (lib/next-test-utils.js:461:11)
  at integration/react-18/test/concurrent.js:21:7
  at withBrowser (integration/react-18/test/concurrent.js:11:7)
  at Object.<anonymous> (integration/react-18/test/concurrent.js:20:5)

● Concurrent mode › concurrentFeatures is enabled (prod) › should resolve suspense on server side if not suspended on server

TIMED OUT: /true/

undefined

  459 |
  460 |   if (hardError) {
> 461 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  462 |   }
  463 |   return false
  464 | }

  at Object.check (lib/next-test-utils.js:461:11)
  at integration/react-18/test/concurrent.js:31:7
  at withBrowser (integration/react-18/test/concurrent.js:11:7)
  at Object.<anonymous> (integration/react-18/test/concurrent.js:30:5)

● Concurrent mode › concurrentFeatures is enabled (prod) › should resolve suspense on server side if suspended on server

TIMED OUT: /true/

undefined

  459 |
  460 |   if (hardError) {
> 461 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  462 |   }
  463 |   return false
  464 | }

  at Object.check (lib/next-test-utils.js:461:11)
  at integration/react-18/test/concurrent.js:44:7
  at withBrowser (integration/react-18/test/concurrent.js:11:7)
  at Object.<anonymous> (integration/react-18/test/concurrent.js:43:5)

● Concurrent mode › concurrentFeatures is enabled (prod) › should hydrate suspenses on client side if suspended on server

TIMED OUT: /true/

undefined

  459 |
  460 |   if (hardError) {
> 461 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  462 |   }
  463 |   return false
  464 | }

  at Object.check (lib/next-test-utils.js:461:11)
  at integration/react-18/test/concurrent.js:57:7
  at withBrowser (integration/react-18/test/concurrent.js:11:7)
  at Object.<anonymous> (integration/react-18/test/concurrent.js:56:5)

● Concurrent mode › concurrentFeatures is enabled (prod) › should drain the entire response

TIMED OUT: /2000/

0

  459 |
  460 |   if (hardError) {
> 461 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  462 |   }
  463 |   return false
  464 | }

  at Object.check (lib/next-test-utils.js:461:11)
  at integration/react-18/test/concurrent.js:67:7
  at withBrowser (integration/react-18/test/concurrent.js:11:7)
  at Object.<anonymous> (integration/react-18/test/concurrent.js:66:5)

patch 404 as non-streaming in dev

ijjk · 2021-11-06T10:56:34Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
buildDuration	18.2s	18.1s	-23ms
buildDurationCached	3.6s	4s	⚠️ +417ms
nodeModulesSize	332 MB	332 MB	⚠️ +1.99 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.889	2.951	⚠️ +0.06
/ avg req/sec	865.4	847.11	⚠️ -18.29
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.368	1.384	⚠️ +0.02
/error-in-render avg req/sec	1827.77	1806.19	⚠️ -21.58

Client Bundles (main, webpack, commons)

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28 kB	28 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	71.9 kB	71.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
_app-HASH.js gzip	1.23 kB	1.23 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.44 kB	4.44 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
index.html gzip	522 B	522 B	✓
link.html gzip	535 B	535 B	✓
withRouter.html gzip	515 B	515 B	✓
Overall change	1.57 kB	1.57 kB	✓

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
buildDuration	21.1s	19.3s	-1.8s
buildDurationCached	3.6s	3.6s	⚠️ +14ms
nodeModulesSize	332 MB	332 MB	⚠️ +1.99 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.98	3.004	⚠️ +0.02
/ avg req/sec	838.79	832.22	⚠️ -6.57
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.391	1.41	⚠️ +0.02
/error-in-render avg req/sec	1796.69	1773.16	⚠️ -23.53

Client Bundles (main, webpack, commons)

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.2 kB	28.2 kB	✓
webpack-HASH.js gzip	1.43 kB	1.43 kB	✓
Overall change	72.1 kB	72.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
_app-HASH.js gzip	1.22 kB	1.22 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.46 kB	4.46 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js fix/streaming-404	Change
index.html gzip	521 B	521 B	✓
link.html gzip	534 B	534 B	✓
withRouter.html gzip	515 B	515 B	✓
Overall change	1.57 kB	1.57 kB	✓

Commit: c597e2a

huozhi requested review from ijjk, padmaia, shuding and timneutkens as code owners November 5, 2021 22:32

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Nov 5, 2021

shuding reviewed Nov 5, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

huozhi force-pushed the fix/streaming-404 branch 3 times, most recently from aa53bac to 4b95f7f Compare November 5, 2021 23:14

This comment has been minimized.

Sign in to view

huozhi requested a review from shuding November 5, 2021 23:46

This comment has been minimized.

Sign in to view

shuding reviewed Nov 6, 2021

View reviewed changes

packages/next/server/dev/on-demand-entry-handler.ts Outdated Show resolved Hide resolved

shuding previously approved these changes Nov 6, 2021

View reviewed changes

huozhi dismissed shuding’s stale review via 76c1d0a November 6, 2021 00:35

huozhi requested a review from shuding November 6, 2021 00:35

shuding previously approved these changes Nov 6, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

custom 404

bbcd885

patch 404 as non-streaming in dev

huozhi dismissed shuding’s stale review via bbcd885 November 6, 2021 10:26

huozhi force-pushed the fix/streaming-404 branch from baf7ef4 to bbcd885 Compare November 6, 2021 10:26

fix test

c597e2a

shuding approved these changes Nov 6, 2021

View reviewed changes

kodiakhq bot merged commit e029ace into vercel:canary Nov 6, 2021

huozhi deleted the fix/streaming-404 branch November 6, 2021 13:13

huozhi mentioned this pull request Nov 9, 2021

Error occurred prerendering page "/404" when using concurrentFeatures: true #31126

Closed

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix custom 404 page when concurrentFeatures is enabled #31059

Fix custom 404 page when concurrentFeatures is enabled #31059

huozhi commented Nov 5, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Nov 6, 2021 •

edited

ijjk commented Nov 6, 2021

Fix custom 404 page when concurrentFeatures is enabled #31059

Fix custom 404 page when concurrentFeatures is enabled #31059

Conversation

huozhi commented Nov 5, 2021

Bug

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Nov 6, 2021 • edited

Failing test suites

ijjk commented Nov 6, 2021

Stats from current PR

ijjk commented Nov 6, 2021 •

edited