From cecbf4f081439f578f7c16745d16033734a2714d Mon Sep 17 00:00:00 2001
From: gnoff <gnoff@users.noreply.github.com>
Date: Wed, 15 Nov 2023 20:58:39 +0000
Subject: [PATCH] [Fizz] handle errors in `onHeaders` (#27712)

`onHeaders` can throw however for now we can assume that headers are
optimistic values since the only things we produce for them are preload
links. This is a pragmatic decision because React could concievably have
headers in the future which were not optimistic and thus non-optional
however it is hard to imagine what these headers might be in practice.
If we need to change this behavior to be fatal in the future it would be
a breaking change.

This commit adds error logging when `onHeaders` throws and ensures the
request can continue to render successfully.

DiffTrain build for [ee68446ff198755bd38202ac9139275b657968b0](https://github.com/facebook/react/commit/ee68446ff198755bd38202ac9139275b657968b0)
---
 compiled/facebook-www/REVISION                |   2 +-
 compiled/facebook-www/ReactART-dev.modern.js  |   2 +-
 compiled/facebook-www/ReactART-prod.modern.js |   4 +-
 .../ReactDOMServer-dev.classic.js             |  37 ++--
 .../facebook-www/ReactDOMServer-dev.modern.js |  37 ++--
 .../ReactDOMServer-prod.classic.js            | 173 +++++++++---------
 .../ReactDOMServer-prod.modern.js             | 173 +++++++++---------
 .../ReactDOMServerStreaming-dev.modern.js     |  29 +--
 .../ReactDOMServerStreaming-prod.modern.js    | 125 +++++++------
 9 files changed, 298 insertions(+), 284 deletions(-)

diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
index 6cc40e1e7242f..16869e8224ceb 100644
--- a/compiled/facebook-www/REVISION
+++ b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-593ecee66a609d4a4c2b36b39b1e5e23b2456dd1
+ee68446ff198755bd38202ac9139275b657968b0
diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
index ecdafe82b0bbb..1a0eff96302a5 100644
--- a/compiled/facebook-www/ReactART-dev.modern.js
+++ b/compiled/facebook-www/ReactART-dev.modern.js
@@ -66,7 +66,7 @@ if (__DEV__) {
       return self;
     }
 
-    var ReactVersion = "18.3.0-www-modern-7ac3e370";
+    var ReactVersion = "18.3.0-www-modern-b8021dcf";
 
     var LegacyRoot = 0;
     var ConcurrentRoot = 1;
diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
index 0b7f733d433b9..d9aab039c043b 100644
--- a/compiled/facebook-www/ReactART-prod.modern.js
+++ b/compiled/facebook-www/ReactART-prod.modern.js
@@ -9905,7 +9905,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-modern-fc53dc79",
+    version: "18.3.0-www-modern-88df5dd9",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1302 = {
@@ -9936,7 +9936,7 @@ var internals$jscomp$inline_1302 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-www-modern-fc53dc79"
+  reconcilerVersion: "18.3.0-www-modern-88df5dd9"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1303 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js
index 89759fdbb0e64..88809fa35ad4f 100644
--- a/compiled/facebook-www/ReactDOMServer-dev.classic.js
+++ b/compiled/facebook-www/ReactDOMServer-dev.classic.js
@@ -19,7 +19,7 @@ if (__DEV__) {
     var React = require("react");
     var ReactDOM = require("react-dom");
 
-    var ReactVersion = "18.3.0-www-classic-deec0503";
+    var ReactVersion = "18.3.0-www-classic-e27c8048";
 
     // This refers to a WWW module.
     var warningWWW = require("warning");
@@ -7698,6 +7698,9 @@ if (__DEV__) {
         var headers = renderState.headers;
 
         if (headers) {
+          // Even if onHeaders throws we don't want to call this again so
+          // we drop the headers state from this point onwards.
+          renderState.headers = null;
           var linkHeader = headers.preconnects;
 
           if (headers.fontPreloads) {
@@ -7780,7 +7783,6 @@ if (__DEV__) {
             onHeaders({});
           }
 
-          renderState.headers = null;
           return;
         }
       }
@@ -13219,6 +13221,19 @@ if (__DEV__) {
       if (request.allPendingTasks === 0) {
         completeAll(request);
       }
+    }
+
+    function safelyEmitEarlyPreloads(request, shellComplete) {
+      try {
+        emitEarlyPreloads(
+          request.renderState,
+          request.resumableState,
+          shellComplete
+        );
+      } catch (error) {
+        // We assume preloads are optimistic and thus non-fatal if errored.
+        logRecoverableError(request, error);
+      }
     } // I extracted this function out because we want to ensure we consistently emit preloads before
     // transitioning to the next request stage and this transition can happen in multiple places in this
     // implementation.
@@ -13231,11 +13246,7 @@ if (__DEV__) {
         // we should only be calling completeShell when the shell is complete so we
         // just use a literal here
         var shellComplete = true;
-        emitEarlyPreloads(
-          request.renderState,
-          request.resumableState,
-          shellComplete
-        );
+        safelyEmitEarlyPreloads(request, shellComplete);
       } // We have completed the shell so the shell can't error anymore.
 
       request.onShellError = noop;
@@ -13255,11 +13266,7 @@ if (__DEV__) {
           ? true // Prerender Request, we use the state of the root segment
           : request.completedRootSegment === null ||
             request.completedRootSegment.status !== POSTPONED;
-      emitEarlyPreloads(
-        request.renderState,
-        request.resumableState,
-        shellComplete
-      );
+      safelyEmitEarlyPreloads(request, shellComplete);
       var onAllReady = request.onAllReady;
       onAllReady();
     }
@@ -14102,11 +14109,7 @@ if (__DEV__) {
 
     function enqueueEarlyPreloadsAfterInitialWork(request) {
       var shellComplete = request.pendingRootTasks === 0;
-      emitEarlyPreloads(
-        request.renderState,
-        request.resumableState,
-        shellComplete
-      );
+      safelyEmitEarlyPreloads(request, shellComplete);
     }
 
     function enqueueFlush(request) {
diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js
index 5f13a8c899ba3..7fb4442e85050 100644
--- a/compiled/facebook-www/ReactDOMServer-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMServer-dev.modern.js
@@ -19,7 +19,7 @@ if (__DEV__) {
     var React = require("react");
     var ReactDOM = require("react-dom");
 
-    var ReactVersion = "18.3.0-www-modern-7ac3e370";
+    var ReactVersion = "18.3.0-www-modern-b8021dcf";
 
     // This refers to a WWW module.
     var warningWWW = require("warning");
@@ -7698,6 +7698,9 @@ if (__DEV__) {
         var headers = renderState.headers;
 
         if (headers) {
+          // Even if onHeaders throws we don't want to call this again so
+          // we drop the headers state from this point onwards.
+          renderState.headers = null;
           var linkHeader = headers.preconnects;
 
           if (headers.fontPreloads) {
@@ -7780,7 +7783,6 @@ if (__DEV__) {
             onHeaders({});
           }
 
-          renderState.headers = null;
           return;
         }
       }
@@ -12947,6 +12949,19 @@ if (__DEV__) {
       if (request.allPendingTasks === 0) {
         completeAll(request);
       }
+    }
+
+    function safelyEmitEarlyPreloads(request, shellComplete) {
+      try {
+        emitEarlyPreloads(
+          request.renderState,
+          request.resumableState,
+          shellComplete
+        );
+      } catch (error) {
+        // We assume preloads are optimistic and thus non-fatal if errored.
+        logRecoverableError(request, error);
+      }
     } // I extracted this function out because we want to ensure we consistently emit preloads before
     // transitioning to the next request stage and this transition can happen in multiple places in this
     // implementation.
@@ -12959,11 +12974,7 @@ if (__DEV__) {
         // we should only be calling completeShell when the shell is complete so we
         // just use a literal here
         var shellComplete = true;
-        emitEarlyPreloads(
-          request.renderState,
-          request.resumableState,
-          shellComplete
-        );
+        safelyEmitEarlyPreloads(request, shellComplete);
       } // We have completed the shell so the shell can't error anymore.
 
       request.onShellError = noop;
@@ -12983,11 +12994,7 @@ if (__DEV__) {
           ? true // Prerender Request, we use the state of the root segment
           : request.completedRootSegment === null ||
             request.completedRootSegment.status !== POSTPONED;
-      emitEarlyPreloads(
-        request.renderState,
-        request.resumableState,
-        shellComplete
-      );
+      safelyEmitEarlyPreloads(request, shellComplete);
       var onAllReady = request.onAllReady;
       onAllReady();
     }
@@ -13830,11 +13837,7 @@ if (__DEV__) {
 
     function enqueueEarlyPreloadsAfterInitialWork(request) {
       var shellComplete = request.pendingRootTasks === 0;
-      emitEarlyPreloads(
-        request.renderState,
-        request.resumableState,
-        shellComplete
-      );
+      safelyEmitEarlyPreloads(request, shellComplete);
     }
 
     function enqueueFlush(request) {
diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
index e4b4d264e7a16..a8567e68b1f26 100644
--- a/compiled/facebook-www/ReactDOMServer-prod.classic.js
+++ b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -2470,62 +2470,6 @@ function hoistStyleQueueDependency(styleQueue) {
 function hoistStylesheetDependency(stylesheet) {
   this.stylesheets.add(stylesheet);
 }
-function emitEarlyPreloads(renderState, resumableState, shellComplete) {
-  if ((resumableState = renderState.onHeaders)) {
-    var headers = renderState.headers;
-    if (headers) {
-      var linkHeader = headers.preconnects;
-      headers.fontPreloads &&
-        (linkHeader && (linkHeader += ", "),
-        (linkHeader += headers.fontPreloads));
-      headers.highImagePreloads &&
-        (linkHeader && (linkHeader += ", "),
-        (linkHeader += headers.highImagePreloads));
-      if (!shellComplete) {
-        shellComplete = renderState.styles.values();
-        var queueStep = shellComplete.next();
-        a: for (
-          ;
-          0 < headers.remainingCapacity && !queueStep.done;
-          queueStep = shellComplete.next()
-        ) {
-          queueStep = queueStep.value.sheets.values();
-          for (
-            var sheetStep = queueStep.next();
-            0 < headers.remainingCapacity && !sheetStep.done;
-            sheetStep = queueStep.next()
-          ) {
-            var sheet = sheetStep.value;
-            sheetStep = sheet.props;
-            var key = sheetStep.href;
-            sheet = sheet.props;
-            sheet = getPreloadAsHeader(sheet.href, "style", {
-              crossOrigin: sheet.crossOrigin,
-              integrity: sheet.integrity,
-              nonce: sheet.nonce,
-              type: sheet.type,
-              fetchPriority: sheet.fetchPriority,
-              referrerPolicy: sheet.referrerPolicy,
-              media: sheet.media
-            });
-            if (2 <= (headers.remainingCapacity -= sheet.length))
-              (renderState.resets.style[key] = PRELOAD_NO_CREDS),
-                linkHeader && (linkHeader += ", "),
-                (linkHeader += sheet),
-                (renderState.resets.style[key] =
-                  "string" === typeof sheetStep.crossOrigin ||
-                  "string" === typeof sheetStep.integrity
-                    ? [sheetStep.crossOrigin, sheetStep.integrity]
-                    : PRELOAD_NO_CREDS);
-            else break a;
-          }
-        }
-      }
-      linkHeader ? resumableState({ Link: linkHeader }) : resumableState({});
-      renderState.headers = null;
-    }
-  }
-}
 function createRenderState(resumableState, generateStaticMarkup) {
   var idPrefix = resumableState.idPrefix,
     bootstrapChunks = [],
@@ -2539,16 +2483,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
       "\x3c/script>"
     );
   bootstrapScriptContent = idPrefix + "P:";
-  var JSCompiler_object_inline_segmentPrefix_1586 = idPrefix + "S:";
+  var JSCompiler_object_inline_segmentPrefix_1602 = idPrefix + "S:";
   idPrefix += "B:";
-  var JSCompiler_object_inline_preconnects_1601 = new Set(),
-    JSCompiler_object_inline_fontPreloads_1602 = new Set(),
-    JSCompiler_object_inline_highImagePreloads_1603 = new Set(),
-    JSCompiler_object_inline_styles_1604 = new Map(),
-    JSCompiler_object_inline_bootstrapScripts_1605 = new Set(),
-    JSCompiler_object_inline_scripts_1606 = new Set(),
-    JSCompiler_object_inline_bulkPreloads_1607 = new Set(),
-    JSCompiler_object_inline_preloads_1608 = {
+  var JSCompiler_object_inline_preconnects_1617 = new Set(),
+    JSCompiler_object_inline_fontPreloads_1618 = new Set(),
+    JSCompiler_object_inline_highImagePreloads_1619 = new Set(),
+    JSCompiler_object_inline_styles_1620 = new Map(),
+    JSCompiler_object_inline_bootstrapScripts_1621 = new Set(),
+    JSCompiler_object_inline_scripts_1622 = new Set(),
+    JSCompiler_object_inline_bulkPreloads_1623 = new Set(),
+    JSCompiler_object_inline_preloads_1624 = {
       images: new Map(),
       stylesheets: new Map(),
       scripts: new Map(),
@@ -2585,7 +2529,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
       scriptConfig.moduleScriptResources[href] = null;
       scriptConfig = [];
       pushLinkImpl(scriptConfig, props);
-      JSCompiler_object_inline_bootstrapScripts_1605.add(scriptConfig);
+      JSCompiler_object_inline_bootstrapScripts_1621.add(scriptConfig);
       bootstrapChunks.push('<script src="', escapeTextForBrowser(src));
       "string" === typeof integrity &&
         bootstrapChunks.push('" integrity="', escapeTextForBrowser(integrity));
@@ -2626,7 +2570,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         (props.moduleScriptResources[scriptConfig] = null),
         (props = []),
         pushLinkImpl(props, integrity),
-        JSCompiler_object_inline_bootstrapScripts_1605.add(props),
+        JSCompiler_object_inline_bootstrapScripts_1621.add(props),
         bootstrapChunks.push(
           '<script type="module" src="',
           escapeTextForBrowser(i)
@@ -2641,7 +2585,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         bootstrapChunks.push('" async="">\x3c/script>');
   return {
     placeholderPrefix: bootstrapScriptContent,
-    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1586,
+    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1602,
     boundaryPrefix: idPrefix,
     startInlineScript: "<script>",
     htmlChunks: null,
@@ -2662,14 +2606,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
     importMapChunks: [],
     preloadChunks: [],
     hoistableChunks: [],
-    preconnects: JSCompiler_object_inline_preconnects_1601,
-    fontPreloads: JSCompiler_object_inline_fontPreloads_1602,
-    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1603,
-    styles: JSCompiler_object_inline_styles_1604,
-    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1605,
-    scripts: JSCompiler_object_inline_scripts_1606,
-    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1607,
-    preloads: JSCompiler_object_inline_preloads_1608,
+    preconnects: JSCompiler_object_inline_preconnects_1617,
+    fontPreloads: JSCompiler_object_inline_fontPreloads_1618,
+    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1619,
+    styles: JSCompiler_object_inline_styles_1620,
+    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1621,
+    scripts: JSCompiler_object_inline_scripts_1622,
+    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1623,
+    preloads: JSCompiler_object_inline_preloads_1624,
     boundaryResources: null,
     stylesToHoist: !1,
     generateStaticMarkup: generateStaticMarkup
@@ -4548,17 +4492,76 @@ function abortTask(task, request, error) {
   request.allPendingTasks--;
   0 === request.allPendingTasks && completeAll(request);
 }
+function safelyEmitEarlyPreloads(request, shellComplete) {
+  try {
+    var renderState = request.renderState,
+      onHeaders = renderState.onHeaders;
+    if (onHeaders) {
+      var headers = renderState.headers;
+      if (headers) {
+        renderState.headers = null;
+        var linkHeader = headers.preconnects;
+        headers.fontPreloads &&
+          (linkHeader && (linkHeader += ", "),
+          (linkHeader += headers.fontPreloads));
+        headers.highImagePreloads &&
+          (linkHeader && (linkHeader += ", "),
+          (linkHeader += headers.highImagePreloads));
+        if (!shellComplete) {
+          var queueIter = renderState.styles.values(),
+            queueStep = queueIter.next();
+          b: for (
+            ;
+            0 < headers.remainingCapacity && !queueStep.done;
+            queueStep = queueIter.next()
+          )
+            for (
+              var sheetIter = queueStep.value.sheets.values(),
+                sheetStep = sheetIter.next();
+              0 < headers.remainingCapacity && !sheetStep.done;
+              sheetStep = sheetIter.next()
+            ) {
+              var sheet = sheetStep.value,
+                props = sheet.props,
+                key = props.href,
+                props$jscomp$0 = sheet.props,
+                header = getPreloadAsHeader(props$jscomp$0.href, "style", {
+                  crossOrigin: props$jscomp$0.crossOrigin,
+                  integrity: props$jscomp$0.integrity,
+                  nonce: props$jscomp$0.nonce,
+                  type: props$jscomp$0.type,
+                  fetchPriority: props$jscomp$0.fetchPriority,
+                  referrerPolicy: props$jscomp$0.referrerPolicy,
+                  media: props$jscomp$0.media
+                });
+              if (2 <= (headers.remainingCapacity -= header.length))
+                (renderState.resets.style[key] = PRELOAD_NO_CREDS),
+                  linkHeader && (linkHeader += ", "),
+                  (linkHeader += header),
+                  (renderState.resets.style[key] =
+                    "string" === typeof props.crossOrigin ||
+                    "string" === typeof props.integrity
+                      ? [props.crossOrigin, props.integrity]
+                      : PRELOAD_NO_CREDS);
+              else break b;
+            }
+        }
+        linkHeader ? onHeaders({ Link: linkHeader }) : onHeaders({});
+      }
+    }
+  } catch (error) {
+    logRecoverableError(request, error);
+  }
+}
 function completeShell(request) {
-  null === request.trackedPostpones &&
-    emitEarlyPreloads(request.renderState, request.resumableState, !0);
+  null === request.trackedPostpones && safelyEmitEarlyPreloads(request, !0);
   request.onShellError = noop;
   request = request.onShellReady;
   request();
 }
 function completeAll(request) {
-  emitEarlyPreloads(
-    request.renderState,
-    request.resumableState,
+  safelyEmitEarlyPreloads(
+    request,
     null === request.trackedPostpones
       ? !0
       : null === request.completedRootSegment ||
@@ -5365,11 +5368,7 @@ function renderToStringImpl(
   children.flushScheduled = null !== children.destination;
   performWork(children);
   null === children.trackedPostpones &&
-    emitEarlyPreloads(
-      children.renderState,
-      children.resumableState,
-      0 === children.pendingRootTasks
-    );
+    safelyEmitEarlyPreloads(children, 0 === children.pendingRootTasks);
   abort(children, abortReason);
   if (1 === children.status)
     (children.status = 2), destination.destroy(children.fatalError);
@@ -5408,4 +5407,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-classic-1cac58c7";
+exports.version = "18.3.0-www-classic-a7b932a6";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js
index 91e1a0bea77b0..7110a2cdfd198 100644
--- a/compiled/facebook-www/ReactDOMServer-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMServer-prod.modern.js
@@ -2470,62 +2470,6 @@ function hoistStyleQueueDependency(styleQueue) {
 function hoistStylesheetDependency(stylesheet) {
   this.stylesheets.add(stylesheet);
 }
-function emitEarlyPreloads(renderState, resumableState, shellComplete) {
-  if ((resumableState = renderState.onHeaders)) {
-    var headers = renderState.headers;
-    if (headers) {
-      var linkHeader = headers.preconnects;
-      headers.fontPreloads &&
-        (linkHeader && (linkHeader += ", "),
-        (linkHeader += headers.fontPreloads));
-      headers.highImagePreloads &&
-        (linkHeader && (linkHeader += ", "),
-        (linkHeader += headers.highImagePreloads));
-      if (!shellComplete) {
-        shellComplete = renderState.styles.values();
-        var queueStep = shellComplete.next();
-        a: for (
-          ;
-          0 < headers.remainingCapacity && !queueStep.done;
-          queueStep = shellComplete.next()
-        ) {
-          queueStep = queueStep.value.sheets.values();
-          for (
-            var sheetStep = queueStep.next();
-            0 < headers.remainingCapacity && !sheetStep.done;
-            sheetStep = queueStep.next()
-          ) {
-            var sheet = sheetStep.value;
-            sheetStep = sheet.props;
-            var key = sheetStep.href;
-            sheet = sheet.props;
-            sheet = getPreloadAsHeader(sheet.href, "style", {
-              crossOrigin: sheet.crossOrigin,
-              integrity: sheet.integrity,
-              nonce: sheet.nonce,
-              type: sheet.type,
-              fetchPriority: sheet.fetchPriority,
-              referrerPolicy: sheet.referrerPolicy,
-              media: sheet.media
-            });
-            if (2 <= (headers.remainingCapacity -= sheet.length))
-              (renderState.resets.style[key] = PRELOAD_NO_CREDS),
-                linkHeader && (linkHeader += ", "),
-                (linkHeader += sheet),
-                (renderState.resets.style[key] =
-                  "string" === typeof sheetStep.crossOrigin ||
-                  "string" === typeof sheetStep.integrity
-                    ? [sheetStep.crossOrigin, sheetStep.integrity]
-                    : PRELOAD_NO_CREDS);
-            else break a;
-          }
-        }
-      }
-      linkHeader ? resumableState({ Link: linkHeader }) : resumableState({});
-      renderState.headers = null;
-    }
-  }
-}
 function createRenderState(resumableState, generateStaticMarkup) {
   var idPrefix = resumableState.idPrefix,
     bootstrapChunks = [],
@@ -2539,16 +2483,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
       "\x3c/script>"
     );
   bootstrapScriptContent = idPrefix + "P:";
-  var JSCompiler_object_inline_segmentPrefix_1573 = idPrefix + "S:";
+  var JSCompiler_object_inline_segmentPrefix_1589 = idPrefix + "S:";
   idPrefix += "B:";
-  var JSCompiler_object_inline_preconnects_1588 = new Set(),
-    JSCompiler_object_inline_fontPreloads_1589 = new Set(),
-    JSCompiler_object_inline_highImagePreloads_1590 = new Set(),
-    JSCompiler_object_inline_styles_1591 = new Map(),
-    JSCompiler_object_inline_bootstrapScripts_1592 = new Set(),
-    JSCompiler_object_inline_scripts_1593 = new Set(),
-    JSCompiler_object_inline_bulkPreloads_1594 = new Set(),
-    JSCompiler_object_inline_preloads_1595 = {
+  var JSCompiler_object_inline_preconnects_1604 = new Set(),
+    JSCompiler_object_inline_fontPreloads_1605 = new Set(),
+    JSCompiler_object_inline_highImagePreloads_1606 = new Set(),
+    JSCompiler_object_inline_styles_1607 = new Map(),
+    JSCompiler_object_inline_bootstrapScripts_1608 = new Set(),
+    JSCompiler_object_inline_scripts_1609 = new Set(),
+    JSCompiler_object_inline_bulkPreloads_1610 = new Set(),
+    JSCompiler_object_inline_preloads_1611 = {
       images: new Map(),
       stylesheets: new Map(),
       scripts: new Map(),
@@ -2585,7 +2529,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
       scriptConfig.moduleScriptResources[href] = null;
       scriptConfig = [];
       pushLinkImpl(scriptConfig, props);
-      JSCompiler_object_inline_bootstrapScripts_1592.add(scriptConfig);
+      JSCompiler_object_inline_bootstrapScripts_1608.add(scriptConfig);
       bootstrapChunks.push('<script src="', escapeTextForBrowser(src));
       "string" === typeof integrity &&
         bootstrapChunks.push('" integrity="', escapeTextForBrowser(integrity));
@@ -2626,7 +2570,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         (props.moduleScriptResources[scriptConfig] = null),
         (props = []),
         pushLinkImpl(props, integrity),
-        JSCompiler_object_inline_bootstrapScripts_1592.add(props),
+        JSCompiler_object_inline_bootstrapScripts_1608.add(props),
         bootstrapChunks.push(
           '<script type="module" src="',
           escapeTextForBrowser(i)
@@ -2641,7 +2585,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
         bootstrapChunks.push('" async="">\x3c/script>');
   return {
     placeholderPrefix: bootstrapScriptContent,
-    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1573,
+    segmentPrefix: JSCompiler_object_inline_segmentPrefix_1589,
     boundaryPrefix: idPrefix,
     startInlineScript: "<script>",
     htmlChunks: null,
@@ -2662,14 +2606,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
     importMapChunks: [],
     preloadChunks: [],
     hoistableChunks: [],
-    preconnects: JSCompiler_object_inline_preconnects_1588,
-    fontPreloads: JSCompiler_object_inline_fontPreloads_1589,
-    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1590,
-    styles: JSCompiler_object_inline_styles_1591,
-    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1592,
-    scripts: JSCompiler_object_inline_scripts_1593,
-    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1594,
-    preloads: JSCompiler_object_inline_preloads_1595,
+    preconnects: JSCompiler_object_inline_preconnects_1604,
+    fontPreloads: JSCompiler_object_inline_fontPreloads_1605,
+    highImagePreloads: JSCompiler_object_inline_highImagePreloads_1606,
+    styles: JSCompiler_object_inline_styles_1607,
+    bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1608,
+    scripts: JSCompiler_object_inline_scripts_1609,
+    bulkPreloads: JSCompiler_object_inline_bulkPreloads_1610,
+    preloads: JSCompiler_object_inline_preloads_1611,
     boundaryResources: null,
     stylesToHoist: !1,
     generateStaticMarkup: generateStaticMarkup
@@ -4483,17 +4427,76 @@ function abortTask(task, request, error) {
   request.allPendingTasks--;
   0 === request.allPendingTasks && completeAll(request);
 }
+function safelyEmitEarlyPreloads(request, shellComplete) {
+  try {
+    var renderState = request.renderState,
+      onHeaders = renderState.onHeaders;
+    if (onHeaders) {
+      var headers = renderState.headers;
+      if (headers) {
+        renderState.headers = null;
+        var linkHeader = headers.preconnects;
+        headers.fontPreloads &&
+          (linkHeader && (linkHeader += ", "),
+          (linkHeader += headers.fontPreloads));
+        headers.highImagePreloads &&
+          (linkHeader && (linkHeader += ", "),
+          (linkHeader += headers.highImagePreloads));
+        if (!shellComplete) {
+          var queueIter = renderState.styles.values(),
+            queueStep = queueIter.next();
+          b: for (
+            ;
+            0 < headers.remainingCapacity && !queueStep.done;
+            queueStep = queueIter.next()
+          )
+            for (
+              var sheetIter = queueStep.value.sheets.values(),
+                sheetStep = sheetIter.next();
+              0 < headers.remainingCapacity && !sheetStep.done;
+              sheetStep = sheetIter.next()
+            ) {
+              var sheet = sheetStep.value,
+                props = sheet.props,
+                key = props.href,
+                props$jscomp$0 = sheet.props,
+                header = getPreloadAsHeader(props$jscomp$0.href, "style", {
+                  crossOrigin: props$jscomp$0.crossOrigin,
+                  integrity: props$jscomp$0.integrity,
+                  nonce: props$jscomp$0.nonce,
+                  type: props$jscomp$0.type,
+                  fetchPriority: props$jscomp$0.fetchPriority,
+                  referrerPolicy: props$jscomp$0.referrerPolicy,
+                  media: props$jscomp$0.media
+                });
+              if (2 <= (headers.remainingCapacity -= header.length))
+                (renderState.resets.style[key] = PRELOAD_NO_CREDS),
+                  linkHeader && (linkHeader += ", "),
+                  (linkHeader += header),
+                  (renderState.resets.style[key] =
+                    "string" === typeof props.crossOrigin ||
+                    "string" === typeof props.integrity
+                      ? [props.crossOrigin, props.integrity]
+                      : PRELOAD_NO_CREDS);
+              else break b;
+            }
+        }
+        linkHeader ? onHeaders({ Link: linkHeader }) : onHeaders({});
+      }
+    }
+  } catch (error) {
+    logRecoverableError(request, error);
+  }
+}
 function completeShell(request) {
-  null === request.trackedPostpones &&
-    emitEarlyPreloads(request.renderState, request.resumableState, !0);
+  null === request.trackedPostpones && safelyEmitEarlyPreloads(request, !0);
   request.onShellError = noop;
   request = request.onShellReady;
   request();
 }
 function completeAll(request) {
-  emitEarlyPreloads(
-    request.renderState,
-    request.resumableState,
+  safelyEmitEarlyPreloads(
+    request,
     null === request.trackedPostpones
       ? !0
       : null === request.completedRootSegment ||
@@ -5300,11 +5303,7 @@ function renderToStringImpl(
   children.flushScheduled = null !== children.destination;
   performWork(children);
   null === children.trackedPostpones &&
-    emitEarlyPreloads(
-      children.renderState,
-      children.resumableState,
-      0 === children.pendingRootTasks
-    );
+    safelyEmitEarlyPreloads(children, 0 === children.pendingRootTasks);
   abort(children, abortReason);
   if (1 === children.status)
     (children.status = 2), destination.destroy(children.fatalError);
@@ -5343,4 +5342,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-modern-fc53dc79";
+exports.version = "18.3.0-www-modern-88df5dd9";
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
index 5f8c04608c88a..77bcda5efaf6a 100644
--- a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
+++ b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
@@ -7694,6 +7694,9 @@ if (__DEV__) {
         var headers = renderState.headers;
 
         if (headers) {
+          // Even if onHeaders throws we don't want to call this again so
+          // we drop the headers state from this point onwards.
+          renderState.headers = null;
           var linkHeader = headers.preconnects;
 
           if (headers.fontPreloads) {
@@ -7776,7 +7779,6 @@ if (__DEV__) {
             onHeaders({});
           }
 
-          renderState.headers = null;
           return;
         }
       }
@@ -12826,6 +12828,19 @@ if (__DEV__) {
       if (request.allPendingTasks === 0) {
         completeAll(request);
       }
+    }
+
+    function safelyEmitEarlyPreloads(request, shellComplete) {
+      try {
+        emitEarlyPreloads(
+          request.renderState,
+          request.resumableState,
+          shellComplete
+        );
+      } catch (error) {
+        // We assume preloads are optimistic and thus non-fatal if errored.
+        logRecoverableError(request, error);
+      }
     } // I extracted this function out because we want to ensure we consistently emit preloads before
     // transitioning to the next request stage and this transition can happen in multiple places in this
     // implementation.
@@ -12838,11 +12853,7 @@ if (__DEV__) {
         // we should only be calling completeShell when the shell is complete so we
         // just use a literal here
         var shellComplete = true;
-        emitEarlyPreloads(
-          request.renderState,
-          request.resumableState,
-          shellComplete
-        );
+        safelyEmitEarlyPreloads(request, shellComplete);
       } // We have completed the shell so the shell can't error anymore.
 
       request.onShellError = noop;
@@ -12862,11 +12873,7 @@ if (__DEV__) {
           ? true // Prerender Request, we use the state of the root segment
           : request.completedRootSegment === null ||
             request.completedRootSegment.status !== POSTPONED;
-      emitEarlyPreloads(
-        request.renderState,
-        request.resumableState,
-        shellComplete
-      );
+      safelyEmitEarlyPreloads(request, shellComplete);
       var onAllReady = request.onAllReady;
       onAllReady();
     }
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
index bfa5b7c7f0dfe..b60d5a502f00d 100644
--- a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
+++ b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
@@ -2486,62 +2486,6 @@ function hoistStyleQueueDependency(styleQueue) {
 function hoistStylesheetDependency(stylesheet) {
   this.stylesheets.add(stylesheet);
 }
-function emitEarlyPreloads(renderState, resumableState, shellComplete) {
-  if ((resumableState = renderState.onHeaders)) {
-    var headers = renderState.headers;
-    if (headers) {
-      var linkHeader = headers.preconnects;
-      headers.fontPreloads &&
-        (linkHeader && (linkHeader += ", "),
-        (linkHeader += headers.fontPreloads));
-      headers.highImagePreloads &&
-        (linkHeader && (linkHeader += ", "),
-        (linkHeader += headers.highImagePreloads));
-      if (!shellComplete) {
-        shellComplete = renderState.styles.values();
-        var queueStep = shellComplete.next();
-        a: for (
-          ;
-          0 < headers.remainingCapacity && !queueStep.done;
-          queueStep = shellComplete.next()
-        ) {
-          queueStep = queueStep.value.sheets.values();
-          for (
-            var sheetStep = queueStep.next();
-            0 < headers.remainingCapacity && !sheetStep.done;
-            sheetStep = queueStep.next()
-          ) {
-            var sheet = sheetStep.value;
-            sheetStep = sheet.props;
-            var key = sheetStep.href;
-            sheet = sheet.props;
-            sheet = getPreloadAsHeader(sheet.href, "style", {
-              crossOrigin: sheet.crossOrigin,
-              integrity: sheet.integrity,
-              nonce: sheet.nonce,
-              type: sheet.type,
-              fetchPriority: sheet.fetchPriority,
-              referrerPolicy: sheet.referrerPolicy,
-              media: sheet.media
-            });
-            if (2 <= (headers.remainingCapacity -= sheet.length))
-              (renderState.resets.style[key] = PRELOAD_NO_CREDS),
-                linkHeader && (linkHeader += ", "),
-                (linkHeader += sheet),
-                (renderState.resets.style[key] =
-                  "string" === typeof sheetStep.crossOrigin ||
-                  "string" === typeof sheetStep.integrity
-                    ? [sheetStep.crossOrigin, sheetStep.integrity]
-                    : PRELOAD_NO_CREDS);
-            else break a;
-          }
-        }
-      }
-      linkHeader ? resumableState({ Link: linkHeader }) : resumableState({});
-      renderState.headers = null;
-    }
-  }
-}
 var REACT_ELEMENT_TYPE = Symbol.for("react.element"),
   REACT_PORTAL_TYPE = Symbol.for("react.portal"),
   REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -4320,17 +4264,76 @@ function abortTask(task, request, error) {
   request.allPendingTasks--;
   0 === request.allPendingTasks && completeAll(request);
 }
+function safelyEmitEarlyPreloads(request, shellComplete) {
+  try {
+    var renderState = request.renderState,
+      onHeaders = renderState.onHeaders;
+    if (onHeaders) {
+      var headers = renderState.headers;
+      if (headers) {
+        renderState.headers = null;
+        var linkHeader = headers.preconnects;
+        headers.fontPreloads &&
+          (linkHeader && (linkHeader += ", "),
+          (linkHeader += headers.fontPreloads));
+        headers.highImagePreloads &&
+          (linkHeader && (linkHeader += ", "),
+          (linkHeader += headers.highImagePreloads));
+        if (!shellComplete) {
+          var queueIter = renderState.styles.values(),
+            queueStep = queueIter.next();
+          b: for (
+            ;
+            0 < headers.remainingCapacity && !queueStep.done;
+            queueStep = queueIter.next()
+          )
+            for (
+              var sheetIter = queueStep.value.sheets.values(),
+                sheetStep = sheetIter.next();
+              0 < headers.remainingCapacity && !sheetStep.done;
+              sheetStep = sheetIter.next()
+            ) {
+              var sheet = sheetStep.value,
+                props = sheet.props,
+                key = props.href,
+                props$jscomp$0 = sheet.props,
+                header = getPreloadAsHeader(props$jscomp$0.href, "style", {
+                  crossOrigin: props$jscomp$0.crossOrigin,
+                  integrity: props$jscomp$0.integrity,
+                  nonce: props$jscomp$0.nonce,
+                  type: props$jscomp$0.type,
+                  fetchPriority: props$jscomp$0.fetchPriority,
+                  referrerPolicy: props$jscomp$0.referrerPolicy,
+                  media: props$jscomp$0.media
+                });
+              if (2 <= (headers.remainingCapacity -= header.length))
+                (renderState.resets.style[key] = PRELOAD_NO_CREDS),
+                  linkHeader && (linkHeader += ", "),
+                  (linkHeader += header),
+                  (renderState.resets.style[key] =
+                    "string" === typeof props.crossOrigin ||
+                    "string" === typeof props.integrity
+                      ? [props.crossOrigin, props.integrity]
+                      : PRELOAD_NO_CREDS);
+              else break b;
+            }
+        }
+        linkHeader ? onHeaders({ Link: linkHeader }) : onHeaders({});
+      }
+    }
+  } catch (error) {
+    logRecoverableError(request, error);
+  }
+}
 function completeShell(request) {
-  null === request.trackedPostpones &&
-    emitEarlyPreloads(request.renderState, request.resumableState, !0);
+  null === request.trackedPostpones && safelyEmitEarlyPreloads(request, !0);
   request.onShellError = noop;
   request = request.onShellReady;
   request();
 }
 function completeAll(request) {
-  emitEarlyPreloads(
-    request.renderState,
-    request.resumableState,
+  safelyEmitEarlyPreloads(
+    request,
     null === request.trackedPostpones
       ? !0
       : null === request.completedRootSegment ||