[Flight] Don't serialize toJSON in Debug path and omit wide arrays (#34759)

There's a couple of issues with serializing Buffer in the debug renders.
For one, the Node.js Buffer has a `toJSON` on it which turns the binary
data into a JSON array which is very inefficient to serialize compared
to the real buffer. For debug info we never really want to resolve these
and unlike the regular render we can't error. So this uses the trick
where we read the original value. It's still unfortunate that this
intermediate gets created at all but at least now we're not serializing
it.
Second, we have a limit on depth of objects but we didn't have a limit
on width like large arrays or typed arrays. This omits large arrays from
the payload when possible and make them deferred when there's a debug
channel.

Author: sebmarkbage

packages/react-server/src/ReactFlightServer.js

@@ -849,6 +849,49 @@ export function resolveRequest(): null | Request {
  return null;
 }
 
+functionisTypedArray(value: any): boolean{
+if(valueinstanceofArrayBuffer){
+returntrue;
+}
+ if (value instanceof Int8Array) {
+returntrue;
+}
+ if (value instanceof Uint8Array) {
+returntrue;
+}
+ if (value instanceof Uint8ClampedArray) {
+returntrue;
+}
+ if (value instanceof Int16Array) {
+returntrue;
+}
+ if (value instanceof Uint16Array) {
+returntrue;
+}
+ if (value instanceof Int32Array) {
+returntrue;
+}
+ if (value instanceof Uint32Array) {
+returntrue;
+}
+ if (value instanceof Float32Array) {
+returntrue;
+}
+ if (value instanceof Float64Array) {
+returntrue;
+}
+ if (value instanceof BigInt64Array) {
+returntrue;
+}
+ if (value instanceof BigUint64Array) {
+returntrue;
+}
+ if (value instanceof DataView) {
+returntrue;
+}
+ return false;
+}
+
 functionserializeDebugThenable(
 request: Request,
 counter: {objectLimit: number},
@@ -906,6 +949,17 @@ function serializeDebugThenable(
 enqueueFlush(request);
 return;
 }
+if(
+(isArray(value)&&value.length>200)||
+(isTypedArray(value)&&value.byteLength>1000)
+){
+// If this should be deferred, but we don't have a debug channel installed
+// it would get omitted. We can't omit outlined models but we can avoid
+// resolving the Promise at all by halting it.
+emitDebugHaltChunk(request,id);
+enqueueFlush(request);
+return;
+}
 emitOutlinedDebugModelChunk(request,id,counter,value);
 enqueueFlush(request);
 },
@@ -3066,6 +3120,10 @@ function serializeDebugTypedArray(
 tag: string,
 typedArray: $ArrayBufferView,
 ): string{
+if(typedArray.byteLength>1000&&!doNotLimit.has(typedArray)){
+// Defer large typed arrays.
+returnserializeDeferredObject(request,typedArray);
+}
 request.pendingDebugChunks++;
 constbufferId=request.nextChunkId++;
 emitTypedArrayChunk(request,bufferId,tag,typedArray,true);
@@ -4820,9 +4878,17 @@ function renderDebugModel(
 }
 
  if (isArray(value)) {
+if(value.length>200&&!doNotLimit.has(value)){
+// Defer large arrays. They're heavy to serialize.
+// TODO: Consider doing the same for objects with many properties too.
+returnserializeDeferredObject(request,value);
+}
  return value;
 }
 
+if(valueinstanceofDate){
+returnserializeDate(value);
+}
  if (value instanceof Map) {
 returnserializeDebugMap(request,counter,value);
 }
@@ -4930,15 +4996,6 @@ function renderDebugModel(
 }
 
 if(typeofvalue=== 'string'){
-if(value[value.length-1]==='Z'){
-// Possibly a Date, whose toJSON automatically calls toISOString
-// Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
-// $FlowFixMe[incompatible-use]
-constoriginalValue=parent[parentPropertyName];
-if(originalValueinstanceofDate){
-returnserializeDateFromDateJSON(value);
-}
-}
 if(value.length>=1024){
 // Large strings are counted towards the object limit.
 if(counter.objectLimit<=0){
@@ -5036,10 +5093,6 @@ function renderDebugModel(
 returnserializeBigInt(value);
 }
 
-if(valueinstanceofDate){
-returnserializeDate(value);
-}
-
  return 'unknown type ' + typeof value;
 }
 
@@ -5058,12 +5111,15 @@ function serializeDebugModel(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(
@@ -5114,12 +5170,15 @@ function emitOutlinedDebugModelChunk(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(

packages/react-server/src/ReactFlightServer.js

@@ -849,6 +849,49 @@ export function resolveRequest(): null | Request {
  return null;
 }
 
+functionisTypedArray(value: any): boolean{
+if(valueinstanceofArrayBuffer){
+returntrue;
+}
+ if (value instanceof Int8Array) {
+returntrue;
+}
+ if (value instanceof Uint8Array) {
+returntrue;
+}
+ if (value instanceof Uint8ClampedArray) {
+returntrue;
+}
+ if (value instanceof Int16Array) {
+returntrue;
+}
+ if (value instanceof Uint16Array) {
+returntrue;
+}
+ if (value instanceof Int32Array) {
+returntrue;
+}
+ if (value instanceof Uint32Array) {
+returntrue;
+}
+ if (value instanceof Float32Array) {
+returntrue;
+}
+ if (value instanceof Float64Array) {
+returntrue;
+}
+ if (value instanceof BigInt64Array) {
+returntrue;
+}
+ if (value instanceof BigUint64Array) {
+returntrue;
+}
+ if (value instanceof DataView) {
+returntrue;
+}
+ return false;
+}
+
 functionserializeDebugThenable(
 request: Request,
 counter: {objectLimit: number},
@@ -906,6 +949,17 @@ function serializeDebugThenable(
 enqueueFlush(request);
 return;
 }
+if(
+(isArray(value)&&value.length>200)||
+(isTypedArray(value)&&value.byteLength>1000)
+){
+// If this should be deferred, but we don't have a debug channel installed
+// it would get omitted. We can't omit outlined models but we can avoid
+// resolving the Promise at all by halting it.
+emitDebugHaltChunk(request,id);
+enqueueFlush(request);
+return;
+}
 emitOutlinedDebugModelChunk(request,id,counter,value);
 enqueueFlush(request);
 },
@@ -3066,6 +3120,10 @@ function serializeDebugTypedArray(
 tag: string,
 typedArray: $ArrayBufferView,
 ): string{
+if(typedArray.byteLength>1000&&!doNotLimit.has(typedArray)){
+// Defer large typed arrays.
+returnserializeDeferredObject(request,typedArray);
+}
 request.pendingDebugChunks++;
 constbufferId=request.nextChunkId++;
 emitTypedArrayChunk(request,bufferId,tag,typedArray,true);
@@ -4820,9 +4878,17 @@ function renderDebugModel(
 }
 
  if (isArray(value)) {
+if(value.length>200&&!doNotLimit.has(value)){
+// Defer large arrays. They're heavy to serialize.
+// TODO: Consider doing the same for objects with many properties too.
+returnserializeDeferredObject(request,value);
+}
  return value;
 }
 
+if(valueinstanceofDate){
+returnserializeDate(value);
+}
  if (value instanceof Map) {
 returnserializeDebugMap(request,counter,value);
 }
@@ -4930,15 +4996,6 @@ function renderDebugModel(
 }
 
 if(typeofvalue=== 'string'){
-if(value[value.length-1]==='Z'){
-// Possibly a Date, whose toJSON automatically calls toISOString
-// Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
-// $FlowFixMe[incompatible-use]
-constoriginalValue=parent[parentPropertyName];
-if(originalValueinstanceofDate){
-returnserializeDateFromDateJSON(value);
-}
-}
 if(value.length>=1024){
 // Large strings are counted towards the object limit.
 if(counter.objectLimit<=0){
@@ -5036,10 +5093,6 @@ function renderDebugModel(
 returnserializeBigInt(value);
 }
 
-if(valueinstanceofDate){
-returnserializeDate(value);
-}
-
  return 'unknown type ' + typeof value;
 }
 
@@ -5058,12 +5111,15 @@ function serializeDebugModel(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(
@@ -5114,12 +5170,15 @@ function emitOutlinedDebugModelChunk(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(

packages/react-server/src/ReactFlightServer.js

@@ -849,6 +849,49 @@ export function resolveRequest(): null | Request {
  return null;
 }
 
+functionisTypedArray(value: any): boolean{
+if(valueinstanceofArrayBuffer){
+returntrue;
+}
+ if (value instanceof Int8Array) {
+returntrue;
+}
+ if (value instanceof Uint8Array) {
+returntrue;
+}
+ if (value instanceof Uint8ClampedArray) {
+returntrue;
+}
+ if (value instanceof Int16Array) {
+returntrue;
+}
+ if (value instanceof Uint16Array) {
+returntrue;
+}
+ if (value instanceof Int32Array) {
+returntrue;
+}
+ if (value instanceof Uint32Array) {
+returntrue;
+}
+ if (value instanceof Float32Array) {
+returntrue;
+}
+ if (value instanceof Float64Array) {
+returntrue;
+}
+ if (value instanceof BigInt64Array) {
+returntrue;
+}
+ if (value instanceof BigUint64Array) {
+returntrue;
+}
+ if (value instanceof DataView) {
+returntrue;
+}
+ return false;
+}
+
 functionserializeDebugThenable(
 request: Request,
 counter: {objectLimit: number},
@@ -906,6 +949,17 @@ function serializeDebugThenable(
 enqueueFlush(request);
 return;
 }
+if(
+(isArray(value)&&value.length>200)||
+(isTypedArray(value)&&value.byteLength>1000)
+){
+// If this should be deferred, but we don't have a debug channel installed
+// it would get omitted. We can't omit outlined models but we can avoid
+// resolving the Promise at all by halting it.
+emitDebugHaltChunk(request,id);
+enqueueFlush(request);
+return;
+}
 emitOutlinedDebugModelChunk(request,id,counter,value);
 enqueueFlush(request);
 },
@@ -3066,6 +3120,10 @@ function serializeDebugTypedArray(
 tag: string,
 typedArray: $ArrayBufferView,
 ): string{
+if(typedArray.byteLength>1000&&!doNotLimit.has(typedArray)){
+// Defer large typed arrays.
+returnserializeDeferredObject(request,typedArray);
+}
 request.pendingDebugChunks++;
 constbufferId=request.nextChunkId++;
 emitTypedArrayChunk(request,bufferId,tag,typedArray,true);
@@ -4820,9 +4878,17 @@ function renderDebugModel(
 }
 
  if (isArray(value)) {
+if(value.length>200&&!doNotLimit.has(value)){
+// Defer large arrays. They're heavy to serialize.
+// TODO: Consider doing the same for objects with many properties too.
+returnserializeDeferredObject(request,value);
+}
  return value;
 }
 
+if(valueinstanceofDate){
+returnserializeDate(value);
+}
  if (value instanceof Map) {
 returnserializeDebugMap(request,counter,value);
 }
@@ -4930,15 +4996,6 @@ function renderDebugModel(
 }
 
 if(typeofvalue=== 'string'){
-if(value[value.length-1]==='Z'){
-// Possibly a Date, whose toJSON automatically calls toISOString
-// Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
-// $FlowFixMe[incompatible-use]
-constoriginalValue=parent[parentPropertyName];
-if(originalValueinstanceofDate){
-returnserializeDateFromDateJSON(value);
-}
-}
 if(value.length>=1024){
 // Large strings are counted towards the object limit.
 if(counter.objectLimit<=0){
@@ -5036,10 +5093,6 @@ function renderDebugModel(
 returnserializeBigInt(value);
 }
 
-if(valueinstanceofDate){
-returnserializeDate(value);
-}
-
  return 'unknown type ' + typeof value;
 }
 
@@ -5058,12 +5111,15 @@ function serializeDebugModel(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(
@@ -5114,12 +5170,15 @@ function emitOutlinedDebugModelChunk(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(

packages/react-server/src/ReactFlightServer.js

@@ -849,6 +849,49 @@ export function resolveRequest(): null | Request {
  return null;
 }
 
+functionisTypedArray(value: any): boolean{
+if(valueinstanceofArrayBuffer){
+returntrue;
+}
+ if (value instanceof Int8Array) {
+returntrue;
+}
+ if (value instanceof Uint8Array) {
+returntrue;
+}
+ if (value instanceof Uint8ClampedArray) {
+returntrue;
+}
+ if (value instanceof Int16Array) {
+returntrue;
+}
+ if (value instanceof Uint16Array) {
+returntrue;
+}
+ if (value instanceof Int32Array) {
+returntrue;
+}
+ if (value instanceof Uint32Array) {
+returntrue;
+}
+ if (value instanceof Float32Array) {
+returntrue;
+}
+ if (value instanceof Float64Array) {
+returntrue;
+}
+ if (value instanceof BigInt64Array) {
+returntrue;
+}
+ if (value instanceof BigUint64Array) {
+returntrue;
+}
+ if (value instanceof DataView) {
+returntrue;
+}
+ return false;
+}
+
 functionserializeDebugThenable(
 request: Request,
 counter: {objectLimit: number},
@@ -906,6 +949,17 @@ function serializeDebugThenable(
 enqueueFlush(request);
 return;
 }
+if(
+(isArray(value)&&value.length>200)||
+(isTypedArray(value)&&value.byteLength>1000)
+){
+// If this should be deferred, but we don't have a debug channel installed
+// it would get omitted. We can't omit outlined models but we can avoid
+// resolving the Promise at all by halting it.
+emitDebugHaltChunk(request,id);
+enqueueFlush(request);
+return;
+}
 emitOutlinedDebugModelChunk(request,id,counter,value);
 enqueueFlush(request);
 },
@@ -3066,6 +3120,10 @@ function serializeDebugTypedArray(
 tag: string,
 typedArray: $ArrayBufferView,
 ): string{
+if(typedArray.byteLength>1000&&!doNotLimit.has(typedArray)){
+// Defer large typed arrays.
+returnserializeDeferredObject(request,typedArray);
+}
 request.pendingDebugChunks++;
 constbufferId=request.nextChunkId++;
 emitTypedArrayChunk(request,bufferId,tag,typedArray,true);
@@ -4820,9 +4878,17 @@ function renderDebugModel(
 }
 
  if (isArray(value)) {
+if(value.length>200&&!doNotLimit.has(value)){
+// Defer large arrays. They're heavy to serialize.
+// TODO: Consider doing the same for objects with many properties too.
+returnserializeDeferredObject(request,value);
+}
  return value;
 }
 
+if(valueinstanceofDate){
+returnserializeDate(value);
+}
  if (value instanceof Map) {
 returnserializeDebugMap(request,counter,value);
 }
@@ -4930,15 +4996,6 @@ function renderDebugModel(
 }
 
 if(typeofvalue=== 'string'){
-if(value[value.length-1]==='Z'){
-// Possibly a Date, whose toJSON automatically calls toISOString
-// Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
-// $FlowFixMe[incompatible-use]
-constoriginalValue=parent[parentPropertyName];
-if(originalValueinstanceofDate){
-returnserializeDateFromDateJSON(value);
-}
-}
 if(value.length>=1024){
 // Large strings are counted towards the object limit.
 if(counter.objectLimit<=0){
@@ -5036,10 +5093,6 @@ function renderDebugModel(
 returnserializeBigInt(value);
 }
 
-if(valueinstanceofDate){
-returnserializeDate(value);
-}
-
  return 'unknown type ' + typeof value;
 }
 
@@ -5058,12 +5111,15 @@ function serializeDebugModel(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(
@@ -5114,12 +5170,15 @@ function emitOutlinedDebugModelChunk(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(

packages/react-server/src/ReactFlightServer.js

@@ -849,6 +849,49 @@ export function resolveRequest(): null | Request {
  return null;
 }
 
+functionisTypedArray(value: any): boolean{
+if(valueinstanceofArrayBuffer){
+returntrue;
+}
+ if (value instanceof Int8Array) {
+returntrue;
+}
+ if (value instanceof Uint8Array) {
+returntrue;
+}
+ if (value instanceof Uint8ClampedArray) {
+returntrue;
+}
+ if (value instanceof Int16Array) {
+returntrue;
+}
+ if (value instanceof Uint16Array) {
+returntrue;
+}
+ if (value instanceof Int32Array) {
+returntrue;
+}
+ if (value instanceof Uint32Array) {
+returntrue;
+}
+ if (value instanceof Float32Array) {
+returntrue;
+}
+ if (value instanceof Float64Array) {
+returntrue;
+}
+ if (value instanceof BigInt64Array) {
+returntrue;
+}
+ if (value instanceof BigUint64Array) {
+returntrue;
+}
+ if (value instanceof DataView) {
+returntrue;
+}
+ return false;
+}
+
 functionserializeDebugThenable(
 request: Request,
 counter: {objectLimit: number},
@@ -906,6 +949,17 @@ function serializeDebugThenable(
 enqueueFlush(request);
 return;
 }
+if(
+(isArray(value)&&value.length>200)||
+(isTypedArray(value)&&value.byteLength>1000)
+){
+// If this should be deferred, but we don't have a debug channel installed
+// it would get omitted. We can't omit outlined models but we can avoid
+// resolving the Promise at all by halting it.
+emitDebugHaltChunk(request,id);
+enqueueFlush(request);
+return;
+}
 emitOutlinedDebugModelChunk(request,id,counter,value);
 enqueueFlush(request);
 },
@@ -3066,6 +3120,10 @@ function serializeDebugTypedArray(
 tag: string,
 typedArray: $ArrayBufferView,
 ): string{
+if(typedArray.byteLength>1000&&!doNotLimit.has(typedArray)){
+// Defer large typed arrays.
+returnserializeDeferredObject(request,typedArray);
+}
 request.pendingDebugChunks++;
 constbufferId=request.nextChunkId++;
 emitTypedArrayChunk(request,bufferId,tag,typedArray,true);
@@ -4820,9 +4878,17 @@ function renderDebugModel(
 }
 
  if (isArray(value)) {
+if(value.length>200&&!doNotLimit.has(value)){
+// Defer large arrays. They're heavy to serialize.
+// TODO: Consider doing the same for objects with many properties too.
+returnserializeDeferredObject(request,value);
+}
  return value;
 }
 
+if(valueinstanceofDate){
+returnserializeDate(value);
+}
  if (value instanceof Map) {
 returnserializeDebugMap(request,counter,value);
 }
@@ -4930,15 +4996,6 @@ function renderDebugModel(
 }
 
 if(typeofvalue=== 'string'){
-if(value[value.length-1]==='Z'){
-// Possibly a Date, whose toJSON automatically calls toISOString
-// Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
-// $FlowFixMe[incompatible-use]
-constoriginalValue=parent[parentPropertyName];
-if(originalValueinstanceofDate){
-returnserializeDateFromDateJSON(value);
-}
-}
 if(value.length>=1024){
 // Large strings are counted towards the object limit.
 if(counter.objectLimit<=0){
@@ -5036,10 +5093,6 @@ function renderDebugModel(
 returnserializeBigInt(value);
 }
 
-if(valueinstanceofDate){
-returnserializeDate(value);
-}
-
  return 'unknown type ' + typeof value;
 }
 
@@ -5058,12 +5111,15 @@ function serializeDebugModel(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(
@@ -5114,12 +5170,15 @@ function emitOutlinedDebugModelChunk(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(

packages/react-server/src/ReactFlightServer.js

@@ -849,6 +849,49 @@ export function resolveRequest(): null | Request {
  return null;
 }
 
+functionisTypedArray(value: any): boolean{
+if(valueinstanceofArrayBuffer){
+returntrue;
+}
+ if (value instanceof Int8Array) {
+returntrue;
+}
+ if (value instanceof Uint8Array) {
+returntrue;
+}
+ if (value instanceof Uint8ClampedArray) {
+returntrue;
+}
+ if (value instanceof Int16Array) {
+returntrue;
+}
+ if (value instanceof Uint16Array) {
+returntrue;
+}
+ if (value instanceof Int32Array) {
+returntrue;
+}
+ if (value instanceof Uint32Array) {
+returntrue;
+}
+ if (value instanceof Float32Array) {
+returntrue;
+}
+ if (value instanceof Float64Array) {
+returntrue;
+}
+ if (value instanceof BigInt64Array) {
+returntrue;
+}
+ if (value instanceof BigUint64Array) {
+returntrue;
+}
+ if (value instanceof DataView) {
+returntrue;
+}
+ return false;
+}
+
 functionserializeDebugThenable(
 request: Request,
 counter: {objectLimit: number},
@@ -906,6 +949,17 @@ function serializeDebugThenable(
 enqueueFlush(request);
 return;
 }
+if(
+(isArray(value)&&value.length>200)||
+(isTypedArray(value)&&value.byteLength>1000)
+){
+// If this should be deferred, but we don't have a debug channel installed
+// it would get omitted. We can't omit outlined models but we can avoid
+// resolving the Promise at all by halting it.
+emitDebugHaltChunk(request,id);
+enqueueFlush(request);
+return;
+}
 emitOutlinedDebugModelChunk(request,id,counter,value);
 enqueueFlush(request);
 },
@@ -3066,6 +3120,10 @@ function serializeDebugTypedArray(
 tag: string,
 typedArray: $ArrayBufferView,
 ): string{
+if(typedArray.byteLength>1000&&!doNotLimit.has(typedArray)){
+// Defer large typed arrays.
+returnserializeDeferredObject(request,typedArray);
+}
 request.pendingDebugChunks++;
 constbufferId=request.nextChunkId++;
 emitTypedArrayChunk(request,bufferId,tag,typedArray,true);
@@ -4820,9 +4878,17 @@ function renderDebugModel(
 }
 
  if (isArray(value)) {
+if(value.length>200&&!doNotLimit.has(value)){
+// Defer large arrays. They're heavy to serialize.
+// TODO: Consider doing the same for objects with many properties too.
+returnserializeDeferredObject(request,value);
+}
  return value;
 }
 
+if(valueinstanceofDate){
+returnserializeDate(value);
+}
  if (value instanceof Map) {
 returnserializeDebugMap(request,counter,value);
 }
@@ -4930,15 +4996,6 @@ function renderDebugModel(
 }
 
 if(typeofvalue=== 'string'){
-if(value[value.length-1]==='Z'){
-// Possibly a Date, whose toJSON automatically calls toISOString
-// Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
-// $FlowFixMe[incompatible-use]
-constoriginalValue=parent[parentPropertyName];
-if(originalValueinstanceofDate){
-returnserializeDateFromDateJSON(value);
-}
-}
 if(value.length>=1024){
 // Large strings are counted towards the object limit.
 if(counter.objectLimit<=0){
@@ -5036,10 +5093,6 @@ function renderDebugModel(
 returnserializeBigInt(value);
 }
 
-if(valueinstanceofDate){
-returnserializeDate(value);
-}
-
  return 'unknown type ' + typeof value;
 }
 
@@ -5058,12 +5111,15 @@ function serializeDebugModel(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(
@@ -5114,12 +5170,15 @@ function emitOutlinedDebugModelChunk(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(

packages/react-server/src/ReactFlightServer.js

@@ -849,6 +849,49 @@ export function resolveRequest(): null | Request {
  return null;
 }
 
+functionisTypedArray(value: any): boolean{
+if(valueinstanceofArrayBuffer){
+returntrue;
+}
+ if (value instanceof Int8Array) {
+returntrue;
+}
+ if (value instanceof Uint8Array) {
+returntrue;
+}
+ if (value instanceof Uint8ClampedArray) {
+returntrue;
+}
+ if (value instanceof Int16Array) {
+returntrue;
+}
+ if (value instanceof Uint16Array) {
+returntrue;
+}
+ if (value instanceof Int32Array) {
+returntrue;
+}
+ if (value instanceof Uint32Array) {
+returntrue;
+}
+ if (value instanceof Float32Array) {
+returntrue;
+}
+ if (value instanceof Float64Array) {
+returntrue;
+}
+ if (value instanceof BigInt64Array) {
+returntrue;
+}
+ if (value instanceof BigUint64Array) {
+returntrue;
+}
+ if (value instanceof DataView) {
+returntrue;
+}
+ return false;
+}
+
 functionserializeDebugThenable(
 request: Request,
 counter: {objectLimit: number},
@@ -906,6 +949,17 @@ function serializeDebugThenable(
 enqueueFlush(request);
 return;
 }
+if(
+(isArray(value)&&value.length>200)||
+(isTypedArray(value)&&value.byteLength>1000)
+){
+// If this should be deferred, but we don't have a debug channel installed
+// it would get omitted. We can't omit outlined models but we can avoid
+// resolving the Promise at all by halting it.
+emitDebugHaltChunk(request,id);
+enqueueFlush(request);
+return;
+}
 emitOutlinedDebugModelChunk(request,id,counter,value);
 enqueueFlush(request);
 },
@@ -3066,6 +3120,10 @@ function serializeDebugTypedArray(
 tag: string,
 typedArray: $ArrayBufferView,
 ): string{
+if(typedArray.byteLength>1000&&!doNotLimit.has(typedArray)){
+// Defer large typed arrays.
+returnserializeDeferredObject(request,typedArray);
+}
 request.pendingDebugChunks++;
 constbufferId=request.nextChunkId++;
 emitTypedArrayChunk(request,bufferId,tag,typedArray,true);
@@ -4820,9 +4878,17 @@ function renderDebugModel(
 }
 
  if (isArray(value)) {
+if(value.length>200&&!doNotLimit.has(value)){
+// Defer large arrays. They're heavy to serialize.
+// TODO: Consider doing the same for objects with many properties too.
+returnserializeDeferredObject(request,value);
+}
  return value;
 }
 
+if(valueinstanceofDate){
+returnserializeDate(value);
+}
  if (value instanceof Map) {
 returnserializeDebugMap(request,counter,value);
 }
@@ -4930,15 +4996,6 @@ function renderDebugModel(
 }
 
 if(typeofvalue=== 'string'){
-if(value[value.length-1]==='Z'){
-// Possibly a Date, whose toJSON automatically calls toISOString
-// Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
-// $FlowFixMe[incompatible-use]
-constoriginalValue=parent[parentPropertyName];
-if(originalValueinstanceofDate){
-returnserializeDateFromDateJSON(value);
-}
-}
 if(value.length>=1024){
 // Large strings are counted towards the object limit.
 if(counter.objectLimit<=0){
@@ -5036,10 +5093,6 @@ function renderDebugModel(
 returnserializeBigInt(value);
 }
 
-if(valueinstanceofDate){
-returnserializeDate(value);
-}
-
  return 'unknown type ' + typeof value;
 }
 
@@ -5058,12 +5111,15 @@ function serializeDebugModel(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(
@@ -5114,12 +5170,15 @@ function emitOutlinedDebugModelChunk(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(

packages/react-server/src/ReactFlightServer.js

@@ -849,6 +849,49 @@ export function resolveRequest(): null | Request {
  return null;
 }
 
+functionisTypedArray(value: any): boolean{
+if(valueinstanceofArrayBuffer){
+returntrue;
+}
+ if (value instanceof Int8Array) {
+returntrue;
+}
+ if (value instanceof Uint8Array) {
+returntrue;
+}
+ if (value instanceof Uint8ClampedArray) {
+returntrue;
+}
+ if (value instanceof Int16Array) {
+returntrue;
+}
+ if (value instanceof Uint16Array) {
+returntrue;
+}
+ if (value instanceof Int32Array) {
+returntrue;
+}
+ if (value instanceof Uint32Array) {
+returntrue;
+}
+ if (value instanceof Float32Array) {
+returntrue;
+}
+ if (value instanceof Float64Array) {
+returntrue;
+}
+ if (value instanceof BigInt64Array) {
+returntrue;
+}
+ if (value instanceof BigUint64Array) {
+returntrue;
+}
+ if (value instanceof DataView) {
+returntrue;
+}
+ return false;
+}
+
 functionserializeDebugThenable(
 request: Request,
 counter: {objectLimit: number},
@@ -906,6 +949,17 @@ function serializeDebugThenable(
 enqueueFlush(request);
 return;
 }
+if(
+(isArray(value)&&value.length>200)||
+(isTypedArray(value)&&value.byteLength>1000)
+){
+// If this should be deferred, but we don't have a debug channel installed
+// it would get omitted. We can't omit outlined models but we can avoid
+// resolving the Promise at all by halting it.
+emitDebugHaltChunk(request,id);
+enqueueFlush(request);
+return;
+}
 emitOutlinedDebugModelChunk(request,id,counter,value);
 enqueueFlush(request);
 },
@@ -3066,6 +3120,10 @@ function serializeDebugTypedArray(
 tag: string,
 typedArray: $ArrayBufferView,
 ): string{
+if(typedArray.byteLength>1000&&!doNotLimit.has(typedArray)){
+// Defer large typed arrays.
+returnserializeDeferredObject(request,typedArray);
+}
 request.pendingDebugChunks++;
 constbufferId=request.nextChunkId++;
 emitTypedArrayChunk(request,bufferId,tag,typedArray,true);
@@ -4820,9 +4878,17 @@ function renderDebugModel(
 }
 
  if (isArray(value)) {
+if(value.length>200&&!doNotLimit.has(value)){
+// Defer large arrays. They're heavy to serialize.
+// TODO: Consider doing the same for objects with many properties too.
+returnserializeDeferredObject(request,value);
+}
  return value;
 }
 
+if(valueinstanceofDate){
+returnserializeDate(value);
+}
  if (value instanceof Map) {
 returnserializeDebugMap(request,counter,value);
 }
@@ -4930,15 +4996,6 @@ function renderDebugModel(
 }
 
 if(typeofvalue=== 'string'){
-if(value[value.length-1]==='Z'){
-// Possibly a Date, whose toJSON automatically calls toISOString
-// Make sure that `parent[parentPropertyName]` wasn't JSONified before `value` was passed to us
-// $FlowFixMe[incompatible-use]
-constoriginalValue=parent[parentPropertyName];
-if(originalValueinstanceofDate){
-returnserializeDateFromDateJSON(value);
-}
-}
 if(value.length>=1024){
 // Large strings are counted towards the object limit.
 if(counter.objectLimit<=0){
@@ -5036,10 +5093,6 @@ function renderDebugModel(
 returnserializeBigInt(value);
 }
 
-if(valueinstanceofDate){
-returnserializeDate(value);
-}
-
  return 'unknown type ' + typeof value;
 }
 
@@ -5058,12 +5111,15 @@ function serializeDebugModel(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(
@@ -5114,12 +5170,15 @@ function emitOutlinedDebugModelChunk(
  value: ReactClientValue,
  ): ReactJSONValue {
 try{
+// By-pass toJSON and use the original value.
+// $FlowFixMe[incompatible-use]
+const originalValue =this[parentPropertyName];
 returnrenderDebugModel(
 request,
 counter,
 this,
 parentPropertyName,
-value,
+originalValue,
 );
 }catch(x){
 return(