Getting many Javascript errors on Firefox 77.0

[ct21]

Our client side Javascript catches all uncaught errors and reports them back to our server where they are logged. We have seen a growing number of errors on Firefox 77.0 browsers lately in the PayPal SDK Javascript code (Windows and Linux systems). We capture the following details:

The following Javascript error was reported to the web server on Fri Jun 26 08:50:08 EDT 2020:

Error location:https://www.paypal.com/sdk/js?client-id=****&currency=USD&disable-funding=credit (line 2, column 47550)
Error: Request to post https://www.paypal.com/xoplatform/logger/api/logger failed: [object ProgressEvent].
Stack Trace:
ht/
Client Details:
userAgent:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0
appCodeName: Mozilla
appName: Netscape
appVersion5.0 (Windows)
platform: Win32
prototype:undefined

URL: https://cabintechglobal.com/mn3007

The stack trace is not very useful, other than showing it happens in the ht() method where it detects a POST failure and throws and exception (which apparently is not caught anywhere and ends up on our error handler):

function ht(n) {
   return function (n) {
      var ...;
      return new E((function (n, t) {
         ...
         var v = new c.XMLHttpRequest;
         for (var b in v.addEventListener("load", (function () {
           ...
           }), !1), v.addEventListener("error", (function (n) {
---->        t(new Error("Request to " + r.toLowerCase() + " " + e + " failed: " + n.toString() + "."))
           }), !1), v.open(r, e, !0), o) o.hasOwnProperty(b) && v.setRequestHeader(b, o[b]);
           a ? s = JSON.stringify(a) : u && (s = Object.keys(u).map((function (n) {
           return encodeURIComponent(n) + "=" + (u ? encodeURIComponent(u[n]) : "")
        })).join("&")), v.timeout = f, v.ontimeout = function () {
           t(new Error("Request to " + r.toLowerCase() + " " + e + " has timed out"))
        }, v.send(s)
      }))
    }({
      ...
    }).then(hn)
}

We cannot tell when this is happening (page load, PayPal button click, payment attempt, payment complete) and have been unable to reproduce it ourselves, but we are concerned that some customers are unable to complete orders on our website because of this.

How can we find out what is going on and fix it?

[ct21 · Accepted solution]

For anyone else that comes across this... after months of head-scratching, a customer having the problem finally offered to help track it down. Turns out that an ad blocker ("adblocker plus") when configured with the "Block additional tracking" setting will block the PayPal logger API (and several others... complete block list is at https://easylist-downloads.adblockplus.org/easyprivacy.txt).

For some reason the error from the blocked call bubbles up to our global JS error handler on Firefox. On Chrome we do not get this error in our handler (but I verified the call is blocked on Chrome). The solution for us was to specifically look for this error in our handler, and just ignore it (instead of re-directing the user to our "opps, we had an error" page).

function jsErrorHandler(msg, url, line, col, error) {

  StackTrace.fromError(error).then(function(stackframes) {
    if (msg.indexOf("paypal.com/xoplatform/logger/api/logger") >= 0) {
      return; // Ignore this error
    }
    window.location = "jserror.html?details=..." // Redirect user to our error page
    //...report this JS error to our server...
  }
}

[John402]

@ct21 Thanks for posting that information.  You're right, an adblocker was causing the errors.  In my case, it was uBlock Origin on Firefox 79.  Once I disabled that, the errors disappeared.  But I don't fully understand your solution.  Were you able to do something in your code that allowed you to catch the errors and proceed?

I'm getting the error when I'm simply rendering the buttons:

			paypal.Buttons({
				style: {
					shape: 'pill',
					color: 'gold',
					layout: 'vertical',
				},
				createOrder: function(data, actions) {
					return actions.order.create({
						purchase_units: [{
							amount: {
								value: 1
							}
						}]
					});
				},
				onApprove: function(data, actions) {
					alert("Payment complete");
				},
				onCancel: function (data) {
					alert("Payment canceled");
				}
			}).render('#paypal-button-container');

I tried putting that entire block of code in a try/catch block, but that didn't help at all.  What am I missing?  Short of asking the user to disable their adblocker, how do I get this to work without errors? 

[ct21]

After months of head-scratching, a customer having the problem offered to help track it down. Turns out to be an ad blocker ("adblocker plus"). When configured with the "Block additional tracking" option it blocks the PayPal logger API (and several other PayPal calls).

On Firefox the failed logger call shows up as an error in our global Javascript error handler (where we send it to the server for analysis and website support notification) and we redirect the user to an "opps, we had an error" page. On Chrome it never comes to our error handler. Even with these blocked PayPal calls, PayPal express checkout buttons work fine.

Our solution was to look for this specific error and just ignore it:

function jsErrorHandler(msg, url, line, col, error) {
  StackTrace.fromError(error).then(function(stackframes) {
    if (msg.indexOf("paypal.com/xoplatform/logger/api/logger") >= 0) {
      return;
    }
    window.location = "jserror.html?details=..."
    //...report this JS error to our server...
  }
}

[ct21]

In our on page load we do this:

window.onerror = jsErrorHandler;

the error handler function is:

function jsErrorHandler(msg, url, line, col, error) {

  StackTrace.fromError(error).then(function(stackframes) {
    var stringifiedStack = stackframes.map(function(sf) {
    return sf.toString();
  }).join('<br>');

  var s = url + " (line " + line;
  if (col) { // Some browsers do not give col and error arguments
    s = s + ", column " + col;
  }
  s = s + ")<br><br>" + msg;
  if (error) {
    s = s + "<br><br>" + error;
  }
  s = s + "<br><br>Stack Trace:<br>" + stringifiedStack;

  //v6.05 Some ad blockers block this PayPal call. On Firefox the failed call comes up to our
  // error handler (for some reason on Chrome it does not). This is not a real error on our
  // web site and PayPal will work even when this call is blocked. So we ignore this error -
  // we do not report it and we do not redirect the user to the JS error page.
  if (msg.indexOf("paypal.com/xoplatform/logger/api/logger") >= 0) {
    return;
 }

  // Redirect to our JS error page and pass details HTML
  window.location = "jserror.html?details=" + encodeURIComponent(s);

  // Report this error to the server for logging and notification.  
  // There is no data returned by the server, and we ignore any
  // failure in the call.

  // Gather as much info about the JS environment as possible. We don't display
  // this on the JS error page but do log this in the server.
  s = s + "<br><br>Website version: "+VERSION; //v6.06
  s = s + "<br><br>Client Details<br>";
  s = s + "<br>userAgent:" + navigator.userAgent;
  s = s + "<br>appCodeName: "+navigator.appCodeName;
  s = s + "<br>appName: "+navigator.appName;
  s = s + "<br>appVersion" + navigator.appVersion;
  s = s + "<br>platform: " + navigator.platform;
  s = s + "<br>prototype:" + navigator.prototype;

  s = s + "<br><br>URL: " + window.location.href;

  util.reportJSError(s); // Post JS error to our server

});

return true; // In older IE versions, returning true supresses error dialog
}

Hope that helps!

[John402]

Thank you!