Lately we have been getting a lot of javascript errors "can't redefine non-configurable property "userAgent"".
We don't attempt to redefine userAgent in our code. We barely even reference userAgent. The only places would be in code like the following:
var browser_msie = (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i)) ? true : false;
I am wondering if this error is rather coming from some bad browser behavior. It only started showing up recently.
Last evening we got over 20,000 of such error messages, and all from the same member of our service.
EDIT
The error information is as follows:
Error Message:
Message: TypeError: can't redefine non-configurable property "userAgent"
URL: https://www.rephunter.net/member-home.php
Line:1
Column:130
Stack:#https://www.rephunter.net/member-home.php:1:130
Error Traceback:
#0 Called backtrace in file /var/www/rephunter/www/webroot/include/error-handler-inc.php as line #68
#1 Called error_handler in file as line #
#2 Called trigger_error in file /var/www/rephunter/www/webroot/ajax/javascript-error.php as line #14
Unfortunately this offers no help, as line 1 of the page is just <!DOCTYPE html>. I don't see how to get to that part of the code. Of course if that were possible it might be easy to see the cause of the issue.
I recall in the past the Dev Tools might have given a "spiders view" of the page, but now I only see the DOM on the Elements tab, and Sources. Both of these are formatted and their is no way to see what "line 1 char 130" means.
Related
Version Edge:
Microsoft Edge 44.18362.449.0
Microsoft EdgeHTML 18.18362
Version IE:
11.592.18362.0
Hopefully we can get this sorted quick:
My reactjs project after being built and deployed is working on chrome and firefox - on windows and android. However on IE, Edge and Safari (also chrome on IOS) I get a blank page with the following error:
For IE:
TypeError: Unable to get property 'index' of undefined or null reference
{
[functions]: ,
__proto__: { },
description: "Unable to get property 'index' of undefined or null reference",
message: "Unable to get property 'index' of undefined or null reference",
name: "TypeError",
number: -2146823281,
stack: "TypeError: Unable to get property 'index' of undefined or null reference
at value (https://xxxx/static/js/main.9016f2a2.chunk.js:1:2786)
at Za (https://xxxx/static/js/2.97b2c280.chunk.js:2:331602)
at Ja (https://xxxx/static/js/2.97b2c280.chunk.js:2:331451)
at ju (https://xxxx/static/js/2.97b2c280.chunk.js:2:366905)
at Nl (https://xxxx/static/js/2.97b2c280.chunk.js:2:351180)
at Al (https://xxxx/static/js/2.97b2c280.chunk.js:2:351108)
at wl (https://xxxx/static/js/2.97b2c280.chunk.js:2:348431)
at gl (https://xxxx/static/js/2.97b2c280.chunk.js:2:345175)
at oc (https://xxxx/static/js/2.97b2c280.chunk.js:2:373109)
at Anonymous function (https://xxxx/static/js/2.97b2c280.chunk.js:2:374484)",
Symbol()_6.wutlnu1cxkj: undefined,
Symbol(react.async_mode)_y.wutlnu1cxkj: undefined,
Symbol(react.concurrent_mode)_x.wutlnu1cxkj: undefined,
Symbol(react.context)_o.wutlnu1cxkj: undefined,
Symbol(react.element)_i.wutlnu1cxkj: undefined,
Symbol(react.forward_ref)_p.wutlnu1cxkj: undefined,
Symbol(react.fragment)_k.wutlnu1cxkj: undefined,
Symbol(react.fundamental)_u.wutlnu1cxkj: undefined,
Symbol(react.lazy)_t.wutlnu1cxkj: undefined,
Symbol(react.memo)_s.wutlnu1cxkj: undefined,
Symbol(react.portal)_j.wutlnu1cxkj: undefined,
Symbol(react.profiler)_m.wutlnu1cxkj: undefined,
Symbol(react.provider)_n.wutlnu1cxkj: undefined,
Symbol(react.responder)_v.wutlnu1cxkj: undefined,
Symbol(react.scope)_w.wutlnu1cxkj: undefined,
Symbol(react.strict_mode)_l.wutlnu1cxkj: undefined,
Symbol(react.suspense)_q.wutlnu1cxkj: undefined,
Symbol(react.suspense_list)_r.wutlnu1cxkj: undefined
}
Edge:
TypeError: Unable to get property 'index' of undefined or null reference
SCRIPT5007: SCRIPT5007: Unable to get property 'index' of undefined or null reference
Interesting fact on the side: Before removing my Header component import (to troubleshoot) this same message came but instead of index it said header. I have no component called index. Except the initiating index.js. Thus I am assuming reactjs has a fundamental issue in these browsers. I assume it has problems of getting the file structures react builds?
I have tried polyfill and core-js/stable, both make no difference in the outcome.
*Unfortunately I can't access any developer tools on my Ipad to get the console log of ios chrome and safari. I assume it's the same issue though.
I found the BUG
After almost giving up, I have found the solution. I have been rebuilding the project piece by piece, npm install for npm install, block of code by block of code, until I finally found the problem:
const language = navigator.language || navigator.userLanguage;
Yes as always, one line of code, broke the entire project. You see, chrome and firefox return a different value when using navigator to get the browser language.
In my case Chrome and Firefox returned en while edge returned en-DE
So upon being used to grab the proper language json broke the reference. Thus
"Unable to get property 'index' of undefined or null reference"
Before removing my Header component import (to troubleshoot) this same
message came but instead of index it said header. I have no component
called index. Except the initiating index.js. Thus I am assuming
reactjs has a fundamental issue in these browsers. I assume it has
problems of getting the file structures react builds?
when I referenced language in a json like so:
my_json[language]["index"]
index being the page selector, and so seeming as if it had to do with the component when the selector was
my_json[language]["header"]
So I was actually on the right track, but it was my "file structure/json structure" that broke in Edge, IE and Safari. So close and yet so far.
This was quite a journey and humbling experience. In the end finding this did make my day though! Thank you to anyone who at least broke their head reading the issue.
After finding this the error message made sense, however at the current time, it was impossible to narrow down. Having the component names pop up also made this quite the witch hunt for a while.
UPDATE TO THIS:
It seems to be an "issue" already reported to chromium, it's actually a bug that only language but not country code is returned.
Chrome browser - navigator.language doesn't return country code
My fix:
To only return language:
const language = navigator.language.split("-")[0] || navigator.userLanguage.split("-")[0] || "en";
To only return country code:
const country = navigator.language.split("-")[1] || navigator.userLanguage.split("-")[1] || "us";
I'm trying to persist an observable array to localStorage. To do this I'm using ko.toJSON.
var that = this;
this.items = ko.observableArray();
this.items.subscribe(function(){
localStorage.setItem("items", ko.toJSON(that.items()));
});
All that gets persisted to localStorage is false.
It throws a very random looking error: knockout-3.4.2.js:55 Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules.
Any idea what's going on here?
I get the error as well with a simple var json = ko.toJSON(that.items()); so it clearly comes from that. However, I do not get that error when simply doing this: var json = ko.toJSON([{'key': 'value'}]);.
UPDATE: Here's the full error message:
Uncaught DOMException: Failed to read the 'cssRules' property from
'CSSStyleSheet': Cannot access rules
at http://localhost:8080/js/knockout-3.4.2.js:55:405
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
at c (http://localhost:8080/js/knockout-3.4.2.js:56:172)
at b (http://localhost:8080/js/knockout-3.4.2.js:55:380)
at http://localhost:8080/js/knockout-3.4.2.js:56:23
UPDATE2: Here's the actual section of code where the problem lies:
This is the exact context of the problem:
this.savedPlaces.subscribe(function() {
// Add all places to filteredPlaces
that.filterPlaces();
// Reinitialize the filter
that.filterString("");
// Update the markers
that.updateMarkers();
// Store itself in localStorage
localStorage.setItem("savedPlaces", ko.toJSON(that.savedPlaces()));
});
When I comment out that last line, I get no issue.
I also get no issue if I replace it with: localStorage.setItem("savedPlaces", ko.toJSON([{item: "item"}]));
I tried to give an example of content for items but apparently observableArrays are deep (recursive) objects, making it impossible for me to copy paste for the DevTools console on Chrome. However it looks something like:
[{'marker': a_google_maps_marker_object,
'place': {data: mostly strings...}]
I found the issue.
My observable array contained a Google Maps marker. These are recursive arrays, which cannot be JSONified.
I removed the Google Maps marker from my array and everything was fine.
Still strange though that Knockout throws this cryptic error.
I've just added Redux to my React app and I thought it was working but now I keep getting two errors in my console.
This:
Warning: Failed propType: Required prop 'fields' was not specified in
'ReduxForm(MyForm)'. Check the render method of
'Connect(ReduxForm(MyForm))'.
and this:
Uncaught TypeError: Cannot read property 'reduce' of undefined
The second refers to this (line 2):
var getValues = function getValues(fields, state) {
return fields.reduce(function (accumulator, field) {
getValue(field, state, accumulator);
return accumulator;
}, {});
};
Upadte/Answer:
Make sure redux-form is version 6 or higher
Teach a man to fish!
You have not really given enough codes to go on.
If fields are unexpectedly undefined then you should step through with chrome debugger or console.log everywhere. These are highly underrated methods!
In the browser hit the F12 key.
Select the Scripts , or Sources , tab in the developer tools.
Hit control+p and enter in the path to the file you are looking for.
(Or located little folder icon in the top level to find your file.)
Add a breakpoint by clicking on the line number on the left (adds a
little blue marker)
Execute your JavaScript.
Your code will run until it stops at the breakpoint and you can step forward from there. If you need to check every line then add breakpoints on all lines before stepping through. You can right click variables to add to watch list.
Keep going until you find a faulty logic, undefined/null, or bug occurs. Note that you can console.log() at any time from the console while the code is paused on a breakpoint and it will log correctly for variables in scope.
In my js-test-driver tests, I'm having an error from simply calling
Ext.Msg.alert('Error', 'An error occurred while trying load parameters for action with id ' + actionId);
Error Message: Uncaught TypeError: Cannot read property 'insertBefore' of null
Note that Ext.Msg.rendered is true and that Ext.Msg.el.dom.parentNode is null if I stop execution just before the error.
This error does not happen if:
The real app is running, only during tests.
If I run a single test, only if I run multiple tests that end up calling Ext.Msg.alert
Stack trace
Ext.define.insertBefore (ext-all-debug.js:13281)
Ext.define.show (ext-all-debug.js:42064)
Ext.define.sync (ext-all-debug.js:82755)
Ext.define.syncShadow (ext-all-debug.js:33992)
Ext.define.onAfterFloatLayout (ext-all-debug.js:34002)
Ext.define.afterComponentLayout (ext-all-debug.js:34374)
Base.implement.callParent (ext-all-debug.js:4455)
Ext.define.afterComponentLayout (ext-all-debug.js:38639)
Ext.define.notifyOwner (ext-all-debug.js:38067)
Ext.define.callLayout (ext-all-debug.js:125114)
Ext.define.flushLayouts (ext-all-debug.js:125283)
Ext.define.runComplete (ext-all-debug.js:125769)
callOverrideParent (ext-all-debug.js:36)
Base.implement.callParent (ext-all-debug.js:4455)
Ext.override.runComplete (ext-all-debug.js:29905)
Ext.define.run (ext-all-debug.js:125750)
Ext.define.statics.flushLayouts (ext-all-debug.js:29913)
Ext.define.statics.updateLayout (ext-all-debug.js:29947)
Ext.define.updateLayout (ext-all-debug.js:31844)
Ext.define.onContentChange (ext-all-debug.js:36116)
Ext.define.updateLayout (ext-all-debug.js:31839)
Ext.define.onContentChange (ext-all-debug.js:36116)
Ext.define.updateLayout (ext-all-debug.js:31839)
Ext.define.setTitle (ext-all-debug.js:53058)
Ext.define.setTitle (ext-all-debug.js:55155)
Ext.define.reconfigure (ext-all-debug.js:90310)
Ext.define.show (ext-all-debug.js:90476)
Ext.define.alert (ext-all-debug.js:90600)
Ext.define.onInstanceRetrievalError (BaseWorkflowActionController.js:139)
(anonymous function) (ext-all-debug.js:2265)
Ext.apply.callback (ext-all-debug.js:7437)
Ext.define.Ext.apply.inheritableStatics.load (mock.js:38)
Ext.define.onDocumentClick (BaseWorkflowActionController.js:73)
(anonymous function) (VM6566:6)
Ext.apply.createListenerWrap.wrap (ext-all-debug.js:10786)
AsyncTestCase.test_unknown_error_displays_error_dialog (WorkflowSingleActionController.Test.js:87)
Any ideas of what could be going on? Or something to try?
This question was cross-posted to http://www.sencha.com/forum/showthread.php?288372-Error-calling-Ext.Msg.alert-from-js-test-driver-tests&p=1053744#post1053744
The problem is that js-test-driver runs the following code which removes any content from the DOM at the end of each test.
var testRunnerPlugin =
new jstestdriver.plugins.TestRunnerPlugin(Date, function() {
jstestdriver.log(jstestdriver.jQuery('body')[0].innerHTML);
jstestdriver.jQuery('body').children().remove();
jstestdriver.jQuery(document).unbind();
jstestdriver.jQuery(document).die();
}, runTestLoop);
Therefore, the global Ext.Msg which was rendered onto the body becomes orphaned and it fails when trying to sync the shadow.
The solution is not to use the global Ext.Msg, always instantiate a new Ext.message.MessageBox if you want your code to be testable in js-test-driver
Here's a test case that reproduces the exact same stack trace https://fiddle.sencha.com/#fiddle/7i1
My forum (based on phpbb3) has a Javascript error that I'd like to resolve. In FF and IE the following error occurs:
Error: SXBB[id].resize is not a function
Source File: http://digital-diy.com/forum/classes/scripts/select_expand_bbcodes.js
Line: 197
The mod that uses this script is called "Syntax Highlighter 1.0.15". The developer is not sure why the error occurs, hopefully someone at stackoverflow can lend a hand?
Track down the SXBB object or array and view the id variable.
Make sure that property (what id refers to) is set on that object (SXBB).
My guess is it isn't, and it's undefined, and undefined has no resize() method.