Catching and handling errors with Apollo Client - reactjs

I'm trying to handle errors with Apollo in react gracefully. So the idea is whenever the user encounters an error of some sort (500 or anything else). I want to just show a message like 'something went wrong, please try again later'.
Upon the first render of the component this works fine (the error is present in data.error) but when I leave the route and the component is unmounted, it throws.
At the moment I cannot prevent it from throwing an error. I've tried pretty much everything in this thread: https://github.com/apollographql/react-apollo/issues/604#issuecomment-355648596
link-error: Logs the errors, but doesn't prevent it from throwing
hoc: Logs the errors, but doesn't prevent it from throwing
componentDidCatch: Doesn't do anything
errorPolicy: Prevents errors, but it means I also can't handle them anymore.
I always get the following stack:
Unhandled error Network error: Response not successful: Received status code 500 Error: Network error: Response not successful: Received status code 500
at new ApolloError (webpack-internal:///./node_modules/apollo-client/errors/ApolloError.js:36:28)
at eval (webpack-internal:///./node_modules/apollo-client/core/QueryManager.js:287:41)
at eval (webpack-internal:///./node_modules/apollo-client/core/QueryManager.js:668:17)
at Array.forEach (<anonymous>)
at eval (webpack-internal:///./node_modules/apollo-client/core/QueryManager.js:667:18)
at Map.forEach (<anonymous>)
at QueryManager.broadcastQueries (webpack-internal:///./node_modules/apollo-client/core/QueryManager.js:662:22)
at eval (webpack-internal:///./node_modules/apollo-client/core/QueryManager.js:236:31)
at <anonymous>
For reference:
- apollo-client: 2.2.5
- react-apollo: 2.0.4

As described here:
I believe the way to "handle" the error when using the graphql HOC is
to simply check data.errors inside the component. There's a check
inside apollo-client that throws if data.errors isn't accessed.
The whole issue on GitHub where this comment was made has a very interesting discussion about the how's and why's. Most of the proposed solutions didn't work for me, especially the componentDidCatch, which, IMHO, was the cleanest alternative.
I could get over it touching the this.props.data.error, but I'm definitely not happy with it.
Edit
I've just noticed that you mentioned that the errors where happening when the component was unmounting... and well, it seems to be fixed on 2.1.0-beta.3. :-)

Related

jsdom with CRA throwing TypeError _ownerDocument null

I have a craco project that runs just fine, but when running tests with jest it throws the following error. I don't even have jsdom installed, it appears to be a peer dependency of craco? No idea how to solve this one, but can clarify any questions in the comments since I don't know what is causing this.
/Users/munsterberg/code/creatordao/creatordao-portal/node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:111
referrer: _ownerDocument.URL,
^
TypeError: Cannot read properties of null (reading 'URL')
at new XMLHttpRequestImpl (/Users/munsterberg/code/creatordao/creatordao-portal/node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:111:32)
at Object.exports.setup (/Users/munsterberg/code/creatordao/creatordao-portal/node_modules/jsdom/lib/jsdom/living/generated/XMLHttpRequest.js:62:12)
at new XMLHttpRequest (/Users/munsterberg/code/creatordao/creatordao-portal/node_modules/jsdom/lib/jsdom/living/generated/XMLHttpRequest.js:101:22)
at /Users/munsterberg/code/creatordao/creatordao-portal/node_modules/whatwg-fetch/dist/fetch.umd.js:514:17
at new Promise (<anonymous>)
at fetch (/Users/munsterberg/code/creatordao/creatordao-portal/node_modules/whatwg-fetch/dist/fetch.umd.js:507:12)
at /Users/munsterberg/code/creatordao/creatordao-portal/node_modules/#firebase/installations/src/functions/create-installation-request.ts:54:51
at /Users/munsterberg/code/creatordao/creatordao-portal/node_modules/#firebase/installations/src/functions/common.ts:94:24
at step (/Users/munsterberg/code/creatordao/creatordao-portal/node_modules/#firebase/installations/node_modules/tslib/tslib.js:143:27)
at Object.next (/Users/munsterberg/code/creatordao/creatordao-portal/node_modules/#firebase/installations/node_modules/tslib/tslib.js:124:57)
I noticed firebase is a part of the stack trace. Is it possible this is related?
After hours of debugging I found out it was related to the getAnalytics function exported from the firebase/analytics package. The fix for me was to mock the getAnalytics function as it wasn't required for testing purposes anyways.
Just a few tips for future uses:
When you encounter errors, especially the ones with long traceback errors (e.g. HTTP requests), you should look out for the errors:
at /Users/munsterberg/code/creatordao/creatordao-portal/node_modules/#firebase/installations/src/functions/create-installation-request.ts:54:51
at /Users/munsterberg/code/creatordao/creatordao-portal/node_modules/#firebase/installations/src/functions/common.ts:94:24
at step (/Users/munsterberg/code/creatordao/creatordao-portal/node_modules/#firebase/installations/node_modules/tslib/tslib.js:143:27)
at Object.next (/Users/munsterberg/code/creatordao/creatordao-portal/node_modules/#firebase/installations/node_modules/tslib/tslib.js:124:57)
Here #firebase package is mentioned quite a few times, functions too, so you can deduce it has something to with it, especially with it under node_module.
Quick point out on mock functions, which are:
special functions that allow us to track how a particular function is called by external code
So mocking a function can actually be important, especially when running tests with external packages and files.
Related:
Pluralsight.com guides

Getting More Specific Error Messages For GraphQL in a React App

I'm working on a ReactJS app that has a lot of GraphQL mutations. I was cleaning up some things and fixing up all the files where mutations were housed, and at some point I got hit with this error:
Uncaught GraphQLError: Syntax Error: Expected Name, found "!".
at syntaxError (syntaxError.mjs:8:1)
Now, I know that this must be due to something in the operations.js folder or somewhere in the React App where a mutation / Query with parameters is house, but that error is giving me little to no help tracking it. I've been unable to find where this could be with the naked eye, is there anything I can do to pinpoint where this error is occuring, i.e. getting a more helpful message than the one above?

Getting error : UNHANDLED REJECTION Reducers may not dispatch actions in react gatsby

suddenly it started giving me error : UNHANDLED REJECTION Reducers may not dispatch actions, when i try to run npm start, prior it was working fine for me, but somehow it started to giving me the error, can anyone please help me to resolve this issue, i am using react gatsby
This error can be caused due to a mismatch in your gatsby-config file from what is expected.
For example, if you use SiteMetaData instead of SiteMetadata, it won't show an error while rebuilding, but it can not be validated while re-running the application, and hence it will throw an error.
Refer to this documentation for more details about the config api

How to debug failing react 16 components inside a jest snapshot test

Aloha,
I often get an error message when running a jest snapshot test where on sub component breaks. React itself writes the following warning, but keeps the thrown error message:
An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the "Pause on exceptions" behavior of the DevTools, which requires
some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue.
That message is not really useful and I was wondering if there is a certain environment variable I could set that would cause react to just pass the thrown error on.

How to methodically debug "Uncaught Invariant Violation" errors in react

I'm looking for a methodical approach to track down which component is causing the "Uncaught Invariant Violation" errors in an unfamiliar codebase. Specifically when running a karma test suite that does not output stack-traces.
The most luck I had was adding console.log(JSON.stringify(element))to the render functions e.g. ReactShallowRenderer.prototype.render, which works okay. Is there a better way to do this?
I used Exception breakpoints on chrome, turn on the checkmark. Then use the CallStack to trace back the component throwing the error.
https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#exceptions

Resources