Recommend's hooks does not handle errors
- Dominant language
- TypeScript
- Stars
- 28
- Forks
- 9
- PR merge metrics
- No merged PRs in 30d
Description
## Description
Recommend React's hooks does not gracefully handle errors, and errors cannot be caught in React's ErrorBoundary.
For more context :
We are using Algolia's recommend on production and staging environment.
The production environment's index works. The staging environment's index does not build as it has not enough data (less than 1'000 events).
However, when we are running our tests against the staging env, all requests fail because the index does not exists (as it cannot build). The problem, is that all errors cannot be caught and results in React throwing an error.
For instance, in `useFrequentlyBoughtTogether.js` line 42 :
```js
useEffect(() => {
setStatus('loading');
getFrequentlyBoughtTogether({
// ...
})
.then((response) => {
setResult(response);
setStatus('idle');
})
// missing catch, resulting in error not being catch by React
}, [
// ...
]);
```
It would be great to gracefully handles errors in each hook.
## Reproduction
The [linked codesandbox](https://codesandbox.io/s/github/algolia/recommend/tree/next/examples/js-demo?file=/app.js) does not work. It results with an error `/app.tsx: Unexpected token (133:105)`.
**Steps**
To reproduce the error, you may :
1. Configure recommendClient with a wrong client
2. Use an index that does not build
3. Ask for a non-existent objectIDs
## Expected behavior
Error should be gracefully handled by React / hooks.
## Environment
- OS: macOS
- Browser: Chrome
- Library version: 4.14.3
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in useFrequentlyBoughtTogether.js at line 42 and inspect the other React hooks involved in Algolia Recommend requests. Reproduce the failure using a wrong client, an index that does not build, or nonexistent objectIDs; the work is done when hook errors are handled gracefully instead of being thrown by React. The linked CodeSandbox currently fails to parse, so it cannot serve as a working reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100