Trigger error for stream on client when it is not finished as expected

packages/next/src/client/app-index.tsx

@@ -90,6 +90,11 @@ function nextServerDataCallback(
   }
 }
 
+function isStreamErrorOrUnfinished(ctr: ReadableStreamDefaultController) {
+  // If `desiredSize` is null, it means the stream is closed or errored. If it is lower than 0, the stream is still unfinished.
+  return ctr.desiredSize === null || ctr.desiredSize < 0
+}
+
 // There might be race conditions between `nextServerDataRegisterWriter` and
 // `DOMContentLoaded`. The former will be called when React starts to hydrate
 // the root, the latter will be called when the DOM is fully loaded.
@@ -104,7 +109,15 @@ function nextServerDataRegisterWriter(ctr: ReadableStreamDefaultController) {
       ctr.enqueue(typeof val === 'string' ? encoder.encode(val) : val)
     })
     if (initialServerDataLoaded && !initialServerDataFlushed) {
-      ctr.close()
+      if (isStreamErrorOrUnfinished(ctr)) {
+        ctr.error(
+          new Error(
+            'The connection to the page was unexpectedly closed, possibly due to the stop button being clicked, loss of Wi-Fi, or an unstable internet connection.'
+          )
+        )
+      } else {
+        ctr.close()
+      }
       initialServerDataFlushed = true
       initialServerDataBuffer = undefined
     }
@@ -122,11 +135,14 @@ const DOMContentLoaded = function () {
   }
   initialServerDataLoaded = true
 }
+
+const queueTask = queueMicrotask || ((fn: Function) => setTimeout(fn, 0))
+
 // It's possible that the DOM is already loaded.
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', DOMContentLoaded, false)
 } else {
-  DOMContentLoaded()
+  queueTask(DOMContentLoaded)
 }
 
 const nextServerDataLoadingGlobal = ((self as any).__next_f =