Hook use-fetch throwing error to component crashes whole application

[lucastzmov]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.9.8

What package has an issue?

@mantine/hooks

What framework do you use?

create-react-app (CRA)

In which browsers you can reproduce the issue?

Chrome

Describe the bug

In the use-fetch, when returning an error, the actual flow catches the error but then throw it again, it is difficult to catch it again at component level making the whole application crash.

With the actual use-fetch hook is not possible to code component as follows:

if (loading) {
  return <Text>Loading...</Text>;
}

if (error) {
  return <Text>Oops...</Text>;
}

return (
  <>
    <div>{JSON.stringify(data)}</div>
  </>
);

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/devbox/react-vite-ts-mantine-hook-use-fetch-6fpzrs

Possible fix

I think it must returns the catched error to the consumer, and not throwing it again. The way it is now, when having an error in the promise, it is not returning inside the error's field but in the data one.

• The data's field must be only when has success;
• The error one must be the Error object returned from the promise;

Actual code handling error:

.catch((err) => {
  setLoading(false);

  if (err.name !== 'AbortError') {
    setError(err);
  }

  throw err;
});

Suggestion:

.catch((err) => {
  setLoading(false);

  if (err.name !== 'AbortError') {
    setError(err);
  }

  return err;
});

Self-service

• I would be willing to implement a fix for this issue

[axelkovacki]

I got the same problem

[rtivital]

Fixed in 7.10.1

[lucastzmov]

Thank you @rtivital 🚀