# @airbrake/browser 中文文档 规范地址：https://npmcn.com/package/%40airbrake/browser/ 版本：2\.1\.9 npm 元数据更新时间：2025-03-13T00:00:40.842Z 中文译文更新时间：2026-11-05T17:35:00.782Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40airbrake/browser 原文对照：https://npmcn.com/package/%40airbrake/browser/?lang=original 项目主页：https://github.com/airbrake/airbrake-js/tree/master/packages/browser 源码仓库：https://github.com/airbrake/airbrake-js ## 关键信息（来自 npm 元数据） - 包体积（解压后）：799 kB，279 个文件 - 模块格式：ESM + CJS - TypeScript 类型：未声明 - 运行依赖：6 个 - 首次发布：2019-08-20T12:16:39.181Z - 最新版本发布：2025-03-13T00:00:40.661Z - 近 30 天下载量：239218（2026-10-05 至 2026-11-03，npm 官方下载统计） - 已发布版本数：42（近 12 个月 0 个） ## 中文简介 浏览器的官方空气刹通知器 ## 安装 ```sh npm install @airbrake/browser ``` 也可以使用：`pnpm add @airbrake/browser`、`yarn add @airbrake/browser`、`bun add @airbrake/browser` ## README ![](https://airbrake-github-assets.s3.amazonaws.com/brand/airbrake-full-logo.png) # 浏览器的官方空气刹通知器 [![Build Status](https://github.com/airbrake/airbrake-js/workflows/CI/badge.svg?branch=master)](https://github.com/airbrake/airbrake-js/actions?query=branch%3Amaster) [![npm version](https://img.shields.io/npm/v/@airbrake/browser.svg)](https://www.npmjs.com/package/@airbrake/browser) [![npm dm](https://img.shields.io/npm/dm/@airbrake/browser.svg)](https://www.npmjs.com/package/@airbrake/browser) [![npm dt](https://img.shields.io/npm/dt/@airbrake/browser.svg)](https://www.npmjs.com/package/@airbrake/browser) 在网页浏览器中捕获 JavaScript 错误的官方 Airbrake 通知器 并报告给 [空中刹车](http://airbrake.io/)如果你要找的话 节点.js支持,有一个 [单独的软件包](https://github.com/airbrake/airbrake-js/tree/master/packages/node)。 。 。 . ## 安装 使用线条 : ```sh yarn add @airbrake/browser ``` 使用 npm : ```sh npm install @airbrake/browser ``` 使用a ` ``` 使用a ` ``` ## 基本用途 首先,以项目标识和项目密钥初始化通知符 [空中刹车](https://airbrake.io/)寻找你的 `project_id` 财务报告和审定财务报表 `project_key` 导航您的项目 _设置_ 从右侧复制值 侧边栏 : ![](https://s3.amazonaws.com/airbrake-github-assets/airbrake-js/project-id-key.png) ```js import { Notifier } from '@airbrake/browser'; const airbrake = new Notifier({ projectId: 1, projectKey: 'REPLACE_ME', environment: 'production', }); ``` 然后,你可以发送一条短信给空气刹: ```js 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); } }); ``` 或直接报告错误 : ```js try { throw new Error('Hello from Airbrake!'); } catch (err) { airbrake.notify(err); } ``` 或者,您可以将任何可能使用 `wrap` 方法 : ```js let startApp = () => { throw new Error('Hello from Airbrake!'); }; startApp = airbrake.wrap(startApp); // Any exceptions thrown in startApp will be reported to Airbrake. startApp(); ``` 或使用 `call` 快捷键 : ```js let startApp = () => { throw new Error('Hello from Airbrake!'); }; airbrake.call(startApp); ``` ## 示例配置 - [角 JS 语言](https://npmcn.com/package/%40airbrake/browser/examples/angularjs) - [角质](https://npmcn.com/package/%40airbrake/browser/examples/angular) - [遗产](https://npmcn.com/package/%40airbrake/browser/examples/legacy) - [铁路](https://npmcn.com/package/%40airbrake/browser/examples/rails) - [反应](https://npmcn.com/package/%40airbrake/browser/examples/react) - [复数](https://npmcn.com/package/%40airbrake/browser/examples/redux) - [Vue.js (英语)](https://npmcn.com/package/%40airbrake/browser/examples/vuejs) ## 高级使用 ### 说明 可以用各种有用的信息对错误通知进行注释 在报告的对象中提供它们的时间. ```js try { startApp(); } catch (err) { airbrake.notify({ error: err, context: { component: 'bootstrap' }, environment: { env1: 'value' }, params: { param1: 'value' }, session: { session1: 'value' }, }); } ``` ### 严重性 [严重性](https://airbrake.io/docs/airbrake-faq/what-is-severity/) 允许 分类错误有多严重。 默认,它设定为 `error`改为: 重新定义严重性, 简单覆盖 `context/severity` 通知对象: ```js airbrake.notify({ error: err, context: { severity: 'warning' }, }); ``` ### 过滤出错 申请中可能有些错误 你对这个不感兴趣 发送到 Airbrake 中,例如 由 3- party 库抛出错误,或 由 由您的用户运行的浏览器扩展 . 空气刹车通知器 很容易忽略这个沙发 处理合法错误。 通过提供过滤器向通知者添加过滤器 函数到 `addFilter`。 。 。 . `addFilter` 接受整个 [错误通知](https://airbrake.io/docs/api/#create-notice-v3) 发送至 空中刹车和提供进入 `context`, (中文(简体) ), `environment`, (中文(简体) ), `params`, (中文(简体) ), 财务报告和审定财务报表 `session` 属性。 还包括单元素 `errors` 数组 联合国 `backtrace` 属性和相关回溯行. 过滤器函数的返回值决定错误是否 将提交通知. - 若为 `null` 返回时,通知被忽略. - 否则,将提交退回的通知. 错误通知必须通过所有要提交的过滤器. 在下面的例子中,管理员引发的所有错误将被忽略: ```js airbrake.addFilter((notice) => { if (notice.params.admin) { // Ignore errors from admin sessions. return null; } return notice; }); ``` 过滤器也可以用于修改通知有效载荷,例如用于设定环境 和应用程序版本 : ```js airbrake.addFilter((notice) => { notice.context.environment = 'production'; notice.context.version = '1.2.3'; return notice; }); ``` ### 过滤密钥 #### 密钥锁定列表 与 `keysBlocklist` 选项,您可以指定包含 必须过滤的敏感信息: ```js const airbrake = new Notifier({ // ... keysBlocklist: [ 'password', // exact match /secret/, // regexp match ], }); ``` #### 键 与 `keysAllowlist` 选项,您可以指定一个应当 _没有_ 被过滤。 所有其他密钥将被替换为 `[Filtered]` 标签. ```js const airbrake = new Notifier({ // ... keysAllowlist: [ 'email', // exact match /name/, // regexp match ], }); ``` ### 原始地图 Airbrake支持使用私有和公有源地图. 看看我们的文件 更多信息 : - [私人来源地图](https://airbrake.io/docs/features/private-sourcemaps/) - [公共来源地图](https://airbrake.io/docs/features/public-sourcemaps/) ### 仪器 #### 控制台 `@airbrake/browser` 自动工具 `console.log` 函数调用 命令以收集日志并发送第一个错误。 你可以禁用这个 使用 `instrumentation` 选项 : ```js const airbrake = new Notifier({ // ... instrumentation: { console: false, }, }); ``` #### 获取 文书 [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) 呼叫并发送性能统计给空气刹车. 您可以使用 `instrumentation` 选项 : ```js const airbrake = new Notifier({ // ... instrumentation: { fetch: false, }, }); ``` #### 错误 报告窗口中发生的错误 [错误事件](https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event)。 您可以 使用 `instrumentation` 选项 : ```js const airbrake = new Notifier({ // ... instrumentation: { onerror: false, }, }); ``` #### 历史 记录导致出错的事件史并发至Airbrake. 您可以使用 `instrumentation` 选项 : ```js const airbrake = new Notifier({ // ... instrumentation: { history: false, }, }); ``` #### 页:1 文书 [XMLHttp 请求](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) 要求和向 空中刹车. 您可以使用 `instrumentation` 选项 : ```js const airbrake = new Notifier({ // ... instrumentation: { xhr: false, }, }); ``` #### 未处理的拒绝 文书 [未处理的拒绝](https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event) 事件和发送 性能统计到空气刹车。 您可以使用 `instrumentation` 选项 : ```js const airbrake = new Notifier({ // ... instrumentation: { unhandledrejection: false, }, }); ``` ### 亚太 #### 路线 ```js 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); ``` #### 查询 ```js 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); ``` #### 队列 ```js 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); ``` ## 常见问题 ### @airbrake/browser 是什么？ 浏览器的官方空气刹通知器 ### 如何安装 @airbrake/browser？ 在项目目录运行 npm install @airbrake/browser，或使用 pnpm add / yarn add / bun add。 ### @airbrake/browser 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/airbrake\_\_browser 是否存在。 ### @airbrake/browser 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @airbrake/browser 可以商用吗？ @airbrake/browser 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @airbrake/browser 的下载量有多少？ 根据 npm 官方下载统计，@airbrake/browser 在 2026/10/05 – 2026/11/03 这 30 天内被下载 239,218 次，日均约 7,974 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @airbrake/browser 还在维护吗？ 最新版本 2\.1\.9 发布于 2025/03/13（1\.7 年前）；至今共发布 42 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/08/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。