Handle thrown errors in promise callbacks

[kumar303]

trafficstars

This line of code does not catch errors so instead they get lost in the event loop and the component never gets rendered correctly. Additionally, it's hard to catch and display the error in an isomorphic app.

Something like this would reproduce it:

@asyncConnect([{
  deferred: true,
  promise: () => {
    throw new Error('whoops, this was not supposed to happen');
  },
}])
class SomeComponent extends React.Component {
  ...
}

It should be fixable like this:

let promiseOrResult;
try {
  promiseOrResult = item.promise(rest);
} catch (error) {
  promiseOrResult = Promise.reject(error);
}

[AVVS]

idea behind this is that you handle the error in the code, though I can see how this might be an interesting option to implement after several people have already suggested it. a PR with some docs and explanation for server-side/client-side handling is very much welcome!

[bertho-zero]

With the following code my error is launched as I wish:

@asyncConnect( [ {
  promise: ( { store: { dispatch, getState }, helpers: { redirect } } ) => {
    throw new Error('Une erreur par ici !');
  }
} ] )

But not with this one:

@asyncConnect( [ {
  promise: async ( { store: { dispatch, getState }, helpers: { redirect } } ) => {
    throw new Error('Une erreur par ici !');
  }
} ] )

I wish I could do something like:

const redirect = to => {
  throw new VError({ name: "RedirectError", info: { to } });
};

loadOnServer(
  Object.assign({}, renderProps, { store, helpers: { client, redirect } })
)
  .then(() => {
    const component = createElement(
      Provider,
      { store, key: "provider" },
      createElement(ReduxAsyncConnect, renderProps)
    );

    cb(req, res, next, { store, component });
  })
  .catch(mountError => {
    if (mountError.name === "RedirectError") {
      return res.redirect(VError.info(mountError).to);
    }

    console.error("MOUNT ERROR:", mountError);
    next(mountError);
  });

Given that all the promises of rejections are ignored, using async/await my throw was not the desired effect.

I think we should be free to choose what we want to do with our rejections.

[kumar303]

We ended up using our own @safeAsyncConnect as a wrapper around @asyncConnect. It catches any errors and returns a rejected promise.

[bertho-zero]

I need exactly the opposite, I would like a rejected promise to remain a rejected promise and not to turn into a {error}.

I finnaly did something like, I need to use the key key with @asyncConnect for store and retrieve the { error } :

const redirect = to => {
  throw new VError({ name: "RedirectError", info: { to } });
};

loadOnServer(
  Object.assign({}, renderProps, { store, helpers: { client, redirect } })
).then(() => {
  /*****/
  const reduxConnectState = store.getState().reduxAsyncConnect.loadState;
  const redirectError = _.find(reduxConnectState, [
    "error.name",
    "RedirectError"
  ]);

  if (redirectError) {
    throw redirectError.error;
  }
  /*****/

  // ...
});