Fix/web stream error handling

packages/runtime-core/src/component.ts

@@ -983,6 +983,28 @@ export function registerRuntimeCompiler(_compile: any): void {
 // dev only
 export const isRuntimeOnly = (): boolean => !compile
 
+/**
+ * @internal
+ */
+export function getResolvedCompilerOptions(
+  instance: ComponentInternalInstance,
+): CompilerOptions {
+  const Component = instance.type as ComponentOptions
+  const { isCustomElement, compilerOptions } = instance.appContext.config
+  const { delimiters, compilerOptions: componentCompilerOptions } = Component
+
+  return extend(
+    extend(
+      {
+        isCustomElement,
+        delimiters,
+      },
+      compilerOptions,
+    ),
+    componentCompilerOptions,
+  )
+}
+
 export function finishComponentSetup(
   instance: ComponentInternalInstance,
   isSSR: boolean,
@@ -1014,19 +1036,7 @@ export function finishComponentSetup(
         if (__DEV__) {
           startMeasure(instance, `compile`)
         }
-        const { isCustomElement, compilerOptions } = instance.appContext.config
-        const { delimiters, compilerOptions: componentCompilerOptions } =
-          Component
-        const finalCompilerOptions: CompilerOptions = extend(
-          extend(
-            {
-              isCustomElement,
-              delimiters,
-            },
-            compilerOptions,
-          ),
-          componentCompilerOptions,
-        )
+        const finalCompilerOptions = getResolvedCompilerOptions(instance)
         if (__COMPAT__) {
           // pass runtime compat config into the compiler
           finalCompilerOptions.compatConfig = Object.create(globalCompatConfig)

packages/runtime-core/src/index.ts

@@ -395,6 +395,7 @@ export { transformVNodeArgs } from './vnode'
 import {
   createComponentInstance,
   getComponentPublicInstance,
+  getResolvedCompilerOptions,
   setupComponent,
 } from './component'
 import { renderComponentRoot } from './componentRenderUtils'
@@ -414,6 +415,7 @@ const _ssrUtils: {
   ensureValidVNode: typeof ensureValidVNode
   pushWarningContext: typeof pushWarningContext
   popWarningContext: typeof popWarningContext
+  getResolvedCompilerOptions: typeof getResolvedCompilerOptions
 } = {
   createComponentInstance,
   setupComponent,
@@ -425,6 +427,7 @@ const _ssrUtils: {
   ensureValidVNode,
   pushWarningContext,
   popWarningContext,
+  getResolvedCompilerOptions,
 }
 
 /**

packages/server-renderer/__tests__/webStream.spec.ts

@@ -64,3 +64,26 @@ test('pipeToWebWritable', async () => {
 
   expect(res).toBe(`<!--[--><div>parent</div><div>async</div><!--]-->`)
 })
+
+test('pipeToWebWritable error handling', async () => {
+  const App = {
+    ssrRender() {
+      throw new Error('ssr render error')
+    },
+  }
+
+  let abortedReason: any
+  const writable = new WritableStream({
+    abort(reason) {
+      abortedReason = reason
+    },
+  })
+
+  pipeToWebWritable(createApp(App), {}, writable)
+
+  // Wait for the error to propagate
+  await new Promise(resolve => setTimeout(resolve, 10))
+
+  expect(abortedReason).toBeInstanceOf(Error)
+  expect(abortedReason.message).toBe('ssr render error')
+})

packages/server-renderer/src/helpers/ssrCompile.ts

@@ -1,11 +1,12 @@
 import {
   type ComponentInternalInstance,
   type ComponentOptions,
+  ssrUtils,
   warn,
 } from 'vue'
 import { compile } from '@vue/compiler-ssr'
 import { NO, extend, generateCodeFrame, isFunction } from '@vue/shared'
 import type { CompilerError, CompilerOptions } from '@vue/compiler-core'
 import type { PushFn } from '../render'
 
 import * as Vue from 'vue'
@@ -32,21 +33,7 @@
     )
   }
 
-  // TODO: This is copied from runtime-core/src/component.ts and should probably be refactored
-  const Component = instance.type as ComponentOptions
-  const { isCustomElement, compilerOptions } = instance.appContext.config
-  const { delimiters, compilerOptions: componentCompilerOptions } = Component
-
-  const finalCompilerOptions: CompilerOptions = extend(
-    extend(
-      {
-        isCustomElement,
-        delimiters,
-      },
-      compilerOptions,
-    ),
-    componentCompilerOptions,
-  )
+  const finalCompilerOptions = ssrUtils.getResolvedCompilerOptions(instance)
 
   finalCompilerOptions.isCustomElement =
     finalCompilerOptions.isCustomElement || NO

packages/server-renderer/src/renderToStream.ts

@@ -14,7 +14,7 @@
 const { isVNode } = ssrUtils
 
 export interface SimpleReadable {
-  push(chunk: string | null): void
+  push(chunk: string | null): void | Promise<void>
   destroy(err: any): void
 }
 
@@ -29,26 +29,37 @@
         item = await item
       }
       if (isString(item)) {
-        stream.push(item)
+        const res = stream.push(item)
+        if (isPromise(res)) await res
       } else {
         await unrollBuffer(item, stream)
       }
     }
   } else {
-    // sync buffer can be more efficiently unrolled without unnecessary await
-    // ticks
-    unrollBufferSync(buffer, stream)
+    const res = unrollBufferSync(buffer, stream)
+    if (isPromise(res)) await res
   }
 }
 
-function unrollBufferSync(buffer: SSRBuffer, stream: SimpleReadable) {
+function unrollBufferSync(
+  buffer: SSRBuffer,
+  stream: SimpleReadable,
+): void | Promise<void> {
   for (let i = 0; i < buffer.length; i++) {
     let item = buffer[i]
     if (isString(item)) {
-      stream.push(item)
+      const res = stream.push(item)
+      if (isPromise(res)) {
+        // if the stream is async, we can't unroll it syncly anymore
+        // this can happen if a sync buffer is being pushed to an async stream
+        return res.then(() => unrollBufferSync(buffer.slice(i + 1), stream))
+      }
     } else {
       // since this is a sync buffer, child buffers are never promises
-      unrollBufferSync(item as SSRBuffer, stream)
+      const res = unrollBufferSync(item as SSRBuffer, stream)
+      if (isPromise(res)) {
+        return res.then(() => unrollBufferSync(buffer.slice(i + 1), stream))
+      }
     }
   }
 }
@@ -73,7 +84,8 @@
   // provide the ssr context to the tree
   input.provide(ssrContextKey, context)
 
-  Promise.resolve(renderComponentVNode(vnode))
+  Promise.resolve()
+    .then(() => renderComponentVNode(vnode))
     .then(buffer => unrollBuffer(buffer, stream))
     .then(() => resolveTeleports(context))
     .then(() => {
@@ -120,7 +132,7 @@
     )
   }
 
   return renderToSimpleStream(input, context, stream)
 }
 
 export function pipeToNodeWritable(
@@ -205,10 +217,9 @@
       }
     },
     destroy(err) {
-      // TODO better error handling?
-      // eslint-disable-next-line no-console
-      console.log(err)
-      writer.close()
+      writer.abort(err).catch(() => {
+        // ignore errors from aborting an already closed/errored stream
+      })
     },
   })
 }