test(connectObservable): add test combining ErrorBoundary and Suspense

src/internal/react-enhancer.ts

@@ -1,5 +1,5 @@
 import { Observable, of, Subscription, Subject, race } from "rxjs"
-import { delay, takeUntil, take, filter, tap } from "rxjs/operators"
+import { delay, takeUntil, take, filter, tap, catchError } from "rxjs/operators"
 import { SUSPENSE } from "../SUSPENSE"
 import { BehaviorObservable } from "./BehaviorObservable"
 import { EMPTY_VALUE } from "./empty-value"
@@ -57,15 +57,23 @@ const reactEnhancer = <T>(
   }) as BehaviorObservable<T>
 
   let promise: any
+  let hasError = false
+  let error: unknown = undefined
   const getValue = () => {
+    if (hasError) {
+      throw error
+    }
     try {
       return (source$ as BehaviorObservable<T>).getValue()
     } catch (e) {
       if (promise) throw promise
 
       if (!IS_SSR && e !== SUSPENSE) {
         source$
-          .pipe(takeUntil(race(onSubscribe, of(true).pipe(delay(60000)))))
+          .pipe(
+            takeUntil(race(onSubscribe, of(true).pipe(delay(60000)))),
+            catchError(() => of(true)),
+          )
           .subscribe()
         try {
           return (source$ as BehaviorObservable<T>).getValue()
@@ -76,9 +84,15 @@ const reactEnhancer = <T>(
       .pipe(
         filter(value => value !== (SUSPENSE as any)),
         take(1),
-        tap(() => {
-          promise = undefined
-        }),
+        tap(
+          () => {
+            promise = undefined
+          },
+          err => {
+            hasError = true
+            error = err
+          },
+        ),
       )
       .toPromise()
     throw promise

test/connectObservable.test.tsx

@@ -266,6 +266,39 @@ describe("connectObservable", () => {
     )
   })
 
+  it("allows errors to be caught in error boundaries with suspense", async () => {
+    const errStream = new Subject()
+    const [useError] = connectObservable(errStream)
+
+    const ErrorComponent = () => {
+      const value = useError()
+
+      return <>{value}</>
+    }
+
+    const errorCallback = jest.fn()
+    render(
+      <TestErrorBoundary onError={errorCallback}>
+        <Suspense fallback={<div>Loading...</div>}>
+          <ErrorComponent />
+        </Suspense>
+      </TestErrorBoundary>,
+    )
+
+    componentAct(() => {
+      errStream.error("controlled error")
+    })
+
+    await componentAct(async () => {
+      await wait(0)
+    })
+
+    expect(errorCallback).toHaveBeenCalledWith(
+      "controlled error",
+      expect.any(Object),
+    )
+  })
+
   it("doesn't throw errors on components that will get unmounted on the next cycle", () => {
     const valueStream = new BehaviorSubject(1)
     const [useValue, value$] = connectObservable(valueStream)