fix(jsx): race condition in ErrorBoundary with event loop (#3343)

Fixes #3333

src/jsx/components.test.tsx

@@ -191,6 +191,34 @@ describe('ErrorBoundary', () => {
     })
   })
 
+  describe('async : setTimeout', async () => {
+    const TimeoutSuccessComponent = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 10))
+      return <div>OK</div>
+    }
+    const TimeoutErrorComponent = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      throw new Error('Error')
+    }
+
+    it('fallback', async () => {
+      const html = (
+        <>
+          <TimeoutSuccessComponent />
+          <ErrorBoundary fallback={<Fallback />}>
+            <TimeoutErrorComponent />
+          </ErrorBoundary>
+        </>
+      ).toString()
+
+      expect((await resolveCallback(await html)).toString()).toEqual(
+        '<div>OK</div><div>Out Of Service</div>'
+      )
+
+      suspenseCounter--
+    })
+  })
+
   describe('streaming', async () => {
     const Component = async ({ error }: { error?: boolean }) => {
       await new Promise((resolve) => setTimeout(resolve, 10))

src/jsx/components.ts

@@ -93,13 +93,19 @@ d.replaceWith(c.content)
 })(document)
 </script>`
     }
+
+    let error: unknown
+    const promiseAll = Promise.all(resArray).catch((e) => (error = e))
     return raw(`<template id="E:${index}"></template><!--E:${index}-->`, [
       ({ phase, buffer, context }) => {
         if (phase === HtmlEscapedCallbackPhase.BeforeStream) {
           return
         }
-        return Promise.all(resArray)
-          .then(async (htmlArray) => {
+        return promiseAll
+          .then(async (htmlArray: HtmlEscapedString[]) => {
+            if (error) {
+              throw error
+            }
             htmlArray = htmlArray.flat()
             const content = htmlArray.join('')
             let html = buffer