[Flight] Tailor the warning for binary data with a toJSON (Node Buffer) (react#36873)

A Node.js `Buffer` carries a `toJSON` method, so Flight serializes it
through that method instead of as binary, and it is deserialized as a
plain `{type: 'Buffer', data: [...]}` object rather than a `Buffer` or
`Uint8Array`. The warning React emits in this case reads "Uint8Array
objects are not supported", which is misleading on two counts: the value
is actually a `Buffer`, reported as `Uint8Array` only because that is
its `Object.prototype.toString` tag, and a real `Uint8Array` is in fact
supported, since it has no `toJSON` and serializes as binary. This makes
the message especially confusing when binary data such as a font is
passed as a serialized value.

The first commit adds a test that pins down the current behavior,
capturing both the misleading warning and the deserialization to a plain
`{type: 'Buffer', data: [...]}` object. The second commit replaces the
warning, for values that are `ArrayBuffer.isView`, with one that names
the actual cause and the fix: the data is serialized through `toJSON`
instead of as binary, so a `Uint8Array` or `ArrayBuffer` should be
passed to send binary data. The new branch only fires for a typed array
that also carries a `toJSON`, which in practice is a Node `Buffer`; a
plain `Uint8Array` or `ArrayBuffer` has no `toJSON`, never reaches this
branch, and continues to serialize as binary.

Author: unstubbable

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -2394,4 +2394,31 @@ describe('ReactFlightDOMNode', () => {
     // the next 1024-byte window.
     expect(result.payload).toEqual(binaryData);
   });
+
+  // A Node.js Buffer carries a `toJSON` method, so Flight serializes it through
+  // that method instead of as binary, and warns. It is therefore deserialized
+  // as a plain `{type: 'Buffer', data: [...]}` object rather than a
+  // Buffer/Uint8Array.
+  it('serializes a Node Buffer through its toJSON and warns', async () => {
+    const buffer = Buffer.from([1, 2, 3, 4]);
+    const stream = await serverAct(() =>
+      ReactServerDOMServer.renderToPipeableStream({font: buffer}),
+    );
+    assertConsoleErrorDev([
+      'Binary data with a toJSON method, such as a Node.js Buffer, is ' +
+        'serialized through toJSON instead of as binary. Pass a ' +
+        'Uint8Array or ArrayBuffer to send binary data.\n' +
+        '  {font: Uint8Array}\n' +
+        '         ^^^^^^^^^^',
+    ]);
+    const readable = new Stream.PassThrough(streamOptions);
+    const promise = ReactServerDOMClient.createFromNodeStream(readable, {
+      moduleMap: {},
+      moduleLoading: webpackModuleLoading,
+    });
+    stream.pipe(readable);
+    const result = await promise;
+    expect(Buffer.isBuffer(result.font)).toBe(false);
+    expect(result.font).toEqual({type: 'Buffer', data: [1, 2, 3, 4]});
+  });
 });

packages/react-server/src/ReactFlightServer.js

@@ -2822,7 +2822,18 @@ function resolveModel(
       // Call with the server component as the currently rendering component
       // for context.
       callWithDebugContextInDEV(request, task, () => {
-        if (objectName(originalValue) !== 'Object') {
+        if (ArrayBuffer.isView(originalValue)) {
+          // Binary data such as a Node.js Buffer carries a toJSON method, so it
+          // is serialized through that method rather than as binary. A plain
+          // Uint8Array or ArrayBuffer has no toJSON and is serialized as
+          // binary.
+          console.error(
+            'Binary data with a toJSON method, such as a Node.js Buffer, is ' +
+              'serialized through toJSON instead of as binary. Pass a ' +
+              'Uint8Array or ArrayBuffer to send binary data.%s',
+            describeObjectForErrorMessage(parent, parentPropertyName),
+          );
+        } else if (objectName(originalValue) !== 'Object') {
           const jsxParentType = jsxChildrenParents.get(parent);
           if (typeof jsxParentType === 'string') {
             console.error(