Develop Reference

Window that was opened by window.open won't close

I'm having problems with a piece of code that has worked before for years, but seems to have stopped working now.
I'm opening a window with a login form and I'm listening via a WebSocket for events regarding that login. After the login was successful, I want to close the window (that my script has opened and kept the reference to) after a short moment. I'm using the following code:
const windowManager = {
window: null,
eventType: null,
}
function openWindow({ url, eventType }) {
windowManager.window = window.open(url)
windowManager.eventType = eventType
}
function closeWindow({ eventType }) {
if (windowManager.window && windowManager.eventType == eventType) {
setTimeout(() => {
windowManager.window && windowManager.window.close()
windowManager.window = null
}, 100)
}
}
I have confirmed that windowManager.window.close() is called and does not thrown an error. I have also extracted the code from the application and tested it separately and it still won't close the window. As I said, this piece of code has worked before and was not changed in the past two years or so.
I'm using the following browsers:
Safari 15.3
Firefox 97.0b9 (Developer Edition)
Chromium 94.0.4606.61
I'm grateful for any pointers which could help resolve this issue. Thanks a lot!

After figuring out that the above code worked totally fine with other sites like Google or GitHub, I found that the Cross-Origin-Opener-Policy header in our auth backend (which was the site that was opened with the code) is the culprit. We had just updated Helmet to version 5 which added the header by default.
Our solution was to set Cross-Origin-Opener-Policy to same-origin-allow-popups on both source and target window (which are hosted on the same origin, but served by different servers). It also worked when setting it to unsafe-none for the target window without setting it at all on the source window.

Google Maps in IE11 gives "Unspecified error"

I'm getting a very strange error when using custom Google Maps in a website of one of our clients. The map has some markers on it, and when you open the marker you can see a dialog with the address of that location. When I close this dialog (obviously by clicking the cross) in IE11, I get an "Unspecified error". For some reason, this error is being thrown from the method "getBoundingClientRect()". No other browser has this issue (not even IE8).
I am using Google Maps API version 3.14.
Does anyone know what this could be? I'm not sure if it's necessary to place any code, but I'm willing to do that if that makes everything more clear.

You can use this fix for IE (place this code on top):
HTMLElement.prototype._getBoundingClientRect=HTMLElement.prototype.getBoundingClientRect;
HTMLElement.prototype.getBoundingClientRect = function() {
try {
return this._getBoundingClientRect();
} catch(e) {
return { top : this.offsetTop, left : this.offsetLeft };
}
}

error appears out of blue in console

I am receiving an error in my error console which states: arguments array passed to Function.prototype.apply is too large and the file it is in is: resource://ct2504091/BackStage.jsm. Does anyone know why this error suddenly appears out of the complete blue?
Below is the code from the view source of where the error is appearing in:
var postBytes = stream.readByteArray(stream.available());
poststr = String.fromCharCode.apply(null, postBytes);

A Google search for "javascript BackStage.jsm" reveals: You seem to have installed a "Bibirmer for Firefox Plugin" that interfers with you code. Try uninstalling it.

Improving our javascript error reporting

So right now we have some generic code to report errors either from our code or third party code. Our project is a JQM/Phonegap project for iOS. What is happening is we pretty much always get the same useless error... TypeError: 'undefined' is not a function... with no line number or other helpful information. Is there a way I could change the code to maybe get WHAT is undefined or WHERE it is?
window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
//Handle errors not in a jquery event handler
//DebugMessage(errorMSg + " "+ url + " " + lineNumber);
var ex = new Error(errorMsg, url, lineNumber);
HandleError(ex, "window.onerror");
//HandleError sends the error object to
//a webservice to log the error.
return true;
};
Any tips on debugging javascript errors would help as well.

In recent months, browsers have extended the signature of window.onerror to provide more information.
window.onerror = function(msg, file, line, col, error) {
// backwards compat
if (!error) {
error = new Error(msg);
}
// send error to your logger
}
This should give you a lot more information. But there are still things where you need better context. You should check out some third-party tools for this like TrackJS that automatically give you this, plus extra information on how the error occurred.
Disclaimer: I am one of the original authors of TrackJS, so I know a bunch about JavaScript errors :)

Have you heard of Ripple? It is a mobile emulator for Chrome designed for testing PhoneGap applications.
That might help you find your errors before you debug on the devices.

What is this obscure error in Google Analytics tracking code on a _trackEvent() call?

I am calling the Google Analytics _trackEvent() function on a web page, and get back an error from the obfuscated Google code. In Firebug, it comes back "q is undefined". In Safari developer console: "TypeError: Result of expression 'q' [undefined] is not an object."
As a test, I have reduced the page to only this call, and still get the error back. Besides the necessary elements and the standard Google tracking code, my page is:
<script>
pageTracker._trackEvent('Survey', 'Checkout - Survey', 'Rating', 3);
</script>
Results is that error.
What's going on here?

This problem seems to occure when the page is not fully loaded yet: http://www.google.com/support/forum/p/Google+Analytics/thread?tid=4596554b1e9a1545&hl=en
The provided solution is to wait for pageTracker.cb
function trackEvent(target, action, opt_label, opt_value) {
if(pageTracker && !pageTracker.cb) {
setTimeout(function() {
trackEvent(target, action, opt_label, opt_value);
}, 200);
return;
}
pageTracker._trackEvent(target, action, opt_label, opt_value);
}

Actually the answer no. 1 is not correct. That's because pageTracker.cb never gets set (it's an obfuscated property name) with other versions of GA.
You should call upon initialization:
pageTracker._initData()

This looks like a bug in ga.js introduced when they added _initData() functionality to _trackPageview(). Unfortunately _initData() isn't actually called after the conditional. Hope they fix it before they deprecate_initData() for good.
e.g.
This page suggests the above should work without calling _initData():
http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55527