'Airbrake' is undefined in IEs about airbrake-js

[iainbeeston]

I also see this in IE8 (maybe 9, but I can't be sure)

[razvan-sv]

It's in both IE8 & IE9.

[razvan-sv]

I managed to pass the IE9 issue with the following script

:javascript
  (function() {
    var tk = document.createElement('script');
    tk.src = "https://ssljscdn.airbrake.io/notifier.min.js";
    tk.type = 'text/javascript';
    tk.async = 'true';
    tk.onload = tk.onreadystatechange = function() {
      var rs = this.readyState;
      if (rs && rs != 'complete' && rs != 'loaded') return;
      Airbrake.setRequestType('GET');
      Airbrake.setGuessFunctionName(false);
      Airbrake.setKey('#{Airbrake.configuration.api_key}');
      Airbrake.setEnvironment('#{Rails.env}');
      Airbrake.setErrorDefaults({
        url: document.URL,
        component: "#{controller_name}",
        action: "#{action_name}",
      });
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tk, s);
  })();

On IEs older than 9 this doesn't work.

Could you please fix the insecure content warning?

Thanks.

[iainbeeston]

1. Why check for both complete and loaded readystates? (Surely just complete would be enough?)
2. I was just reading this which suggests that we should not use both onload and onreadystatechange.
3. I've no idea why that wouldn't work in IE8...

[iainbeeston]

Actually, I think I know why it's not working in IE8 - IE9 supports onload as well as onreadystatechange, so maybe the onreadystatechange part isn't working?

Can you try this?

  (function() {
    var tk = document.createElement('script');
    tk.src = "https://ssljscdn.airbrake.io/notifier.min.js";
    tk.type = 'text/javascript';
    tk.async = 'true';
    var cb = function() {
      if (this.readyState && this.readyState != 'complete') return;
      Airbrake.setRequestType('GET');
      Airbrake.setGuessFunctionName(false);
      Airbrake.setKey('#{Airbrake.configuration.api_key}');
      Airbrake.setEnvironment('#{Rails.env}');
      Airbrake.setErrorDefaults({
        url: document.URL,
        component: "#{controller_name}",
        action: "#{action_name}",
      });
    };
    if(tk.addEventListener) {
        tk.addEventListener('load', cb, false);
    } else if(tk.readyState) {
        tk.onreadystatechange = cb;
    }
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tk, s);
  })();

[razvan-sv]

Hi Iain,

Tried the script and it works, kind of. I don't get the Airbrake is undefined issue anymore but I get something else. See the screenshot. That happens when an js error appears (deliberately added one) and it seems to be a loop there. Both IEs 8 and 9 became unresponsive and hardly managed to close them.

Thanks !

[iainbeeston]

I think that's a problem with the airbrake script itself. By my calculations of where character 9133 occurs in the minified script, it's failing on notifier.js line 409 (calling open on an XMLHttpRequest).

After doing a little searching it turns out that IE 8 and 9 don't support using XMLHttpRequests for cross-domain ajax requests (see here and here and that's exactly what notifier.js tries to do when sending data to airbrake.

Based on that, it seems like to support IE < 10 notifier.js should check which browser it's running in, and use XDomainRequest instead of XMLHttpRequest for IE.

However, looking at the code, it seems that the problem might be confined to POST requests, as notifier.js uses an iframe for GET requests (to avoid the CORS issue, presumably?). Can you confirm that your config is definitely using GET, as in your original message (above)?

[razvan-sv]

Hi Iain,

Yes I'm using "GET" as in those examples. Right now I use the airbrake gem and airbrake_javascript_notifier (which is not async) works in all IEs.
Do you want me to paste what JS returns the airbrake_javascript_notifier tag ?

[iainbeeston]

I'm out of ideas. I'm not sure if taking what the gem produces will help diagnose the problem.

Looking at the code, the notifier uses POST requests for JSON data and GET requests for XML data. By default it uses GET and XML, and you're not changing that in the code above.

[iainbeeston]

Maybe I've diagnosed notifier.min.js character 9133 incorrectly?

@benarent do you have any ideas?

[razvan-sv]

Hi Iain,

Could you please fix the insecure content notice (The page at about:blank displayed insecure content from http://api.airbrake.io/notifier_api/v2/notices?). I want to test for a couple of days everything but IEs. Thanks.

[iainbeeston]

FYI @razvan-sv I don't work for airbrake! I'm just an open-source contributor like everyone else.

Your error sounds like your site is using https but the airbrake notifier is contacting airbrake over http. I don't have time to investigate at the moment though

[benarent]

Hi @razvan-sv ... Can you tell me more about the issue, should you be using https:// is this your issue? Feel free to hit me up on IM. [email protected] and I'll help you out.

Ben

[razvan-sv]

Sorry Iain didn't notice :-).

@benarent - One of the issues is that when I'm using the https://ssljscdn.airbrake.io/notifier.min.js I get a insecure content warning in Chrome saying that the code uses http://airbrake instead of https://. I also saw that in the minified js file (m="http://"+this.options.host+"/notifier_api/v2/notices"). These insecure content warnings are basically errors in IEs - that's what I saw, I'm no js expert.

The other issue is that I couldn't make the async code + https version work on IEs. You can see the messages above. I was thinking about how does the airbrake_javascript_notifier work in IE without raising any errors?

Btw - I'm using airbrake + SSL all the time

Thanks !