Comments (17)
Thanks @rushilshah1 for the catch. I need to investigate why window.fetch() doesn't manage the 400 status as an error and possibly add a custom handler for this error to avoid everything blows up.
Give me some days, it shouldn't be too complex. 😉
from react-giphy-searchbox.
Hi @rushilshah1, sorry for my late reply.
total_count
is the number of gifs returned by a query on Giphy's API. Here a piece of the JSON response returned by the Api:
"pagination": {
"total_count": 12744,
"count": 5,
"offset": 0
},
That error means that pagination
is undefined when the component tries to display some data. It's weird, I need to check why or put some boundaries to avoid the error in those situations.
Please, give me some time to try to fix it, I'm a little busy at the moment. ;-)
from react-giphy-searchbox.
I have said "weird" because the error happens exactly here, at lines 27 or 36.
This means that at the moment we call FETCH_SUCCESS
or FETCH_MORE_SUCCESS
actions, pagination
is undefined. And this is really strange, because these actions are called here, after a successful response by the API, so at this point pagination
has to be true by design:
https://github.com/sergiop/react-giphy-searchbox/blob/master/src/hooks/useApi.js#L19-L35
When the error happens, can you take a look at the Network panel of Chrome's Developer Tool to check if the Api call returns a 200 code and the response contains the pagination
item? Your help will be really useful because I have never triggered the error.
from react-giphy-searchbox.
Thanks for looking into this @sergiop!
This error is pretty hard to reproduce, but has happened intermittently on a few occasions. I was able to reproduce it today:
When I drilled down into the api call I got this (apologies, I did not have my network tab open to record more details, but can try again and follow up):
Seems like this 400 response only returned an attribute called message
, thus why the pagination
object is null. This seems like an issue with the Giphy Api as a similar issue has been reported. I can look to follow up with them as well, but in the meantime would you be able to add some simple error handling to the react-giphy-searchbox to protect the component from weird api issues like this?
from react-giphy-searchbox.
Created an issue for the Giphy API team - Giphy/GiphyAPI#229
from react-giphy-searchbox.
@rushilshah1 version 1.5.1 has fixed the error (and I need to admit it was a really BIG error!!! 😉).
from react-giphy-searchbox.
Thank you @sergiop! 😄
from react-giphy-searchbox.
Hey @sergiop I actually still got the error. I was able to drill down some more and here is what I see.
There is no 400 error anymore, but I got a 200 response back from their API and it is simply missing the pagination field:
from react-giphy-searchbox.
It's weird because both the home page and the CodeSandbox Demo use the last version and everything seems fine.
https://codesandbox.io/s/react-giphy-searchbox-l8dxc?fontsize=14
https://sergiop.github.io/react-giphy-searchbox/
But... wait... how is it possible a 200 without the pagination? Have you searched for something that returned an empty response? I see in your image that it was called the search
endpoint, this means that you searched something in the input field, is that it? Can you help me to understand?
I just tested on the demo I published on the library home page (the one I linked above), searching for sdhfladjfhsdkfjhadfkjashdfkjsahdfaskdjh
string. It returned me an empty response, but the pagination is not missing.
from react-giphy-searchbox.
Yeah, I think this is a problem with the Giphy api...In my screenshot I searched "what" which has search results, thus my offset was up to 1860. This issue is pretty hard to reproduce but shows up for me when I have multiple users on my app using the tool. My hunch is the API intermittently returns a bad response, and in this case we can see the pagination field is missing all together.
It seems a little extra, but would we be able to add a check to ensure even with a 200 response, the data
, meta
, and pagination
attributes are present, otherwise treating it as a bad response? An alternative I could explore is that I can try to wrap your component in a try/catch in my application itself.
from react-giphy-searchbox.
I was able to replicate it by having two browsers/tabs open with the searchbox. I searched the same word in both of them (ex. what
). I then started scrolling through one of them and got the error again
from react-giphy-searchbox.
I was able to replicate it by having two browsers/tabs open with the searchbox. I searched the same word in both of them (ex.
what
). I then started scrolling through one of them and got the error again
Mmm... no. I can't replicate using the demo on the home page. I opened it in three Chrome tabs, searched for what
string, scrolled... and everything is working.
from react-giphy-searchbox.
Can you provide me the complete endpoint (with the query string) that returns that malformed response?
You can find it in the header tab:
What do you receive if you paste that URL in the browser address bar?
from react-giphy-searchbox.
What are you telling me is really an edge case, and it's really weird that the API returns that malformed response. Anyway, it's not related to the original topic, and it seems an API bug.
from react-giphy-searchbox.
@rushilshah1 I just opened a PR but I'm not really sure because I never triggered this bug. Anyway... this shows a generic error (Oops! Something went wrong. Please, try again.) if the 200 response doesn't contain the pagination.
from react-giphy-searchbox.
@sergiop great, thank you so much! This really is an odd edge case - your partnership is much appreciated 😄
from react-giphy-searchbox.
@rushilshah1 only because I'm on vacation and I have nowhere to go in these pandemic days... 😄
Anyway... I just published v1.5.2, let me know if it fixes your issue.
from react-giphy-searchbox.
Related Issues (20)
- README.md: project logo broken on npmjs.com
- Remove Axios.
- Production API Key HOT 2
- Feature Request - Search Text HOT 9
- Autofocus the searchbox prop HOT 3
- Attribution & Giphy Guidelines HOT 7
- sped up / blurry gif? HOT 3
- Specify a hundred percent width to the component HOT 1
- Module parse failed: Unexpected character '�' during yarn build HOT 2
- CSS Modules cannot be imported from within node_modules HOT 3
- Add typescript types
- Duplicate component keys HOT 1
- Usage in existing form component HOT 1
- How to make the component fully responsive with screen size
- Uncaught ReferenceError: module is not defined
- Don't nest search input in form HOT 2
- Update npm package with last fix
- Outdated react peer dependencies cause issues
- Package not installing
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-giphy-searchbox.