浏览器的官方空气刹通知器
在网页浏览器中捕获 JavaScript 错误的官方 Airbrake 通知器 并报告给 空中刹车如果你要找的话 节点.js支持,有一个 单独的软件包。 。 。 .
安装
使用线条 :
yarn add @airbrake/browser
使用 npm :
npm install @airbrake/browser
使用a <script> 通过 jsdelivr 标记:
<script src="https://cdn.jsdelivr.net/npm/@airbrake/browser"></script>
使用a <script> 通过 unpkg 标记 :
<script src="https://unpkg.com/@airbrake/browser"></script>
基本用途
首先,以项目标识和项目密钥初始化通知符
空中刹车寻找你的 project_id 财务报告和审定财务报表 project_key
导航您的项目 设置 从右侧复制值
侧边栏 :
import { Notifier } from '@airbrake/browser';
const airbrake = new Notifier({
projectId: 1,
projectKey: 'REPLACE_ME',
environment: 'production',
});
然后,你可以发送一条短信给空气刹:
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);
}
});
或直接报告错误 :
try {
throw new Error('Hello from Airbrake!');
} catch (err) {
airbrake.notify(err);
}
或者,您可以将任何可能使用 wrap
方法 :
let startApp = () => {
throw new Error('Hello from Airbrake!');
};
startApp = airbrake.wrap(startApp);
// Any exceptions thrown in startApp will be reported to Airbrake.
startApp();
或使用 call 快捷键 :
let startApp = () => {
throw new Error('Hello from Airbrake!');
};
airbrake.call(startApp);
示例配置
高级使用
说明
可以用各种有用的信息对错误通知进行注释 在报告的对象中提供它们的时间.
try {
startApp();
} catch (err) {
airbrake.notify({
error: err,
context: { component: 'bootstrap' },
environment: { env1: 'value' },
params: { param1: 'value' },
session: { session1: 'value' },
});
}
严重性
严重性 允许
分类错误有多严重。 默认,它设定为 error改为:
重新定义严重性, 简单覆盖 context/severity 通知对象:
airbrake.notify({
error: err,
context: { severity: 'warning' },
});
过滤出错
申请中可能有些错误 你对这个不感兴趣 发送到 Airbrake 中,例如 由 3- party 库抛出错误,或 由 由您的用户运行的浏览器扩展 .
空气刹车通知器 很容易忽略这个沙发
处理合法错误。 通过提供过滤器向通知者添加过滤器
函数到 addFilter。 。 。 .
addFilter 接受整个
错误通知 发送至
空中刹车和提供进入 context, (中文(简体) ), environment, (中文(简体) ), params, (中文(简体) ),
财务报告和审定财务报表 session 属性。 还包括单元素 errors 数组
联合国 backtrace 属性和相关回溯行.
过滤器函数的返回值决定错误是否 将提交通知.
- 若为
null返回时,通知被忽略. - 否则,将提交退回的通知.
错误通知必须通过所有要提交的过滤器.
在下面的例子中,管理员引发的所有错误将被忽略:
airbrake.addFilter((notice) => {
if (notice.params.admin) {
// Ignore errors from admin sessions.
return null;
}
return notice;
});
过滤器也可以用于修改通知有效载荷,例如用于设定环境 和应用程序版本 :
airbrake.addFilter((notice) => {
notice.context.environment = 'production';
notice.context.version = '1.2.3';
return notice;
});
过滤密钥
密钥锁定列表
与 keysBlocklist 选项,您可以指定包含
必须过滤的敏感信息:
const airbrake = new Notifier({
// ...
keysBlocklist: [
'password', // exact match
/secret/, // regexp match
],
});
键
与 keysAllowlist 选项,您可以指定一个应当
没有 被过滤。 所有其他密钥将被替换为 [Filtered]
标签.
const airbrake = new Notifier({
// ...
keysAllowlist: [
'email', // exact match
/name/, // regexp match
],
});
原始地图
Airbrake支持使用私有和公有源地图. 看看我们的文件 更多信息 :
仪器
控制台
@airbrake/browser 自动工具 console.log 函数调用
命令以收集日志并发送第一个错误。 你可以禁用这个
使用 instrumentation 选项 :
const airbrake = new Notifier({
// ...
instrumentation: {
console: false,
},
});
获取
文书 fetch 呼叫并发送性能统计给空气刹车.
您可以使用 instrumentation 选项 :
const airbrake = new Notifier({
// ...
instrumentation: {
fetch: false,
},
});
错误
报告窗口中发生的错误 错误事件。 您可以
使用 instrumentation 选项 :
const airbrake = new Notifier({
// ...
instrumentation: {
onerror: false,
},
});
历史
记录导致出错的事件史并发至Airbrake.
您可以使用 instrumentation 选项 :
const airbrake = new Notifier({
// ...
instrumentation: {
history: false,
},
});
页:1
文书 XMLHttp 请求 要求和向
空中刹车. 您可以使用 instrumentation 选项 :
const airbrake = new Notifier({
// ...
instrumentation: {
xhr: false,
},
});
未处理的拒绝
文书 未处理的拒绝 事件和发送
性能统计到空气刹车。 您可以使用
instrumentation 选项 :
const airbrake = new Notifier({
// ...
instrumentation: {
unhandledrejection: 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);