Q&A: Problem about handling errors raised by async selector

[babyfish-ct]

Hi
I met a problem when I tried to handle the errors raised by async selector, I asked this problem on stack overflow, the link is https://stackoverflow.com/questions/67251358/recoil-cannot-handle-the-error-of-async-selector

No reply until now, can you help me? Sorry for interrupting :)

[drarmstr]

Please inline the question here. Yes, async selectors can throw errors and if nothing catches them it is expected to the application to error. You can use <ErrorBoundary/> to catch the errors, but the error boundary must be wrapping the component which uses the hook which throws the error.

[babyfish-ct]

My Code(by using useRecoilValueLoadable)

import {RecoilRoot, selector, useRecoilValueLoadable} from 'recoil';

const asyncError = selector({
  key: 'asyncError',
  get: async() => { throw new Error("Test Error"); }
});

function Test() {
  const loadable = useRecoilValueLoadable(asyncError);
  return (
    <h1>
      { loadable?.state === 'hasError' ? "Has error" : "No error" }
    </h1>
  );
}

function App() {
  return (
    <RecoilRoot>
      <Test/>
    </RecoilRoot>
  );
}

export default App;

Result:
Unhandled rejection error

I tried to use ErrorBoundary too, same error raised

[babyfish-ct]

Yes, I opened your link “https://codesandbox.io/s/ecstatic-boyd-xmzqb”， it works

In that sandbox, the version or recoil is "0.1.2", I change it to be "0.2.0", same error raised.

is it a bug of "0.2.0"?

[babyfish-ct]

Sandbox	Recoil-0.1.2	Recoil-0.1.3	Recoil-0.20
https://codesandbox.io/s/ecstatic-boyd-xmzqb	Successed	Sucessed	Failed
https://codesandbox.io/s/gifted-tereshkova-p40e5?file=/src/App.js	Failed	Failed	Failed

[drarmstr]

Hmm, yes, that looks like an issue then. Let's open an issue on that; thanks! cc @csantos42

[csantos42]

Looking into it now! Thanks for reporting

[csantos42]

Fixed in #1017