{"parents":["266c26ad45c977ecf67e9359809c37da1489ca63"],"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex 3381005cf5..19fde3c4a6 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -103,6 +103,7 @@ describe('ReactDOMFizzServer', () => {\n if (\n node.tagName !== 'SCRIPT' &&\n node.tagName !== 'TEMPLATE' &&\n+ node.tagName !== 'template' &&\n !node.hasAttribute('hidden') &&\n !node.hasAttribute('aria-hidden')\n ) {\n@@ -153,7 +154,6 @@ describe('ReactDOMFizzServer', () => {\n }\n }\n \n- \/*\n function rejectText(text, error) {\n const record = textCache.get(text);\n if (record === undefined) {\n@@ -169,7 +169,6 @@ describe('ReactDOMFizzServer', () => {\n thenable.pings.forEach(t => t());\n }\n }\n- *\/\n \n function readText(text) {\n const record = textCache.get(text);\n@@ -800,4 +799,79 @@ describe('ReactDOMFizzServer', () => {\n <\/div>,\n );\n });\n+\n+ it('client renders a boundary if it errors before finishing the fallback', async () => {\n+ function App({isClient}) {\n+ return (\n+ \n+

\n+ }>\n+

\n+ {isClient ? : }\n+ <\/h1>\n+ <\/Suspense>\n+ <\/div>\n+ <\/Suspense>\n+ );\n+ }\n+\n+ const loggedErrors = [];\n+ let controls;\n+ await act(async () => {\n+ controls = ReactDOMFizzServer.pipeToNodeWritable(\n+ ,\n+ writable,\n+ {\n+ onError(x) {\n+ loggedErrors.push(x);\n+ },\n+ },\n+ );\n+ controls.startWriting();\n+ });\n+\n+ \/\/ We're still showing a fallback.\n+\n+ \/\/ Attempt to hydrate the content.\n+ const root = ReactDOM.unstable_createRoot(container, {hydrate: true});\n+ root.render();\n+ Scheduler.unstable_flushAll();\n+\n+ \/\/ We're still loading because we're waiting for the server to stream more content.\n+ expect(getVisibleChildren(container)).toEqual('Loading root...');\n+\n+ expect(loggedErrors).toEqual([]);\n+\n+ const theError = new Error('Test');\n+ \/\/ Error the content, but we don't have a fallback yet.\n+ await act(async () => {\n+ rejectText('Hello', theError);\n+ });\n+\n+ expect(loggedErrors).toEqual([theError]);\n+\n+ \/\/ We still can't render it on the client because we haven't unblocked the parent.\n+ Scheduler.unstable_flushAll();\n+ expect(getVisibleChildren(container)).toEqual('Loading root...');\n+\n+ \/\/ Unblock the loading state\n+ await act(async () => {\n+ resolveText('Loading...');\n+ });\n+\n+ \/\/ Now we're able to show the inner boundary.\n+ expect(getVisibleChildren(container)).toEqual(
Loading...<\/div>);\n+\n+ \/\/ That will let us client render it instead.\n+ Scheduler.unstable_flushAll();\n+\n+ \/\/ The client rendered HTML is now in place.\n+ expect(getVisibleChildren(container)).toEqual(\n+
\n+
Hello<\/h1>\n+ <\/div>,\n+ );\n+\n+ expect(loggedErrors).toEqual([theError]);\n+ });\n });\ndiff --git a\/packages\/react-server\/src\/ReactFizzServer.js b\/packages\/react-server\/src\/ReactFizzServer.js\nindex 334d8b3879..a27a845f42 100644\n--- a\/packages\/react-server\/src\/ReactFizzServer.js\n+++ b\/packages\/react-server\/src\/ReactFizzServer.js\n@@ -419,17 +419,30 @@ function renderSuspenseBoundary(\n task.blockedSegment = parentSegment;\n }\n \n+ \/\/ This injects an extra segment just to contain an empty tag with an ID.\n+ \/\/ This means that we're not actually using the assignID anywhere.\n+ \/\/ TODO: Rethink the assignID approach.\n+ pushEmpty(boundarySegment.chunks, request.responseState, newBoundary.id);\n+ const innerSegment = createPendingSegment(\n+ request,\n+ boundarySegment.chunks.length,\n+ null,\n+ boundarySegment.formatContext,\n+ );\n+ boundarySegment.status = COMPLETED;\n+ boundarySegment.children.push(innerSegment);\n+\n \/\/ We create suspended task for the fallback because we don't want to actually work\n \/\/ on it yet in case we finish the main content, so we queue for later.\n const suspendedFallbackTask = createTask(\n request,\n fallback,\n parentBoundary,\n- boundarySegment,\n+ innerSegment,\n fallbackAbortSet,\n task.legacyContext,\n task.context,\n- newBoundary.id, \/\/ This is the ID we want to give this fallback so we can replace it later.\n+ null,\n );\n \/\/ TODO: This should be queued at a separate lower priority queue so that we only work\n \/\/ on preparing fallbacks if we don't have any more main content to task on.\n","commit":{"authoredAt":"2021-04-14T18:39:51-04:00","authorName":"Sebastian Markbåge","authorEmail":"sema@fb.com","revision":"81ef5395358b6e0f44a02df618901eaef830fe78","subject":"Always insert a dummy node with an ID into fallbacks (#21272)","shortRevision":"81ef539535"},"body":"","files":[{"status":"M","path":"packages\/react-dom\/src\/tests\/ReactDOMFizzServer-test.js"},{"status":"M","path":"packages\/react-server\/src\/ReactFizzServer.js"}]}

dillon1000/react

Files changed