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
Related
I am getting an error when animating routes switching using CssTransition, I can’t find anything useful on the Internet about this problem. Maybe someone here can give some advice. Thanks!
react : 18.2.0
react-router-dom: 6.4.0
react-transition-group": 4.4.5
The problem is only when switching to the case/:id route
and not regularly, also if you manually reload the page with an error, it will load without an error, all other routes work correctly, the switching animation works as it should. I have an assumption that this is due to the fact that the page does not have time to render, but I don’t know how to solve this problem, even if this is the case.
code
I found solution here, i changed my routing as in example
http://reactcommunity.org/react-transition-group/with-react-router
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?
I've create an ErrorBoundry component which is wrapped around all child components of App. I've added a throw error function to one of the child components to test. When the component renders it seems the ErrorBoundry is catching the error but then the error appears after it. What am I doing wrong.
Here's my sandbox https://codesandbox.io/s/n0qjwjvrnm
I noticed this please take a look in the error overlay.
This error overlay is powered by react-error-overlay used in
create-react-app.
I tested in my app and it show the correct behavior because I'm not using create-react-app so this is the feature powered by it.
This is not a bug. Cheers.
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. :-)
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.