Move debug data first in the stream

This is unfortunate. Ideally you'd expect it to be the least priority but
because it blocks the parent elements from resolving it ends up being better
to have it first anyway.

Author: sebmarkbage

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

@@ -674,7 +674,7 @@ describe('ReactFlightDOMEdge', () => {
     const [stream2, drip] = dripStream(stream);
 
     // Allow some of the content through.
-    drip(5000);
+    drip(__DEV__ ? 7500 : 5000);
 
     const result = await ReactServerDOMClient.createFromReadableStream(
       stream2,

packages/react-server/src/ReactFlightServer.js

@@ -5363,6 +5363,24 @@ function flushCompletedChunks(
     }
     hintChunks.splice(0, i);
 
+    // Debug meta data comes before the model data because it will often end up blocking the model from
+    // completing since the JSX will reference the debug data.
+    if (__DEV__) {
+      const debugChunks = request.completedDebugChunks;
+      i = 0;
+      for (; i < debugChunks.length; i++) {
+        request.pendingChunks--;
+        const chunk = debugChunks[i];
+        const keepWriting: boolean = writeChunkAndReturn(destination, chunk);
+        if (!keepWriting) {
+          request.destination = null;
+          i++;
+          break;
+        }
+      }
+      debugChunks.splice(0, i);
+    }
+
     // Next comes model data.
     const regularChunks = request.completedRegularChunks;
     i = 0;
@@ -5394,24 +5412,6 @@ function flushCompletedChunks(
       }
     }
     errorChunks.splice(0, i);
-
-    // Next comes debug meta data.
-    // TODO: Move this first since other chunks are blocked on their debug info. I'm only testing that the client is resilient.
-    if (__DEV__) {
-      const debugChunks = request.completedDebugChunks;
-      i = 0;
-      for (; i < debugChunks.length; i++) {
-        request.pendingChunks--;
-        const chunk = debugChunks[i];
-        const keepWriting: boolean = writeChunkAndReturn(destination, chunk);
-        if (!keepWriting) {
-          request.destination = null;
-          i++;
-          break;
-        }
-      }
-      debugChunks.splice(0, i);
-    }
   } finally {
     request.flushScheduled = false;
     completeWriting(destination);