fix(core): Allow retries for errored async reads

src/core/store.ts

@@ -177,6 +177,7 @@ export const createStore = (
       return
     }
     atomState.c?.() // cancel read promise
+    delete atomState.e // read error
     if (isInterruptablePromise(promise)) {
       atomState.p = promise // read promise
       delete atomState.c // this promise is from another atom state, shouldn't be canceled here

tests/error.test.tsx

@@ -26,7 +26,12 @@ class ErrorBoundary extends Component<
   }
   render() {
     return this.state.hasError ? (
-      <div>{this.props.message || 'errored'}</div>
+      <div>
+        {this.props.message || 'errored'}
+        <button onClick={() => this.setState({ hasError: false })}>
+          retry
+        </button>
+      </div>
     ) : (
       this.props.children
     )
@@ -447,3 +452,86 @@ describe('throws an error while updating in effect cleanup', () => {
     expect(console.error).toHaveBeenCalledTimes(1)
   })
 })
+
+describe('error recovery', () => {
+  const createCounter = () => {
+    const counterAtom = atom(0)
+
+    const Counter = () => {
+      const [count, setCount] = useAtom(counterAtom)
+      return <button onClick={() => setCount(count + 1)}>increment</button>
+    }
+
+    return { Counter, counterAtom }
+  }
+
+  it('recovers from sync errors', async () => {
+    const { counterAtom, Counter } = createCounter()
+
+    const syncAtom = atom((get) => {
+      const value = get(counterAtom)
+
+      if (value === 0) {
+        throw new Error('An error occurred')
+      }
+
+      return value
+    })
+
+    const Display = () => {
+      return <div>Value: {useAtom(syncAtom)[0]}</div>
+    }
+
+    const { getByText, findByText } = render(
+      <Provider>
+        <Counter />
+        <ErrorBoundary>
+          <Display />
+        </ErrorBoundary>
+      </Provider>
+    )
+
+    await findByText('errored')
+
+    fireEvent.click(getByText('increment'))
+    fireEvent.click(getByText('retry'))
+    await findByText('Value: 1')
+  })
+
+  it('recovers from async errors', async () => {
+    const { counterAtom, Counter } = createCounter()
+    const asyncAtom = atom(async (get) => {
+      const value = get(counterAtom)
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50)
+      })
+
+      if (value === 0) {
+        throw new Error('An error occurred')
+      }
+
+      return value
+    })
+
+    const Display = () => {
+      return <div>Value: {useAtom(asyncAtom)[0]}</div>
+    }
+
+    const { getByText, findByText } = render(
+      <Provider>
+        <Counter />
+        <ErrorBoundary>
+          <Suspense fallback={null}>
+            <Display />
+          </Suspense>
+        </ErrorBoundary>
+      </Provider>
+    )
+
+    await findByText('errored')
+
+    fireEvent.click(getByText('increment'))
+    fireEvent.click(getByText('retry'))
+    await findByText('Value: 1')
+  })
+})

tests/utils/atomWithObservable.test.tsx

@@ -1,4 +1,4 @@
-import { Component, Suspense } from 'react'
+import { Suspense } from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { Observable, Subject } from 'rxjs'
 import { useAtom } from '../../src/index'
@@ -7,31 +7,6 @@ import { getTestProvider } from '../testUtils'
 
 const Provider = getTestProvider()
 
-class ErrorBoundary extends Component<
-  { message?: string },
-  { hasError: boolean }
-> {
-  constructor(props: { message?: string }) {
-    super(props)
-    this.state = { hasError: false }
-  }
-  static getDerivedStateFromError() {
-    return { hasError: true }
-  }
-  render() {
-    return this.state.hasError ? (
-      <div>
-        <div>{this.props.message || 'errored'}</div>
-        <button onClick={() => this.setState({ hasError: false })}>
-          retry
-        </button>
-      </div>
-    ) : (
-      this.props.children
-    )
-  }
-}
-
 it('count state', async () => {
   const observableAtom = atomWithObservable(
     () =>
@@ -95,32 +70,3 @@ it('writable count state', async () => {
   fireEvent.click(getByText('button'))
   await findByText('count: 9')
 })
-
-// FIXME we would like to support retry
-it.skip('count state with error', async () => {
-  const myObservable = new Observable<number>((subscriber) => {
-    subscriber.error('err1')
-    subscriber.next(1)
-  })
-  const observableAtom = atomWithObservable(() => myObservable)
-
-  const Counter = () => {
-    const [state] = useAtom(observableAtom)
-
-    return <div>count: {state}</div>
-  }
-
-  const { findByText, getByText } = render(
-    <Provider>
-      <ErrorBoundary>
-        <Suspense fallback="loading">
-          <Counter />
-        </Suspense>
-      </ErrorBoundary>
-    </Provider>
-  )
-
-  await findByText('errored')
-  fireEvent.click(getByText('retry'))
-  await findByText('count: 1')
-})