airbrake / airbrake-js

Airbrake JavaScript Notifier

Official Airbrake Notifiers for JavaScript

Please choose one of the following packages:

@airbrake/browser for web browsers.

@airbrake/node for Node.js.

airbrake-js's Issues

undefined:0 & internal::0 Errors.

Use App versions for javascript files

I had a request from @jamesarosen to use 'app-versions' for the javascript notifier. This feature is required as to limit errors coming for older version on older boxes / browsers.

It seems the API shouldn't matter and maybe we add it as a custom variable?

http://help.airbrake.io/kb/ios/app-versions

Not capturing data-airbrake-environment

Looks like we are not capturing environment information and also context and session information. It will be good to atleast capture the environment info so that in the airbrake UI we can filter by environment.

Thanks!

context, env, params and session are placed at wrong level

Currently client sends this: https://gist.github.com/vmihailenco/04033d95eaa53ab7fa32. but should send: https://gist.github.com/vmihailenco/f5951642201143cec32f . Note that I replaced env with environment.

@duncanbeevers , please fix this and ask @benarent to deploy ASAP.

Notice was rejected: either error type or error message is required

H,i I'm getting this response from airbrake-js "Notice was rejected: either error type or error message is required." I contacted airbrake support and was asked to open up an issue.

Code Sample

I was attempting to throw an error when an ajax call failed. I've tried it with ajax error

$.ajax
    url: '/path'
    dataType: 'json'
    cache: false
    success: (data)->
      items = _.map data.items, (itemJSON)->
        itemJSON.item
    error: (jqXhr, textStatus, er)->
      if er
        Airbrake.push({
          error: er
        })

and using .fail()

$.ajax({
    url: '/path'
    dataType: 'json'
    cache: false
    success: (data)->
      items = _.map data.items, (itemJSON)->
        itemJSON.item
    })
    .fail( (jqXhr, textStatus, er)->
      if er
        Airbrake.push({
          error: er
        })
    )

The response from airbrake

airbrake_cb_0({"id":"1058143722744619642","url":"https://airbrake.io/locate/1058143722744619642"}).  

If you go to the url it says "Notice 1058143722744619642 was rejected: either error type or error message is required".

When I console.log(er) right before the Airbrake.push, the output says "Internal Server Error ." For some reason though, it says I'm not passing in an error.

The regular try/catch airbrake works. I'm just having issues with getting airbrakes to trigger in the fail section of an ajax call.

Show error title in the console?

One is to be able to view the error in web-inspector so instead of just seeing something like this:

airbrake: error #1099333485350590136 was reported: https://airbrake.io/locate/1099333485350590136

I would also like to see the error appear in the chrome / firefox console.

Project_id and project_key.. are not set on error report

Hello,

I am trying to use this script to catch javascript error on my rails application. I configured it like this :

:javascript
    window.Airbrake = [];
    window.Airbrake.try = function(fn) { try { fn() } catch(er) { window.Airbrake.push(er); } };
    %script{ "defer" => "", "src" => "https://ssljscdn.airbrake.io/airbrake-js-tracekit-sourcemap.js", "data-airbrake-project-id" => "92691", "data-airbrake-project-key" => "4a662a0c82ca9210994173a1048d7023", "data-airbrake-project-environment-name" => "production" }

Right after the tag. And when an error is catched, it send to the url :
https://api.airbrake.io/api/v3/projects/undefined/create-notice?key=undefin…2env%22%3A%7B%7D%2C%22params%22%3A%7B%7D%2C%22session%22%3A%7B%7D%7D%5D%7D

As you can see, the project_id is not find. It's due to this part of code :

function JsonpReporter(project_id, project_key, environment_name, processor_name, custom_context_data, custom_environment_data, custom_session_data, custom_params_data) {
  this.report = function(error_data) {
    var output_data = ReportBuilder.build(environment_name, processor_name, custom_context_data, custom_environment_data, custom_session_data, custom_params_data, error_data),
        document    = global.document,
        head        = document.getElementsByTagName("head")[0],
        script_tag  = document.createElement("script"),
        body        = JSON.stringify(output_data),
        cb_name     = "airbrake_cb_" + cb_count,
        prefix      = "https://api.airbrake.io", 
        url         = prefix + "/api/v3/projects/" + project_id + "/create-notice?key=" + project_key + "&callback=" + cb_name + "&body=" + encodeURIComponent(body);


    // Attach an anonymous function to the global namespace to consume the callback.
    // This pevents syntax errors from trying to directly execute the JSON response.
    global[cb_name] = function() { delete global[cb_name]; };
    cb_count += 1;

    function removeTag() { head.removeChild(script_tag); }

    script_tag.src     = url;
    script_tag.type    = "text/javascript";
    script_tag.onload  = removeTag;
    script_tag.onerror = removeTag;

    head.appendChild(script_tag);
  };
}

When it export this function, project_id is undefined. In fact, this export is executed before this :

(function(global){module.exports = function(client) {
  var scripts = global.document.getElementsByTagName("script"),
      i = 0, len = scripts.length, script,
      project_id,
      project_key,
      project_environment_name;

  for (; i < len; i++) {
    script = scripts[i];
    project_id = script.getAttribute("data-airbrake-project-id");
    project_key = script.getAttribute("data-airbrake-project-key");
    project_environment_name = script.getAttribute("data-airbrake-project-environment-name");
    if (project_id && project_key) {
      client.setProject(project_id, project_key);
    }
    if (project_environment_name) {
      client.setEnvironmentName(project_environment_name);
    }
  }
};

So, the project_id is not defined. I used this code to understand what is happening : https://ssljscdn.airbrake.io/airbrake-js-tracekit-sourcemap.js

Getting 401 authorization errors

When I try to raise airbrakes I'm getting a 401 (unauthorized) response back. I believe it was working a week or two ago. I'm using code almost identical to here:

http://www.iainbeeston.com/airbrake-test.html

but with a different project id and key (eg. making POST requests to collect.airbrake.io with JSON data)

Update Changelog

@vmihailenco Can you give me instructions on how to update the change-log so I can share in other communications on how to use the notifier.

Source map support

This is what I see when trying to use source maps with official jQuery CDN:

XMLHttpRequest cannot load http://code.jquery.com/jquery-2.0.3.min.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. jquery-example.html:12
XMLHttpRequest cannot load http://code.jquery.com/jquery-2.0.3.min.map. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

I.e. Access-Control-Allow-Origin is not set for jQuery CDN. Google CDN demonstrates the same behaviour.

So the question is: why we bother with client-side source maps support if it does not work with CDNs?

Asynchronous library code load.

What about making library code download asynchronous? This will save some milliseconds on initial page load. This can be considered as an alternative option in addition to traditional <script src="..."></script> include.

It requires some back-end customization to handle configurable parameters in URL.

https://gist.github.com/b3a33c408c0cd4195b58

throw "foobar" is not handled properly

I expect code like this

try {
  throw "foobar";
} catch (exc) {
  Airbrake.capture(exc);
}

to report something meaningful. Currently notifier sends empty error message.

Track JQuery Errors for JQuery 1.7

What is the status of this ?

I plan to work a bit around this. What are the currently known issues ?

JS notifier, Cross origin resource sharing and https issues

I have several issues using the javascript notifier with an https website.

Firstly, it seems api.airbrake.io does not support CORS. The notifier, when creating an xmlhttprequest on a chrome or firefox browser (up-to-date version), tries to do a preflight when POSTing, and thus sends an OPTIONS query, which fails. Here is the console output:

The page at https://[snip]/ displayed insecure content from http://api.airbrake.io/notifier_api/v2/notices.
OPTIONS http://api.airbrake.io/notifier_api/v2/notices 422 (status code 422) notifier.min.js:1
XMLHttpRequest cannot load http://api.airbrake.io/notifier_api/v2/notices. Origin https://[snip] is not allowed by Access-Control-Allow-Origin.

It seems an Access-Control-Allow-Origin header is missing, along with accepting OPTIONS queries, in order to fully support javascript xmlhttprequests.

So in a second attempt, after examining the source code of the notifier, I tried to change the request method to GET by calling Airbrake.setRequestType("GET"). It is indeed a working workaround, but since the http:// protocol prefix is hardcoded, my browser is not too happy about this https/http mixing and displays warnings.

Is there an upcoming version which takes care of these issues? Did I misconfigured something?

Thank you for your answers.

PS: Here is my embedded code:

<script src='//ssljscdn.airbrake.io/notifier.min.js' type='text/javascript'></script>
<script>
  //<![CDATA[
    window.Airbrake = (typeof(Airbrake) == 'undefined' && typeof(Hoptoad) != 'undefined') ? Hoptoad : Airbrake
    // Airbrake.setRequestType("GET");
    Airbrake.setKey("[snip]");
    Airbrake.setHost("api.airbrake.io");
    Airbrake.setEnvironment("development");
    Airbrake.setErrorDefaults({
        url: location.toString(),
        component: "main",
        action: "index"
    });
    Airbrake.setGuessFunctionName(true);
    Airbrake.trackJQ(true);
  //]]>
</script>

Dosen't send as HTTPS

We currently don't support posting as HTTPS, since line 728 hard codes the XML point to be http://

https://github.com/airbrake/airbrake-js/blob/master/dist/notifier.js#L728

Chrome crashes trying to serialize file inputs

Notification serialization crashes when a file input field is involved.

This is the faulty line:
https://github.com/airbrake/airbrake-js/blob/master/src/util/jsonify_notice.coffee#L22

And the error is: Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('file') does not support selection. airbrake.js:442

Chrome 34.0

Track cookies

Request type option is ignored

There is a requestType option, but the code ignores it: XML is always send with GET while JSON is always send with POST.

Gracefully fail if there is a network issue.

As per on support

The javascript tracker is not available, the host does not resolve.

This causes the browser to stall and show it as indefinitely loading. This affects all the traffic to my site.

https://ssljscdn.airbrake.io/0.3/airbrake.min.js

What can I do to prevent this in case this happens again?

Caller can pass in an object of custom data in lieu of the handler

In your example code that reports exceptions thrown in jQuery event handlers. I'm getting errors because some triggered events receive objects instead of functions.

If you look at jQuery.event.add you will see code there is reference to this.

Look for a comment that says near the beginning on the function that says: Caller can pass in an object of custom data in lieu of the handler.

Issue with notifier onload

I want to setup a filter when Airbrake loads. I have the following setup:

<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script data-airbrake-environment-name="production" data-airbrake-project-id="xxx" data-airbrake-project-key="xxx" src="/assets/airbrake-shim.js" type="text/javascript"></script>
<script data-airbrake-onload="initAirbrake">
function initAirbrake() {
  Airbrake.addFilter(function (notice) {
    // filter code
  });
}
</script>

This results in:

Uncaught TypeError: Object [object Array] has no method 'addFilter' 

Is there something in this setup I am doing wrong here? I have a workaround but it's far from ideal compared to the above (if it worked):

var interval = 100;
    window.setTimeout(function () {
        if(Airbrake['addFilter']) {
            Airbrake.addFilter(function (notice) {
                // filter code
            });
        } else {
            window.setTimeout(arguments.callee, interval);
        }
    }, interval);

Load Airbrake JS async

Customer feedback - I would try something like what GA does, have an onerror that simply tacks stuff in a queue and then the AB codes empties the error queue the whole time. That means we can have the onerror handler directly in the , and only load the AB JS later. For 1st world internet users this might not make sense, but down here in Africa we often spend time waiting on 'api.airbrake.io', and it would just be worse over mobile networks.

Custom parameters?

Hi,

I've been struggling to find information about how so send custom data to Airbrake. I've read when exposing current_user, it should be picked up as part of the report. But I've not seen examples of how to send arbitrary data and whether this would be presented in the error report.

Looking at this JSON https://gist.github.com/6957bb7858ddd8b00f4b would adding data to context, session or params be visible in the report? If so, adding a method to populate these from the JS-lib should be trivial but I've yet to be able to test the new JSON api successfully as none of the errors I trigger show up in my test project.

Fix phantomjs

airbrake: can't parse at https://0c3a4f0729c3657eb7d0-3b2a5d5ec9f9596e7f0941c13180a7d6.ssl.cf2.rackcdn.com/assets/application-3df16d85595d7a709732a4001576a644.js:4
airbrake: can't parse at https://0c3a4f0729c3657eb7d0-3b2a5d5ec9f9596e7f0941c13180a7d6.ssl.cf2.rackcdn.com/assets/application-3df16d85595d7a709732a4001576a644.js:1
airbrake: can't parse at https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:4
airbrake: can't parse at https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:4
airbrake: can't parse at k (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:6)
airbrake: can't parse at https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:6
SyntaxError: Unable to parse JSON string
in at https://0c3a4f0729c3657eb7d0-3b2a5d5ec9f9596e7f0941c13180a7d6.ssl.cf2.rackcdn.com/assets/application-3df16d85595d7a709732a4001576a644.js:4:0
in at https://0c3a4f0729c3657eb7d0-3b2a5d5ec9f9596e7f0941c13180a7d6.ssl.cf2.rackcdn.com/assets/application-3df16d85595d7a709732a4001576a644.js:1:0
in at https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:4:0
in at https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:4:0
in at k (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:6):0
in at https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js:6:0

airbrake: error #%s was reported: %s 1136311773440920867 https://airbrake.io/locate/1136311773440920867

Please add a LICENSE

Is this code MIT licensed, or will it use a similar license to the airbrake gem? (See: https://github.com/airbrake/airbrake/blob/master/LICENSE)

I'm asking because I need to slightly modify the onerror handler to ignore errors that don't come from within our scripts. (If the file doesn't include /assets). Do I have permission to use a modified version of notifier.js?

cdn for airbrake notifier js

Hi,
We are a JS app and we have decided to use the airbrake-js for our error notifications. I was following the docs and it seems like the cdn source location for notifier.js [<script defer src="https://ssljscdn.airbrake.io/notifier-v0.2.js" ] is incorrect.

<script>
  window.Airbrake = [];
  window.Airbrake.try = function(fn) { try { fn() } catch(er) { window.Airbrake.push(er); } };
</script>
<script defer src="https://ssljscdn.airbrake.io/notifier-v0.2.js"  
        data-airbrake-project-id="1234"
        data-airbrake-project-key="abcd"
        data-airbrake-project-environment-name="production"></script>

Can you let us know what the right cdn is ? Thanks

Dependencies

After carefully reviewing the docs, it looks like there are no dependencies for the airbrake shim. However, one could easily assume there is a jquery dependency based on the example code shown. Maybe update the docs to reflect that there are no dependencies?

Ignore list

The filtering your Rails client provides is pretty handy, it would be nice to have here also for all those pesky "Script error."s and such.

Notified of JS Error caused by user using bookmarklet script

Asked to post this here by the support team.

---

One of our users appears to be using a website's js bookmark widget to share content from our site (a good thing). However, the airbrake js error tracking gets triggered every time.

The bookmarklet seems to work despite this error, but I didn't dig in enough to determine if this is potentially a false positive.

Wether or not this is a "real" JS error, the bookmarklet is outside of our control, and we'd like the ability to filter these out of our notifications if possible.

A typical error looks like this (and seems to be caused by: http://tapiture.com/partners/install-button):

An error has just occurred. View full details at:
https://SUBDOMAIN.airbrake.io/groups/ID_NUMBER
Error Message:
Script error.

Where:
shop#index
http, line 0

URL:
https://www.example.com/
Backtrace:
http://static.tapcdn.com/mosaic/tap_browser.js?ver=0.11640645691864837:0:in `{anonymous}()'

Annotating Errors not working

Hi i am using this snipped to log an error:

Airbrake.push({
      error: exception,
      context: { backbone_controller: 'style' },
      env:     { navigator_vendor: window.navigator.vendor },
      params:  { search: "foo" },
      session: { username: "john" }
    });

but context, env, params and session do not appear in the airbrake userinterface. am i missing something?

Ability to initialise using Javascript?

Hi, we're writing a website plugin and wondering if it's possible (or sensible) to track our own client-side errors on the clients' website through Airbrake.
Our plugin initialises at the head of the page, assesses the page, and adds event listeners to the window on DOMContentLoaded (so we'd need it to be available before load if possible).
Is it just a case of synchronously AJAXing the script portions in before we do any real work and making them execute?

/s/javascripit/javascript

Hello,

Just wanted to let you know that the project's description and README mispell Javascript a few times.

Thanks!

Add support for segment.io

To make this easier to install for some users we can leverage segment.io, which can install Airbrake-JS for us.

https://github.com/segmentio/analytics.js-integrations/

Option to console.log errors

In some debug cases we'd like to log errors out via console.log (when supported by the browser). If we just let the error get thrown, we would get this info in our console, with Airbrake it's currently hard to find. You could just have a property debugLogErrors which, if set to true, logs errors in this format:

Error: 'options' is undefined
Stack trace: doSomething(), page.js, line 40,
              doSomethingElse(), page.js, line 48,
              rootCauseMethod(), other.js, line 744

Error page with blank details

I use the Javascript API (https://ssljscdn.airbrake.io/0.3/airbrake.min.js).

By clicking on the link in the error email or by selecting the error from the project error list page I see no details in the main panel. This happens for most of the errors I have for my project.

Here is the piece of code I use:

Airbrake.push({
    error: { name: <string>, message: <string> },
    context: {
        logType: <string>
    },
    environment: <string>,
    params: { url: <string> },
    session: { id: <string> }
});

Use zone.js to instrument browser interaction points

@vmihailenco @dvdplm @benarent
I suggest we look into using zone.js to hook into all the browser points from whence code could be executed, automatically generating Airbrake.wrap closures around them.

Unable to build a new airbrake-js dist

Hi,
I followed the commands mentioned in doc/Developers.mdown file. I am new to using grunt and bower but I followed the instructions. It generated all these files

• airbrake-js-fallback.js (and sourcemap and min ) version
• airbrake-js-tracekit.js ( and sourcemap and vim) version.

However I was unable to generated airbrake-js version at all. I am using Mac 10.8.4 and using node version 0.10 and npm version 1.3.2. I installed grunt version 0.4.1.

I just need a copy of the latest working copy of airbrake js. Am I doing this correctly or is there an easier way to get the file ?

Uncaught ReferenceError: n is not defined

Check full details on Airbrake:
internal: :
[PROJECT_ROOT]/js-test/:74:in `{anonymous}()'

Ignore URLs and filter errors.

Utils.escape throws TypeError for non-strings

When you give some params or session in (via setErrorDefaults, for example), Utils.escape throws a TypeError: Object X has no method 'replace'.

The Airbrake script that is live at https://airbrake.io/javascripts/notifier.js does the same thing. Which is funny — am I truly the only person stumbling on this?

Use TraceKit for JS stack traces

Customer feedback - Consider using/contributing to the TraceKit project for JS stack traces. We uglify, minify, torture and god knows what else to our JS which makes normal stack traces useless. TraceKit's ability to find the column number will be a huge help in actually making the stack traces somewhat useful.

Key security vulnerability

Currently the API key is set via function call on a page: window.Airbrake.setKey('703c5fce534...');
The issue is: the key is publicly available and can be used for evil >:-E by any page visitor.

Is this something that should be regarded as critical?

Which plan is needed

Hey, I'm trying to use this module but getting Authorized with the pre-flight Options call. Current plan is Small. Which plan is needed?

Uncaught ReferenceError: n is not defined

Check full details on Airbrake: https://getexceptional.airbrake.io/b/#projects/85087/groups/85087-05589e97f04b2a9f19bc3ce4c01c67d9/notices/c610abf7-1753-4713-bb84-89bc146cd502

Update JSON Formating

https://gist.github.com/a41cb38d9da805808f1d

'Airbrake' is undefined in IEs

Hi guys,

I have a rails app and had some issues with the airbrake_javascript_notifier and decided to try the asynch version. Now everything works fine in all browsers but for IEs where I get the Airbrake is undefined issue.

I also receive a warning in Chrome about insecure content (The page at about:blank displayed insecure content from http://api.airbrake.io/notifier_api/v2/notices?) . I access airbrake with SSL al the time.

Here's my code:

:javascript
  (function(callback) {
    var ab = document.createElement('script');
    ab.type = 'text/javascript'; ab.async = true;
    ab.onload = ab.onreadystatechange = callback;    
    ab.src = "https://ssljscdn.airbrake.io/notifier.min.js";
    var p = document.getElementsByTagName('script')[0];
    p.parentNode.insertBefore(ab, p);
  }(function () {
    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}",
    });
  }));

Thank you !

data-airbrake-onload not working

Hello, I tried to use this code :

<script data-airbrake-onload="initAirbrake"> function initAirbrake() { Airbrake.addSession({ split_test: 10 }); } </script>

And it never execute my function ! Does anyone already use it?

environment, params and session not sent in 0.3.4

Hi,

We are using Airbrake js from quite a good amount of time and we noticed, after March 6th that the environment, params and session objects are not included in the POST request of an Airbrake.push().

I've setup a jsfiddle that explain the problem here: http://jsfiddle.net/839pw/2/ . I've removed our project-id and key for security purposes.

When the above code is run you can see in the post request the mentioned parameters are missed.

Issue with IE

The airbrake JS client is producing errors for me in IE:

The value of the property 'removeScript' is null or undefined, not a Function object
and:

Script error.

Also when navigating to the page the IE shows script errors in the bottom toolbar.

Could you take a look at this? Thank you!

Provide client configured to use XhrReporter

... or explain how to configure notifier to use xhr reporter.