algolia / algolia/recommend

Recommend's hooks does not handle errors

Open
#134 4 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.