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.
I realize this is not recommended by the JS community but I think have a good use case for overriding the Object.prototype so that accessing properties of undefined objects returns undefined instead of throwing an app crashing error.
Little background information:
Working with a large app (about 200k lines of code)
App is extremely configurable with loads of options - there's no way of testing every possibility
Angular 2/Ionic 2 project
Basically, I'd like to make it so that the following code console logs 'undefined' instead of generating an error:
Pseudo code:
Object.defineProperty(Object.prototype, Object.prototype.get, (val) => {
try {
console.log(val);
} catch (e) {
console.log('Attempted to access undefined property');
}
});
const obj = {
a: 'b'
};
console.log(obj.a.b.c); // should log undefined but actually generates an app freezing issue
Questions:
How can I make this work? Is there another way I can prevent null check errors across the entire app without adding too much code? Is there a generic fix for making it so that these null check errors do not crash the Angular/Ionic app?
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";
We just installed an error-tracker for our Ember-application, and the only error that is reported is Cannot read property 'find' of undefined. The code that cause this error is within a component, and looks like this:
this.set('interval', setInterval(() => {
const current = this.get('counter') - 1;
this.set('counter', current);
this.$().find('.countdown-number').text(current); // <- error here
}, 1000));
I don't understand how this can happen. How can $() be undefined, since it's a part of the ember framework?
According to the error-tracker, it happens for a bunch of different browsers, latest Chrome for example. I however can't reproduce the error in any browser.
I know this isn't the "ember way" of updating a text in a div, but I would prefer to not have to rebuild a lot, I just want to fix the bug with as little changes as possible.
this.$() will be undefined if component is destroyed or didn't render properly. Make sure you call this.$() only when component is in DOM and on willDestroyElement you remove all events that could access this.$().
We see this occasionally in web apps on Firefox. What triggers it, and how do we prevent it? It seems to happen sporadically and the error message yields no useful information about line locations.
A quick google search yielded this:
http://blowery.org/2008/02/28/object-cannot-be-created-in-this-context-code-9/
...check your code to see if you’re
trying to grab a reference to the
computed style on a null reference.
It appears to be connected with the Dojo framework.
Edit: Ha. Sorry I gave you your own blog as an answer. I guess I don't completely understand what you're asking for. If you want to avoid the error, you could use object checking before running the applicable code.
function isValidObject(someObject)
{
return typeof someObject != null;
}
var obj1 = "Hello World";
if(isValidObject(obj1))
{
//This code will run
}
if(isValidObject(ob2))
{
//This code will not run
}
Hope that's helpful.