Please choose one of the following packages:
@airbrake/browser for web browsers.
@airbrake/node for Node.js.
Airbrake JavaScript Notifier
Home Page: https://airbrake.io
License: MIT License
Please choose one of the following packages:
@airbrake/browser for web browsers.
@airbrake/node for Node.js.
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.
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.
There is a requestType option, but the code ignores it: XML is always send with GET while JSON is always send with POST.
... or explain how to configure notifier to use xhr reporter.
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> }
});
Hello,
Just wanted to let you know that the project's description and README mispell Javascript a few times.
Thanks!
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?
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
Check full details on Airbrake:
internal: :
[PROJECT_ROOT]/js-test/:74:in `{anonymous}()'
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?
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 !
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>
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!
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
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 ?
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}()'
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
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
@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.
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?
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?
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.
@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.
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.
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?
What is the status of this ?
I plan to work a bit around this. What are the currently known issues ?
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
?
To make this easier to install for some users we can leverage segment.io, which can install Airbrake-JS for us.
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
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
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.
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.
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.
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.
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.
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);
I expect code like this
try {
throw "foobar";
} catch (exc) {
Airbrake.capture(exc);
}
to report something meaningful. Currently notifier sends empty error message.
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?
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?
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!
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.
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?
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?
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?
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
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)
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.