Unhandled promise rejection error

I’m not sure how errors are supposed to be handled. I have the following function that returns a promise:

  getFacebookToken(): Promise<string> {
    return LoginManager.logInWithPermissions(['public_profile'])
      .then((response) => {
        if (response.isCancelled) {
          // This error is not handled.
          throw Error('Request canceled');
        } else {
          return AccessToken.getCurrentAccessToken();
        }
      })
      .then((response) => response.accessToken)
  }

When I use the above with useAsyncTask and if the promise throws an error, then this is not handled and, also, the task.error is always null.

Thank you in advance.

PS. I’m using this in React Native, not ReactJS.

[gsavvid]

Thank you very much, that’s a great solution.

Here’s the Typescript equivalent of your solution in case someone else stumbles upon this:

const useAsyncTaskIgnoringError = <Result, Args extends unknown[]>(func: (c: AbortController, ...args: Args) => Promise<Result>): AsyncTask<Result, Args> => {
  const task = useAsyncTask(func);
  return useMemo(() => ({
      ...task,
      start: async (...args: Args) => {
        try {
          return await task.start(...args);
        } catch (e) {
          // We ignore this error because it's handled with the state.
          console.log('Error: ' + e);
        }
      },
    }), [task]);
};

[dai-shi]

Thanks for the clarification.

I could add a catch at the end of my promise if that’s what you mean but then the question is how will the component get notified that the promise was rejected? Perhaps I’m missing something obvious here.

Your understanding is correct. So, we shouldn’t add catch there.

What I mean is something like this:

export default function SignInPage(props: SignInPageProps) {
  const {start, result: facebookLogin, started: facebookLoginLoading, error: facebookError} = useAsyncTask(fetchLoginWithFacebook);
  const startLoginWithFacebookTask = useCallback(async () => {
    try {
      await start();
    } catch (e) {
      // ignore
    }
  }, [start]);

  return (
    <LoadingSignInView
      isLoading={facebookLoginLoading}
      title={Strings.signInTitle}
      subtitle={Strings.signInSubtitle}
      bottomButtonPrompt={Strings.signUpPrompt}
      bottomButtonText={Strings.signUp}
      onFacebookButtonPress={startLoginWithFacebookTask}
    />
  );
}

It looks annoying to do this every time. As the philosophy of react-hooks-async is composability, we create a new hook instead of modifying useAsyncTask.

const useAsyncTaskIgnoringError = (func) => {
  const task = useAsyncTask(func);
  return useMemo(() => ({
    ...task,
    start: async (...args) => {
      try {
        await task.start(...args);
      } catch (e) {
        // we ignore this error because it's handled with state
      }
    },
  }), [task]);
};

Hope it helps.