[Fizz] Fallback to client replaying actions if we're trying to serial…

…ize a Blob (#28987) This follows the same principle as in #28611. We cannot serialize Blobs of a form data into HTML because you can't initialize a file input to some value. However the serialization of state in an Action can contain blobs. In this case we do error but outside the try/catch that recovers to error to client replaying instead of MPA mode. This errors earlier to ensure that this works. Testing this is a bit annoying because JSDOM doesn't have any of the Blob methods but the Blob needs to be compatible with FormData and the FormData needs to be compatible with `<form>` nodes in these tests. So I polyfilled those in JSDOM with some hacks. A possible future enhancement would be to encode these blobs in a base64 mode instead and have some way to receive them on the server. It's just a matter of layering this. I think the RSC layer's `FORM_DATA` implementation can pass some flag to encode as base64 and then have decodeAction include some way to parse them. That way this case would work in MPA mode too. DiffTrain build for [6bac4f2](6bac4f2)
facebook · May 8, 2024 · 86893d4 · 86893d4
1 parent 7e3000e
commit 86893d4
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 72 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-5d29478716cefbf8290dfdd19129156c2ac75973
+6bac4f2f31378cd58dffe6181e00639366a6081a
diff --git 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 = '19.0.0-www-classic-f3d84129';
+var ReactVersion = '19.0.0-www-classic-b547cfd9';
 
 // This refers to a WWW module.
 var warningWWW = require('warning');
@@ -2572,11 +2572,7 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
  var target = this;
  target.push(startHiddenInputChunk);
-
- if (typeof value !== 'string') {
- throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
- }
-
+ validateAdditionalFormField(value);
  pushStringAttribute(target, 'name', key);
  pushStringAttribute(target, 'value', value);
  target.push(endOfStartTagSelfClosing);
@@ -2589,14 +2585,35 @@ function pushAdditionalFormFields(target, formData) {
  }
 }
 
+function validateAdditionalFormField(value, key) {
+ if (typeof value !== 'string') {
+ throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
+ }
+}
+
+function validateAdditionalFormFields(formData) {
+ if (formData != null) {
+ // $FlowFixMe[prop-missing]: FormData has forEach.
+ formData.forEach(validateAdditionalFormField);
+ }
+
+ return formData;
+}
+
 function getCustomFormFields(resumableState, formAction) {
  var customAction = formAction.$$FORM_ACTION;
 
  if (typeof customAction === 'function') {
  var prefix = makeFormFieldPrefix(resumableState);
 
  try {
- return formAction.$$FORM_ACTION(prefix);
+ var customFields = formAction.$$FORM_ACTION(prefix);
+
+ if (customFields) {
+ validateAdditionalFormFields(customFields.data);
+ }
+
+ return customFields;
  } catch (x) {
  if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
  // Rethrow suspense.

diff --git 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 = '19.0.0-www-modern-f9bdfca0';
+var ReactVersion = '19.0.0-www-modern-ce28692a';
 
 // This refers to a WWW module.
 var warningWWW = require('warning');
@@ -2572,11 +2572,7 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
  var target = this;
  target.push(startHiddenInputChunk);
-
- if (typeof value !== 'string') {
- throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
- }
-
+ validateAdditionalFormField(value);
  pushStringAttribute(target, 'name', key);
  pushStringAttribute(target, 'value', value);
  target.push(endOfStartTagSelfClosing);
@@ -2589,14 +2585,35 @@ function pushAdditionalFormFields(target, formData) {
  }
 }
 
+function validateAdditionalFormField(value, key) {
+ if (typeof value !== 'string') {
+ throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
+ }
+}
+
+function validateAdditionalFormFields(formData) {
+ if (formData != null) {
+ // $FlowFixMe[prop-missing]: FormData has forEach.
+ formData.forEach(validateAdditionalFormField);
+ }
+
+ return formData;
+}
+
 function getCustomFormFields(resumableState, formAction) {
  var customAction = formAction.$$FORM_ACTION;
 
  if (typeof customAction === 'function') {
  var prefix = makeFormFieldPrefix(resumableState);
 
  try {
- return formAction.$$FORM_ACTION(prefix);
+ var customFields = formAction.$$FORM_ACTION(prefix);
+
+ if (customFields) {
+ validateAdditionalFormFields(customFields.data);
+ }
+
+ return customFields;
  } catch (x) {
  if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
  // Rethrow suspense.

diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -445,17 +445,25 @@ var actionJavaScriptURL = escapeTextForBrowser(
 );
 function pushAdditionalFormField(value, key) {
  this.push('<input type="hidden"');
- if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
+ validateAdditionalFormField(value);
  pushStringAttribute(this, "name", key);
  pushStringAttribute(this, "value", value);
  this.push("/>");
 }
+function validateAdditionalFormField(value) {
+ if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
+}
 function getCustomFormFields(resumableState, formAction) {
  if ("function" === typeof formAction.$$FORM_ACTION) {
  var id = resumableState.nextFormID++;
  resumableState = resumableState.idPrefix + id;
  try {
- return formAction.$$FORM_ACTION(resumableState);
+ var customFields = formAction.$$FORM_ACTION(resumableState);
+ if (customFields) {
+ var formData = customFields.data;
+ null != formData && formData.forEach(validateAdditionalFormField);
+ }
+ return customFields;
  } catch (x) {
  if ("object" === typeof x && null !== x && "function" === typeof x.then)
  throw x;
@@ -2627,16 +2635,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
  "\x3c/script>"
  );
  bootstrapScriptContent = idPrefix + "P:";
- var JSCompiler_object_inline_segmentPrefix_1631 = idPrefix + "S:";
+ var JSCompiler_object_inline_segmentPrefix_1633 = idPrefix + "S:";
  idPrefix += "B:";
- var JSCompiler_object_inline_preconnects_1645 = new Set(),
- JSCompiler_object_inline_fontPreloads_1646 = new Set(),
- JSCompiler_object_inline_highImagePreloads_1647 = new Set(),
- JSCompiler_object_inline_styles_1648 = new Map(),
- JSCompiler_object_inline_bootstrapScripts_1649 = new Set(),
- JSCompiler_object_inline_scripts_1650 = new Set(),
- JSCompiler_object_inline_bulkPreloads_1651 = new Set(),
- JSCompiler_object_inline_preloads_1652 = {
+ var JSCompiler_object_inline_preconnects_1647 = new Set(),
+ JSCompiler_object_inline_fontPreloads_1648 = new Set(),
+ JSCompiler_object_inline_highImagePreloads_1649 = new Set(),
+ JSCompiler_object_inline_styles_1650 = new Map(),
+ JSCompiler_object_inline_bootstrapScripts_1651 = new Set(),
+ JSCompiler_object_inline_scripts_1652 = new Set(),
+ JSCompiler_object_inline_bulkPreloads_1653 = new Set(),
+ JSCompiler_object_inline_preloads_1654 = {
  images: new Map(),
  stylesheets: new Map(),
  scripts: new Map(),
@@ -2673,7 +2681,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
  scriptConfig.moduleScriptResources[href] = null;
  scriptConfig = [];
  pushLinkImpl(scriptConfig, props);
- JSCompiler_object_inline_bootstrapScripts_1649.add(scriptConfig);
+ JSCompiler_object_inline_bootstrapScripts_1651.add(scriptConfig);
  bootstrapChunks.push('<script src="', escapeTextForBrowser(src));
  "string" === typeof integrity &&
  bootstrapChunks.push('" integrity="', escapeTextForBrowser(integrity));
@@ -2714,7 +2722,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
  (props.moduleScriptResources[scriptConfig] = null),
  (props = []),
  pushLinkImpl(props, integrity),
- JSCompiler_object_inline_bootstrapScripts_1649.add(props),
+ JSCompiler_object_inline_bootstrapScripts_1651.add(props),
  bootstrapChunks.push(
  '<script type="module" src="',
  escapeTextForBrowser(i)
@@ -2729,7 +2737,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
  bootstrapChunks.push('" async="">\x3c/script>');
  return {
  placeholderPrefix: bootstrapScriptContent,
- segmentPrefix: JSCompiler_object_inline_segmentPrefix_1631,
+ segmentPrefix: JSCompiler_object_inline_segmentPrefix_1633,
  boundaryPrefix: idPrefix,
  startInlineScript: "<script>",
  htmlChunks: null,
@@ -2749,14 +2757,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
  charsetChunks: [],
  viewportChunks: [],
  hoistableChunks: [],
- preconnects: JSCompiler_object_inline_preconnects_1645,
- fontPreloads: JSCompiler_object_inline_fontPreloads_1646,
- highImagePreloads: JSCompiler_object_inline_highImagePreloads_1647,
- styles: JSCompiler_object_inline_styles_1648,
- bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1649,
- scripts: JSCompiler_object_inline_scripts_1650,
- bulkPreloads: JSCompiler_object_inline_bulkPreloads_1651,
- preloads: JSCompiler_object_inline_preloads_1652,
+ preconnects: JSCompiler_object_inline_preconnects_1647,
+ fontPreloads: JSCompiler_object_inline_fontPreloads_1648,
+ highImagePreloads: JSCompiler_object_inline_highImagePreloads_1649,
+ styles: JSCompiler_object_inline_styles_1650,
+ bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1651,
+ scripts: JSCompiler_object_inline_scripts_1652,
+ bulkPreloads: JSCompiler_object_inline_bulkPreloads_1653,
+ preloads: JSCompiler_object_inline_preloads_1654,
  stylesToHoist: !1,
  generateStaticMarkup: generateStaticMarkup
  };
@@ -5691,4 +5699,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 = "19.0.0-www-classic-a976e819";
+exports.version = "19.0.0-www-classic-444074d7";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js
@@ -445,17 +445,25 @@ var actionJavaScriptURL = escapeTextForBrowser(
 );
 function pushAdditionalFormField(value, key) {
  this.push('<input type="hidden"');
- if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
+ validateAdditionalFormField(value);
  pushStringAttribute(this, "name", key);
  pushStringAttribute(this, "value", value);
  this.push("/>");
 }
+function validateAdditionalFormField(value) {
+ if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
+}
 function getCustomFormFields(resumableState, formAction) {
  if ("function" === typeof formAction.$$FORM_ACTION) {
  var id = resumableState.nextFormID++;
  resumableState = resumableState.idPrefix + id;
  try {
- return formAction.$$FORM_ACTION(resumableState);
+ var customFields = formAction.$$FORM_ACTION(resumableState);
+ if (customFields) {
+ var formData = customFields.data;
+ null != formData && formData.forEach(validateAdditionalFormField);
+ }
+ return customFields;
  } catch (x) {
  if ("object" === typeof x && null !== x && "function" === typeof x.then)
  throw x;
@@ -2627,16 +2635,16 @@ function createRenderState(resumableState, generateStaticMarkup) {
  "\x3c/script>"
  );
  bootstrapScriptContent = idPrefix + "P:";
- var JSCompiler_object_inline_segmentPrefix_1618 = idPrefix + "S:";
+ var JSCompiler_object_inline_segmentPrefix_1620 = idPrefix + "S:";
  idPrefix += "B:";
- var JSCompiler_object_inline_preconnects_1632 = new Set(),
- JSCompiler_object_inline_fontPreloads_1633 = new Set(),
- JSCompiler_object_inline_highImagePreloads_1634 = new Set(),
- JSCompiler_object_inline_styles_1635 = new Map(),
- JSCompiler_object_inline_bootstrapScripts_1636 = new Set(),
- JSCompiler_object_inline_scripts_1637 = new Set(),
- JSCompiler_object_inline_bulkPreloads_1638 = new Set(),
- JSCompiler_object_inline_preloads_1639 = {
+ var JSCompiler_object_inline_preconnects_1634 = new Set(),
+ JSCompiler_object_inline_fontPreloads_1635 = new Set(),
+ JSCompiler_object_inline_highImagePreloads_1636 = new Set(),
+ JSCompiler_object_inline_styles_1637 = new Map(),
+ JSCompiler_object_inline_bootstrapScripts_1638 = new Set(),
+ JSCompiler_object_inline_scripts_1639 = new Set(),
+ JSCompiler_object_inline_bulkPreloads_1640 = new Set(),
+ JSCompiler_object_inline_preloads_1641 = {
  images: new Map(),
  stylesheets: new Map(),
  scripts: new Map(),
@@ -2673,7 +2681,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
  scriptConfig.moduleScriptResources[href] = null;
  scriptConfig = [];
  pushLinkImpl(scriptConfig, props);
- JSCompiler_object_inline_bootstrapScripts_1636.add(scriptConfig);
+ JSCompiler_object_inline_bootstrapScripts_1638.add(scriptConfig);
  bootstrapChunks.push('<script src="', escapeTextForBrowser(src));
  "string" === typeof integrity &&
  bootstrapChunks.push('" integrity="', escapeTextForBrowser(integrity));
@@ -2714,7 +2722,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
  (props.moduleScriptResources[scriptConfig] = null),
  (props = []),
  pushLinkImpl(props, integrity),
- JSCompiler_object_inline_bootstrapScripts_1636.add(props),
+ JSCompiler_object_inline_bootstrapScripts_1638.add(props),
  bootstrapChunks.push(
  '<script type="module" src="',
  escapeTextForBrowser(i)
@@ -2729,7 +2737,7 @@ function createRenderState(resumableState, generateStaticMarkup) {
  bootstrapChunks.push('" async="">\x3c/script>');
  return {
  placeholderPrefix: bootstrapScriptContent,
- segmentPrefix: JSCompiler_object_inline_segmentPrefix_1618,
+ segmentPrefix: JSCompiler_object_inline_segmentPrefix_1620,
  boundaryPrefix: idPrefix,
  startInlineScript: "<script>",
  htmlChunks: null,
@@ -2749,14 +2757,14 @@ function createRenderState(resumableState, generateStaticMarkup) {
  charsetChunks: [],
  viewportChunks: [],
  hoistableChunks: [],
- preconnects: JSCompiler_object_inline_preconnects_1632,
- fontPreloads: JSCompiler_object_inline_fontPreloads_1633,
- highImagePreloads: JSCompiler_object_inline_highImagePreloads_1634,
- styles: JSCompiler_object_inline_styles_1635,
- bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1636,
- scripts: JSCompiler_object_inline_scripts_1637,
- bulkPreloads: JSCompiler_object_inline_bulkPreloads_1638,
- preloads: JSCompiler_object_inline_preloads_1639,
+ preconnects: JSCompiler_object_inline_preconnects_1634,
+ fontPreloads: JSCompiler_object_inline_fontPreloads_1635,
+ highImagePreloads: JSCompiler_object_inline_highImagePreloads_1636,
+ styles: JSCompiler_object_inline_styles_1637,
+ bootstrapScripts: JSCompiler_object_inline_bootstrapScripts_1638,
+ scripts: JSCompiler_object_inline_scripts_1639,
+ bulkPreloads: JSCompiler_object_inline_bulkPreloads_1640,
+ preloads: JSCompiler_object_inline_preloads_1641,
  stylesToHoist: !1,
  generateStaticMarkup: generateStaticMarkup
  };
@@ -5669,4 +5677,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 = "19.0.0-www-modern-54e820e3";
+exports.version = "19.0.0-www-modern-df91acfc";
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
@@ -2569,11 +2569,7 @@ var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
 function pushAdditionalFormField(value, key) {
  var target = this;
  target.push(startHiddenInputChunk);
-
- if (typeof value !== 'string') {
- throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'It probably means you are closing over binary data or FormData in a Server Action.');
- }
-
+ validateAdditionalFormField(value);
  pushStringAttribute(target, 'name', key);
  pushStringAttribute(target, 'value', value);
  target.push(endOfStartTagSelfClosing);
@@ -2586,14 +2582,35 @@ function pushAdditionalFormFields(target, formData) {
  }
 }
 
+function validateAdditionalFormField(value, key) {
+ if (typeof value !== 'string') {
+ throw new Error('File/Blob fields are not yet supported in progressive forms. ' + 'Will fallback to client hydration.');
+ }
+}
+
+function validateAdditionalFormFields(formData) {
+ if (formData != null) {
+ // $FlowFixMe[prop-missing]: FormData has forEach.
+ formData.forEach(validateAdditionalFormField);
+ }
+
+ return formData;
+}
+
 function getCustomFormFields(resumableState, formAction) {
  var customAction = formAction.$$FORM_ACTION;
 
  if (typeof customAction === 'function') {
  var prefix = makeFormFieldPrefix(resumableState);
 
  try {
- return formAction.$$FORM_ACTION(prefix);
+ var customFields = formAction.$$FORM_ACTION(prefix);
+
+ if (customFields) {
+ validateAdditionalFormFields(customFields.data);
+ }
+
+ return customFields;
  } catch (x) {
  if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
  // Rethrow suspense.