Security News
Input Validation Vulnerabilities Dominate MITRE's 2024 CWE Top 25 List
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
@airbrake/browser
Advanced tools
The official Airbrake notifier for capturing JavaScript errors in web browsers and reporting them to Airbrake. If you're looking for Node.js support, there is a separate package.
Using yarn:
yarn add @airbrake/browser
Using npm:
npm install @airbrake/browser
Using a <script>
tag via jsdelivr:
<script src="https://cdn.jsdelivr.net/npm/@airbrake/browser"></script>
Using a <script>
tag via unpkg:
<script src="https://unpkg.com/@airbrake/browser"></script>
First, initialize the notifier with the project ID and project key taken from
Airbrake. To find your project_id
and project_key
navigate to your project's Settings and copy the values from the right
sidebar:
import { Notifier } from '@airbrake/browser';
const airbrake = new Notifier({
projectId: 1,
projectKey: 'REPLACE_ME',
environment: 'production',
});
Then, you can send a textual message to Airbrake:
let promise = airbrake.notify(`user id=${user_id} not found`);
promise.then((notice) => {
if (notice.id) {
console.log('notice id', notice.id);
} else {
console.log('notify failed', notice.error);
}
});
or report errors directly:
try {
throw new Error('Hello from Airbrake!');
} catch (err) {
airbrake.notify(err);
}
Alternatively, you can wrap any code which may throw errors using the wrap
method:
let startApp = () => {
throw new Error('Hello from Airbrake!');
};
startApp = airbrake.wrap(startApp);
// Any exceptions thrown in startApp will be reported to Airbrake.
startApp();
or use the call
shortcut:
let startApp = () => {
throw new Error('Hello from Airbrake!');
};
airbrake.call(startApp);
It's possible to annotate error notices with all sorts of useful information at the time they're captured by supplying it in the object being reported.
try {
startApp();
} catch (err) {
airbrake.notify({
error: err,
context: { component: 'bootstrap' },
environment: { env1: 'value' },
params: { param1: 'value' },
session: { session1: 'value' },
});
}
Severity allows
categorizing how severe an error is. By default, it's set to error
. To
redefine severity, simply overwrite context/severity
of a notice object:
airbrake.notify({
error: err,
context: { severity: 'warning' },
});
There may be some errors thrown in your application that you're not interested in sending to Airbrake, such as errors thrown by 3rd-party libraries, or by browser extensions run by your users.
The Airbrake notifier makes it simple to ignore this chaff while still
processing legitimate errors. Add filters to the notifier by providing filter
functions to addFilter
.
addFilter
accepts the entire
error notice to be sent to
Airbrake and provides access to the context
, environment
, params
,
and session
properties. It also includes the single-element errors
array
with its backtrace
property and associated backtrace lines.
The return value of the filter function determines whether or not the error notice will be submitted.
null
is returned, the notice is ignored.An error notice must pass all provided filters to be submitted.
In the following example all errors triggered by admins will be ignored:
airbrake.addFilter((notice) => {
if (notice.params.admin) {
// Ignore errors from admin sessions.
return null;
}
return notice;
});
Filters can be also used to modify notice payload, e.g. to set the environment and application version:
airbrake.addFilter((notice) => {
notice.context.environment = 'production';
notice.context.version = '1.2.3';
return notice;
});
With the keysBlocklist
option, you can specify a list of keys containing
sensitive information that must be filtered out:
const airbrake = new Notifier({
// ...
keysBlocklist: [
'password', // exact match
/secret/, // regexp match
],
});
Airbrake supports using private and public source maps. Check out our docs for more info:
@airbrake/browser
automatically instruments console.log
function calls in
order to collect logs and send them with the first error. You can disable that
behavior using the instrumentation
option:
const airbrake = new Notifier({
// ...
instrumentation: {
console: false,
},
});
import { Notifier } from '@airbrake/browser';
const airbrake = new Notifier({
projectId: 1,
projectKey: 'REPLACE_ME',
environment: 'production',
});
const routeMetric = this.airbrake.routes.start(
'GET', // HTTP method name
'/abc', // Route name
200, // Status code
'application/json' // Content-Type header
);
this.airbrake.routes.notify(routeMetric);
import { Notifier } from '@airbrake/browser';
const airbrake = new Notifier({
projectId: 1,
projectKey: 'REPLACE_ME',
environment: 'production',
});
const queryInfo = this.airbrake.queries.start('SELECT * FROM things;');
queryInfo.file = 'file.js';
queryInfo.func = 'callerFunc';
queryInfo.line = 21;
queryInfo.method = 'GET';
queryInfo.route = '/abc';
this.airbrake.queries.notify(queryInfo);
import { Notifier } from '@airbrake/browser';
const airbrake = new Notifier({
projectId: 1,
projectKey: 'REPLACE_ME',
environment: 'production',
});
const queueInfo = this.airbrake.queues.start('FooWorker');
this.airbrake.queues.notify(queueInfo);
[2.1.8] (December 6, 2022)
FAQs
Official Airbrake notifier for browsers
The npm package @airbrake/browser receives a total of 31,640 weekly downloads. As such, @airbrake/browser popularity was classified as popular.
We found that @airbrake/browser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.