I'm trying to modify an ajax callback without actually having access to the original code (don't ask...), and I had found a similar version of the below code on Stack Overflow, which I thought worked great! I put it onto my site, tested it in all browsers, even tested on mobile with success.
So I deployed it this week and, lo and behold, I discovered that for somewhere between a quarter and a third of users this isn't firing correctly. I've been trying like hell to replicate the problem, but again, all of my testing has been successful.
My analytics have told me that the problem is existing for IE, Firefox, and Chrome, and the most up-to-date versions of each, with no tendency toward one browser or another. And from the nature of the problem, I know that the original ajax callback is functioning correctly; it's just my new extra code that's broken.
The site specific code I've written shouldn't be posted online, and stackoverflow isn't jsLint, so I've just replaced it with "some code" here. Suffice to say, I've pored over it looking for potential errors, but I was wondering if anyone knew of any reason why the below code would not work in some but not all cases. Because the below is the only code I'm not sure about.
function init(){
"use strict";
var send = window.XMLHttpRequest.prototype.send,
onReadyStateChange;
function sendReplacement(data) {
if(this.onreadystatechange) {
this._onreadystatechange = this.onreadystatechange;
}
this.onreadystatechange = onReadyStateChangeReplacement;
return send.apply(this, arguments);
}
function onReadyStateChangeReplacement() {
if(this._onreadystatechange) {
var end = this._onreadystatechange.apply(this, arguments);
}
some code
if (this._onreadystatechange){return end}
}
window.XMLHttpRequest.prototype.send = sendReplacement;
}
Related
I'm trying to use a template but just realized that the javascript doesn't work at all in IE.
It fails in several places but here is the first one:
I have this tag, immediately before my </html>:
<script>
document.addEventListener("DOMContentLoaded", function (event) {
navbarToggleSidebar();
navActivePage();
});
</script>
The exception says, "0x800a1391 - JavaScript runtime error: 'navbarToggleSidebar' is undefined occurred"
The javascript file that came with this template was minimized as uses some cracy javascript markup that I've never seen and do not understand. But when I do a find in the whole solution for navbarToggleSidebar I only find this:
JkW7: function (t, e, n) {
"use strict";
Object.defineProperty(e, "__esModule", {
value: !0
});
var i = (n("PExH"), n("juYr"), n("6wzU"), n("e9iq"), n("aWFY"));
! function (t) {
t.keys().map(t)
}(n("pax0")), Object.assign(window, {
masonryBuild: i.a,
navbarToggleSidebar: i.c,
navActivePage: i.b
})
},
I can post the whole file somewhere (just tell me where, it's too long to paste here) if that's helpful because this is clearly just a piece of a huge js thing that I don't understand at all. I like to think I'm fairly decent with js and jquery and this looks greek to me. And it all works beautifully in Chrome and FF.
Can anyone help me figure out what's going on?
Thanks!!
Well n is a callback function t is an array or a list of some kind most likely; so in order for you to figure out what is actually happening in the function you have to figure out where the function was actually invoked. It is much easier to find out what library was used and see if it is hosted anywhere in a non-minified version.
Sometimes this is done intentionally in order to protect developers from other people having an easy time engineering their solutions to programming problems.
Basically in order for anyone to figure out what the function actually does, you would have to print the entire page library, then trace through it, then when you are done after about a month you will have your answer.
Arrays, callback functions, as well as a probably system variable and object literals are used in that function.
I have adopted the library Q.js into my program to try and solve some problems with the order of execution in my code, I am new to promises and deferred in general, so this is a pretty difficult step for me.
At this point in time, I am using Q v1 within ASP.NET MVC, and therefore I am using Visual Studio 2013.
Now, the actual code for what I am doing is a great deal longer than this, but I'll attempt to be concise, as I often get told my questions are too long and verbose.
I start by including q.js and require.js normally, nothing special is going on here. It works fine, it compiles, it runs, all is happy and well.
#Scripts.Render("~/scripts/q")
#Scripts.Render("~/scripts/require")
<script type="text/javascript">
Q().then(function(){
// some code executes here.
$.blockUI(); // the whole page is blocked while loading.
console.log("[1] first step. blocking the page.");
}).then(function() {
console.log("[2.1] starting the second step.");
require(['home/app/init'], function(app) {
console.log("[2.2] within the require function.");
new app.init().wiring(); // this does some preliminary stuff for the app
});
console.log("[2.3] outside of the require function.");
}).then(function() {
console.log("[3.1] made it to the third step. stuff happens.");
});
</script>
Now, running this code, the console output for 2.1 and 2.3 are visible before 2.2 - which is the crux of the problem. I want it to run in order. So I dug a bit more, and found this suggestion; changing my require call to look more like this was suggested to me ..
// ....
.then(function(){
var promise = Q.when(require['home/app/init'], function(app) {
console.log("[2.2.1] within the require");
new app.init().wiring();
}).then(function() {
console.log("[2.2.2] I expect to see this after 2.2.1");
});
console.log("[2.3] outside of the require function.");
});
Now I get that 2.3 will still run before 2.2.1, but I'm still seeing 2.2.2 running before 2.2.1 - and I thought that wrapping the behavior in the Q.when(fn) was supposed to fix that?
Can someone help me understand why these are not running in the order I am asking them to?
For a bit more information, the file home/app/init is actually a Typescript file that looks a bit like this;
home/app/init.ts
export class init {
public function wiring() {
// some simple things happening here, nothing special.
}
}
I am not sure if this question qualifies to have the ASP.NET MVC tag, but the fact that I am using that framework is paramount to the tooling I use, which does have influence over what I can do (for instance, I'm having a hard time with things involving node.js because of Visual Studio) - so I am tagging it explicitly to be sure people realize the kind of development environment I am in.
Update
I have made a bit of progress on this, though I am still a bit uncertain. At the moment, the following code seems to run more in the order I am expecting.
// .....
.then(function(){
console.log("[2.1]");
// create a deferred promise
var deferred = Q.defer();
require(['home/app/init'], function(app) {
// we are inside the require function
console.log("[2.2]");
// run the actual method
new app.init().wiring();
// report back to the console.
console.log("[2.3]");
// resolve the promise
deferred.resolve();
});
console.log("[2.4]");
Q.when(deferred.promise).then(function() {
console.log("[2.5]");
}).then(function(){
// ... continue
});
This at least seems to cause the code to pause and wait for the require to finish before it goes on to 2.5, but I'm not sure if this is the correct way to do this with Q.js.
2.1 will run before 2.2 because that's the order you are running the code but the 2.2 code runs asynchronously so gets run once require has got everything in order which will take more time than it takes the 2.3 code to execute
I think in your second block of code you want to move the 2.2.2 block inside the when see the documentation for when at the bottom of this page
https://github.com/kriskowal/q
I'm writing a decent sized JavaScript animation library, that I would like to include debugging code in. I could easily do a check :
if(myLib.debugger){
console.warn('warning message');
}
However if this runs a couple thousand times a second, it would eventually cause performance issues. Add in a few more checks throughout the code and the effect will be even more noticeable.
What I'm wondering is if it would be possible to check onload if the debugger should be enabled, and if so... turn something like this:
//debugger if(!this.name) console.warn('No name provided');
into:
if(!this.name) console.warn('No name provided');
Leaving the code commented if its not enabled, and uncommenting it if it is, thus removing any possible performance issues. Could this be done somehow with a regular expression on the entire script if loaded in through ajax? I'm trying to avoid the need for 2 versions of the same code, lib.dbug.js and a lib.js.
Cross browser compatibility is not of great importance for this (I'm really only worried about new browsers), I see it as nice to have item. If its possible however, it would be a great thing to have.
Any insight would be greatly appreciated.
The simplest way to do this would be to check if the debugger should be disabled and if so, replace it with a mock object that does nothing at the very start of your script:
if (!myLib.debugger) {
window.console = (function () {
var newConsole = {};
var key;
for (key in window.console) {
if (typeof window.console[key] === 'function') {
newConsole[key] = function () {};
}
}
return newConsole;
}());
}
The overhead of this approach should be negligible.
If this is a JavaScript library... then I'd expect as a 3rd party developer that I could download/use 2 versions. The production version (no debug, AND minimized). If I wanted to debug, I would point to the debug version of the library instead.
e.g.
<script src="foo-lib-min.js"></script>
<!-- swap to this for debugging <script src="foo-lib-full.js"></script>-->
I'm currently getting an error within Facebook's FacePile code, and I'm baffled by the cause.
facepile.php loads a script which, among other things, has these lines (when pretty-printed):
...
o = document.createElement('script');
o.src = l[n];
o.async = true;
o.onload = h;
o.onreadystatechange = function() {
if (o.readyState in c) {
h();
o.onreadystatechange = null;
}
};
d++;
a.appendChild(o);
...
(a == document.body, d++ is irrelevant here)
This code loads a script with src = http://static.ak.fbcdn.net/rsrc.php/v1/yW/r/pmR8u_Z_9_0.js or something equally cryptic (the filename changes occasionally).
In that script, there are these lines at the very top (also when pretty-printed):
/*1331654128,176820664*/
if (window.CavalryLogger) {
CavalryLogger.start_js(["\/8f24"]);
}
window.__DEV__ = window.__DEV__ || 0;
if (!window.skipDomainLower && document.domain.toLowerCase().match(/(^|\.)facebook\..*/))
document.domain = window.location.hostname.replace(/^.*(facebook\..*)$/i, '$1');
function bagofholding() {
}
function bagof(a) {
return function() {
return a;
};
}
if (!Date.now)
Date.now = function now() {
return new Date().getTime();
};
if (!Array.isArray)
Array.isArray = function(a) {
return Object.prototype.toString.call(a) == '[object Array]';
};
...
And I'm getting an error which says "SCRIPT5009: 'Date' is undefined", right at the if (!Date.now) portion. Debugging near that point reveals that Date, Array, Object, Function, etc are all undefined.
Er... how? window exists, as does document (though document.body is null) and a handful of others, but plenty of pre-defined objects aren't. Earlier versions of IE don't seem to have this problem, nor do any other browsers, but multiple machines running IE9 (including a clean VM) all have the same issue.
I doubt I can do anything about it, but I'm very curious how this is happening / what the underlying problem is. Does anyone know, or can they point me to something that might help?
-- edit:
Prior to posting this question, I had found this site: http://www.guypo.com/technical/ies-premature-execution-problem/
While it seemed (and still does) like it might be the source of the problem, I can't replicate it under any smaller circumstances. All combinations I've tried still have Date, etc defined ; which isn't too surprising, as otherwise I'm sure others would be seeing many more problems with IE.
If you step through with a javascript debugger at the first point any JS gets run. At the same time add a watch for Date/Array etc. and note when it goes to null. Might be slow and laborious but I can't see why it wouldn't work.
You may want to try adding the script in a document.ready function. In other words, insure that the FB script is processed only after the DOM is ready. But, based on the link you give to Guy's Pod (great article, by the way), it seems you're right in the assertion that IE is downloading and executing the script pre-maturely (hence my suggestion to add a wrapper so that it only executes after the DOM ready event). IE9 is probably sandboxing the executing script (outside the document/window scope).
When I run
window.onload = function () {
document.addEventListener("deviceready", getGeolocation);
}
function getGeolocation() {
navigator.geolocation.getCurrentPosition( successCallback, errorCallback, {maximumAge: 0});
}
or
function getGeolocation() {
watchGeoMarkerProcess = navigator.geolocation.watchPosition(updateCallback, errorCallback);
}
and then
function updateCallback(position) {
if (position.coords.accuracy < 100) {
navigator.geolocation.clearWatch(watchGeoMarkerProcess);
}
}
in my app on iOS 5 using phonegap it seems to get stuck, since the geolocation indicator-icon stays in the top bar and it never goes away, which I take to mean that the GPS doesn' get turned off. Also, sometimes I don't get any coords at all, throwing a time-out error.
I don't think there is anything wrong with the code since it works just fine as a webapp.
Any ideas?
navigator._geo is the 'real' implementation I believe. I've seen recent git commits where they are trying to over-ride navigator.geolocation but apparently failing on iOS. Looking at the phonegap source code gave me the idea to try the real call instead.
Here is the git commit:
http://mail-archives.apache.org/mod_mbox/incubator-callback-commits/201203.mbox/%3C20120307000809.B82AA5D82#tyr.zones.apache.org%3E
Here is another thread on the problem:
https://groups.google.com/forum/?fromgroups#!topic/phonegap/W32yYpV28W8
UPDATE: I have some measure of success now:
Edit your phonegap.js, comment out lines 3451-3453 which look like this:
__proxyObj(navigator.geolocation, navigator._geo,...
You will get an ugly permission alert.. but the location should work. The reasoning behind this change is that you will now use safari's location detection, not PhoneGaps.
UPDATE2: ..and the problem with PhoneGap turned out to be a conflict with another javascript library, in this case dragdealer.js. So double check for any suspicious variable names like "Location" or "Position" in any other javascript you are using. For some reason this conflict was not a problem on platforms other than iOS.
For what it's worth I have a same problem and these fixes did not work. But they may for you:
make sure you get the location after onDeviceReady() has been called
try using navigator._geo.getCurrentPosition
I had the same problem, although on Android.
Adding the enableHighAccuracy option caused it to start working:
navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true} );