I have an error coming up in React.js that only occurs under very specific circumstances.
When I create the error, an error prints to the JS console in Chrome, but it's not particularly semantic.
What are the best practices, tips, and tricks that you use for tracking down the offending line or function in a React.js context?
The value at line 61 doesn't seem to make a lot of sense due to the 10247 prefix – is this truly referring to line 61 or is this just junk due to a botched source map or something?
Unhandled rejection TypeError: Cannot set property 'value' of undefined
at http://localhost:4000/js/analytics.js:10247:61
at Array.forEach (native)
at http://localhost:4000/js/analytics.js:10246:16
at Array.forEach (native)
at updatePoints (http://localhost:4000/js/analytics.js:10245:29)
at module.exports.createClass.classData.componentWillReceiveProps (http://localhost:4000/js/analytics.js:10195:9)
at 43.ReactCompositeComponentMixin.updateComponent (http://localhost:4000/js/vendor.js:42736:14)
at 82.ReactPerf.measure.wrapper [as updateComponent] (http://localhost:4000/js/vendor.js:49431:21)
at 43.ReactCompositeComponentMixin.receiveComponent (http://localhost:4000/js/vendor.js:42623:10)
at Object.89.ReactReconciler.receiveComponent (http://localhost:4000/js/vendor.js:50301:22)
at Object.__REACT_INSPECTOR_RUNTIME__0_13_1.React.ReactReconciler.receiveComponent (<anonymous>:118:43)
at 43.ReactCompositeComponentMixin._updateRenderedComponent (http://localhost:4000/js/vendor.js:42865:23)
at 43.ReactCompositeComponentMixin._performComponentUpdate (http://localhost:4000/js/vendor.js:42843:10)
at 43.ReactCompositeComponentMixin.updateComponent (http://localhost:4000/js/vendor.js:42759:12)
at 82.ReactPerf.measure.wrapper [as updateComponent] (http://localhost:4000/js/vendor.js:49431:21)
at 43.ReactCompositeComponentMixin.receiveComponent (http://localhost:4000/js/vendor.js:42623:10)
Thanks in advance for your help!
Yupe, split your code into individual files and try using browserify (or webpack) with the debug flag set to true in order to map your big file with a sourcemap and ease the debugging in Chrome and friends.
Check my current stack here:
https://github.com/coma/domno?files=1
It turned out that it was an issue with Reconciliation in React.js.
React essentially uses heuristics to decide what to re-render on updates, and the react-chartjs library wasn't playing well with that.
More information can be found here: https://facebook.github.io/react/docs/reconciliation.html
The fix I used was essentially to clear the state data that is passed into chart and force an update, thus making React re-render the whole element:
this.state.countries = {
labels: []
}
this.forceUpdate()
Related
I'm not that experienced with JavaScript, however, I am familiar enough to navigate and write my own code.
I've been spending a lot of time trying to figure out an issue I'm getting with HTTP requests, only to recently realize that it's likely a specific script other that might causing this.
It looks as though it may be React JS.
I'm not familiar with this.
(I did look it up, and searched a lot for any no-conflict options)
Basically, from the moment I execute "XMLHttpRequest.prototype.open" to monitor incoming HTTP requests, all of my scripts appear to be passing through a React JS file.
I assume this, because I'm logging the steps and results of my script in the browser's console, and they are all being attributed to "commons-##########.js" from the moment I run that XMLHttpRequest.prototype.
I see this in the header of the commons-##########.js file:
/** #license React v16.4.1
* react-dom.production.min.js
*
* Copyright (c) 2013-present, Facebook, Inc.
The problem is that it appears to be affecting my own scripts from functioning properly.
Does anyone know why this might happen, and how it could be fixed?
I'd like my JS scripts to run without interference from React JS.
(It's not my own website, but a website I regularly use for business. The modifications are to assist me, nothing malicious.)
Thank you.
Please note that I'm aware that the commented portion I highlighted will not affect my code. I only put that to explain why I believe it's a React JS script that is causing the problem.
This is what the actual error looks like in the console (a portion of it):
Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at XMLHttpRequest.<anonymous> (<anonymous>:122:29)
at XMLHttpRequest.a (commons-9702d5b….js:34)
(anonymous) # VM14804:122
a # commons-9702d5b….js:34
XMLHttpRequest.send (async)
XMLHttpRequest.send # VM14804:70
(anonymous) # commons-9702d5b….js:34
(anonymous) # commons-9702d5b….js:34
I've tried many methods, and I don't see any issue with why I cannot JSON parse the response, or do many other things.
Something about that code is interfering with my own.
The JS script is a long, minified file, so it would be difficult to pin down a lone offending portion of code.
I'm 99.99% sure the problem isn't with React. The commons-#.js file is the result of your scripts being bundled with any 3rd party libraries you're using (like React) into one file for efficient loading from a web server - it's standard practice, and very unlikely to cause any issues. The /** #license React v16.4.1 comment you're seeing at the top of the file is simply because the bundling process has been configured to retain license information in the output.
The problem is caused by JSON response that was received in wrong form from a server or was incorrectly transformed.
Unexpected token o in JSON at position 1
error means that [object ...] string (the result of coercion of an object to a string) was passed to JSON.parse. It's unknown where this error originates from. XHR requests can be checked in devtools Network tab to identify whether the problem was caused by wrong response, so it could be reported to API owner.
The problem isn't caused by React. React itself can't do anything like that, it's UI library. It doesn't use XMLHttpRequest in any way. The error is caused by some piece of code that uses both React and XHR. It likely can be debugged in this part of a stack:
at XMLHttpRequest.<anonymous> (<anonymous>:122:29)
at XMLHttpRequest.a (commons-9702d5b….js:34)
(anonymous) # VM14804:122
The problem needs to be fixed by a party this code belongs to - website owner, another browser extension, third-party components you're using, etc.
I have a React app that recently starting emitting this error.
https://reactjs.org/docs/error-decoder.html?invariant=94&args[]=onClick&args[]=string
Minified React error #94:
Expected onClick listener to be a function, instead got type string
When this error appears, none of our buttons/dropdowns work but the webpage isn't frozen. It only happens in one section of the app. When we navigate to another section and come back, the error does NOT appear again.
I've gone over every single onClick event in our app and there's not a single function that could possibly be passed in as a string or can be returned as a string. Although we have a few onClick events that can be passed a NULL object.
But we've narrowed down the steps that produced this bug:
It only started occurring when we updated to Chrome version 65, which only came out 2 days ago. The bug does NOT happen in previous Chrome versions (before v65)
It only happens in our production build of the React app, not on localhost (could it be a minifying error?)
The bug doesn't happen in our other apps, also built with React and minified with similar webpack configurations.
Does anyone have an idea of why this error is happening and how we can solve it?
Turns out it's specifically the minified/production build of React that's incompatible with Chrome65.
We flipped process.env.NODE_ENV back to 'development', until we find a better solution, or Chrome resolves the issue with v65.
Update: If you are using the toJS() HOC from redux (https://github.com/reactjs/redux/blob/master/docs/recipes/UsingImmutableJS.md#use-a-higher-order-component-to-convert-your-smart-components-immutablejs-props-to-your-dumb-components-javascript-props), the problem is with Object.entries().
To fix this for now, replace Object.entries with a custom entries function:
(ES6)
const entries = x => Object.keys(x).reduce((y, z) => y.push([z, x[z]]) && y, []);
You should be able to flip your NODE_ENV back to 'production'.
Currently trying to figure out why the wrappedComponentProps object causes the issue, but a regular object like { myFunc: function(){} } doesn't.
(Any help debugging this would be appreciated!)
Calling delete wrapperComponentProps[ANY-VALID-KEY] before running Object.entries() fixes the issue, so I suspect it's something to do with object security/caching.
I found a solution. I still think there was an error with Chrome v 65's minification process but I started deleting clickable components from my app until the error was gone to flush out the problematic component.
Turns out it was a <LinkContainer /> from react-bootstrap-router library that was causing the bug. We replaced with react-router link components and the error went away!
I'm getting an error message in a fairly complex app, but Angular does not provide a filename or line number indicating where the error was thrown initially. I have gotten used to this with Angular and I've been able to find the cause of errors nonetheless in the past, but not this time. This is the error:
Error: [$injector:strictdi] http://errors.angularjs.org/1.6.1/$injector/strictdi?p0=function(%24compile)
at angular.js:38
at Function.eb.$$annotate (angular.js:4072)
at e (angular.js:4799)
at Object.invoke (angular.js:4834)
at angular.js:7943
at q (angular.js:357)
at Object.<anonymous> (angular.js:7941)
at Object.invoke (angular.js:4842)
at Object.$get (angular.js:4676)
at Object.invoke (angular.js:4842)
We're using $compile in a lot of different places in our app, including a number of third party directives/modules. My question is: is there any way to find the piece of code that's causing this error? I have been searching for '$compile' in my source code, but that gives me so many results that it doesn't really help.
Is there any way to enable better stack traces including my own source, not just AngularJS functions? If this does not exist, I'd like to know it too and I'll have to find another way to fix this, but I hope I'm not missing something here.
This is more of a general question, but I imagine others have encountered this problem as well -- see for instance this SO question: Ember.js: how to analyze error in vendor.js
I am working on a larger Ember-based application, where, if errors occur, I sometimes get rather cryptic stack traces, similar to this sample:
TypeError: e.indexOf is not a function
at e.func (https://XXX/assets/vendor-c3ea8aab9a11f79411cf3b32532ea544.js:13:6039)
at e.get (https://XXX/assets/vendor-c3ea8aab9a11f79411cf3b32532ea544.js:11:29357)
at Object.o [as isPath] (https://XXX/assets/vendor-c3ea8aab9a11f79411cf3b32532ea544.js:13:5640)
at Object.u [as set] (https://XXX/assets/vendor-c3ea8aab9a11f79411cf3b32532ea544.js:13:10630)
at n.set (https://XXX/assets/vendor-c3ea8aab9a11f79411cf3b32532ea544.js:16:725)
at n.cancel (https://XXX/assets/YYY-707bc84342df7a5350ea91fcc2b9bf53.js:1:20788)
at o.join (https://XXX/assets/vendor-c3ea8aab9a11f79411cf3b32532ea544.js:7:6400)
at Function.u.join (https://XXX/assets/vendor-c3ea8aab9a11f79411cf3b32532ea544.js:13:12315)
at https://XXX/assets/vendor-c3ea8aab9a11f79411cf3b32532ea544.js:9:30923
at Object.h [as flaggedInstrument] (https://XXX/assets/vendor-c3ea8aab9a11f79411cf3b32532ea544.js:12:18911)
Since everything refers to /assets/vendor-*.js files, it is very laborious to find out exactly where the error has occurred.
At the moment, I try to deduce where the error has occurred based on the endpoint accessed and my knowledge of the software. However, this is highly unreliable and unstructured, since the errors are very often highly vague, given the size of my code base.
For instance here, it is obvious that an object on which indexOf() is called (presumably an array) is probably undefined or null and, as such, calling indexOf() on it doesn't work, hence the error. But guess how many arrays use indexOf() in a couple of hundred large-ish source files ;-)
Is there a better, more structured approach that I can use to debug in such situations?
You may be able to see the library js file used by putting 'pause on exceptions' in chromium debugger and checking what's the library that has the line of failure. After that, you may change the library reference in ember-cli-build.js from libraryx.js to libraryx.src.js or equivalent for the particular library.
trying to fiddle with an app, getting this error "Uncaught TypeError: Cannot read property '1' of undefined "in dev tools console. i'm pretty sure it's because of the json i'm pulling and the proxy i'm using are not talking to each other correctly. seriously n00b question, i truly don't understand what's going on in the document. i also see that there are ALOT of similar questions like this, so i'm guessing they're pretty localized and not great for the community. still important to me though...i'd like to learn what's going on in the code, not just fix the problem. you can check it out here: http://dev.bowdenweb.com/busfinder.html i did put it up on jsfiddle, but it wasn't rendering correctly. thanks for any and all advice!
loadBusesIntoMap seems to be the root of the problem. On Chrome developer tools, click on the arrow next to the error and track the stack. Just before running Google maps code the function that throws error is that one. It's very probable that somewhere you're sending an empty buses array. I'd start by checking if it's empty or has a length first...