Rollbar.js 入门指南一文搞懂 JavaScript 错误监控全貌浏览器Node 全覆盖【免费下载链接】rollbar.jsError tracking and logging from Javascript to Rollbar项目地址: https://gitcode.com/gh_mirrors/ro/rollbar.jsRollbar.js 是一款跨平台的 JavaScript 错误监控 SDK它同时覆盖浏览器前端与 Node.js 后端环境帮助开发者自动捕获、分组并实时分析应用中的错误。无论你是前端新手还是全栈开发者读完本文就能快速上手把线上错误从用户投诉才知道变成秒级自动告警。Rollbar.js 是什么为什么值得用一句话概括Rollbar.js 是把你的 JavaScript 错误上报、聚合、追踪到 Rollbar 监控平台的官方 SDK。它的核心优势包括跨平台浏览器、Node.js、React Native 一个 SDK 全覆盖并支持 React、Angular、Express、Next.js 等主流框架遥测时间线Telemetry自动记录面包屑事件页面加载、用户操作、网络请求帮你还原错误发生前的完整上下文错误自动分组相同原因的错误自动聚合成同一个问题Item告别日志噪音会话回放Session ReplayBeta回放错误发生前的用户操作直观定位用户是怎么触发的可定制通知对接多种消息与事件管理工具错误实时告警项目整体结构非常清晰浏览器端运行时位于src/browser/Node 端处理逻辑位于src/server/React Native 模块在src/react-native/共享的链路追踪、遥测与工具模块则放在src/tracing/、src/telemetry.js 和src/utility/目录中公共入口统一经过 src/rollbar.js。如何快速安装 Rollbar.js三步接入第一步安装 SDK通过 npm 或 yarn 一行命令安装npm install --save rollbar # 或 yarn add rollbar第二步Node.js 端初始化const Rollbar require(rollbar); const rollbar new Rollbar({ accessToken: POST_SERVER_ITEM_ACCESS_TOKEN, // 在 Rollbar 控制台获取 captureUncaught: true, // 捕获未处理的异常 captureUnhandledRejections: true, // 捕获未处理的 Promise 拒绝 payload: { code_version: 1.0.0 }, // 附带代码版本方便定位 }); rollbar.log(Hello world!);Node 端也提供单例式初始化入口Rollbar.init()适合在应用启动时全局配置一次见 src/server/rollbar.js。第三步浏览器端接入Snippet 方式官方推荐snippet 片段方式接入在页面head中先定义_rollbarConfig配置对象再引入 snippet 脚本即可自动捕获未处理错误并开启遥测全程无需手动埋点。完整示例见 examples/snippet.html配置中只需填好accessToken并设置captureUncaught: true即可。浏览器端错误监控接入后你能得到什么浏览器端客户端的核心实现在 src/browser/core.js初始化时会自动完成这几件事接管全局错误通过setupUnhandledCapture()监听window.onerror与unhandledrejection事件未捕获异常自动上报自动插桩Auto-instrument监控网络请求、DOM 事件、页面加载等形成遥测时间线敏感数据脱敏上报前自动打码密码、Token 等字段下一节细讲会话回放进阶玩法如果开启了 Replay 配置浏览器端会在初始化时自动启动录屏组件把错误前的用户操作录制下来见 src/browser/core.js。注意 Replay 功能使用独立的更大体积包需从rollbar/replay导入不需要回放功能就用标准包即可。Node.js 后端错误追踪关键配置清单Node 端客户端实现在 src/server/rollbar.js几个新手最常问的点配置项作用建议accessToken服务端上报令牌POST Server Item Token必填且务必保密captureUncaught捕获uncaughtException开启captureUnhandledRejections捕获未处理的 Promise 拒绝开启environment环境标识如 production按部署环境区分locals捕获出错时的函数局部变量Node 10 支持如果你在用 Express官方还内置了中间件 src/server/middleware/rollbarExpressMiddleware.js挂到路由上即可自动捕获请求级错误后端报错行号对不上源码项目同样内置了 Source Map 解析支持位于src/server/sourceMap/目录。隐私保护与限流生产环境必配线上上报最容易踩的坑是把用户敏感信息传上去。Rollbar.js 内置了默认脱敏字段清单包括password、token、credit card number、cookie等定义在 src/defaults.js脱敏逻辑由 src/scrub.js 执行。你只需要在配置里补充自己业务的敏感字段名即可。另外两个实用配置默认值见 src/defaults.jsitemsPerMinute默认每分钟最多上报 60 条防止错误风暴打爆配额限流器实现见 src/rateLimiter.jsreportLevel控制哪些级别以上的日志才会真正上报框架集成React、Angular、Vue、Next.js 都有示例不用从零摸索examples/目录提供了覆盖主流框架与构建工具的完整示例⚛️React错误边界集成见 examples/react-19-ts-components/️AngularTypeScript 全局错误处理器见 examples/angular/Vue 3Vite 工程化接入见 examples/vuejs3/▲Next.jsSSR 客户端双端上报见 examples/next-typescript/构建工具examples/webpack/、examples/browserify/、examples/requirejs/浏览器扩展Manifest V2 / V3 双版本示例见 examples/browser_extension_v3/完整的环境 × 集成方式兼容矩阵Script 标签 / CommonJS / ESM / TypeScript / AMD收录在 examples/README.md照着表格选路径就行。常用 API 速查表核心日志方法定义在 src/rollbar.js上手阶段记住这几个就够用方法用途rollbar.debug / info / warn / error / critical按级别记录日志error级别对应出错场景rollbar.configure(options)运行时动态修改配置如切换code_versionrollbar.captureEvent(type, metadata)手动打一条遥测面包屑丰富时间线rollbar.wrap(fn)包装函数捕获其中的异步错误rollbar.wait(callback)等待上报队列清空后再执行回调写在最后Rollbar.js 的价值在于零侵入浏览器端一段 snippet、Node 端几行初始化代码就能获得未捕获错误监控 遥测时间线 错误自动分组 会话回放的完整能力。建议新手按本文三步接入走通最小流程再根据部署环境补充脱敏字段与限流配置。更多进阶用法React 错误边界、Lambda 场景、OpenTracing 集成等可以继续翻阅src/下的对应模块源码与examples/目录里的示例工程动手跑一遍是最快的学习方式。【免费下载链接】rollbar.jsError tracking and logging from Javascript to Rollbar项目地址: https://gitcode.com/gh_mirrors/ro/rollbar.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Rollbar.js 入门指南：一文搞懂 JavaScript 错误监控全貌（浏览器+Node 全覆盖）
Rollbar.js 入门指南一文搞懂 JavaScript 错误监控全貌浏览器Node 全覆盖【免费下载链接】rollbar.jsError tracking and logging from Javascript to Rollbar项目地址: https://gitcode.com/gh_mirrors/ro/rollbar.jsRollbar.js 是一款跨平台的 JavaScript 错误监控 SDK它同时覆盖浏览器前端与 Node.js 后端环境帮助开发者自动捕获、分组并实时分析应用中的错误。无论你是前端新手还是全栈开发者读完本文就能快速上手把线上错误从用户投诉才知道变成秒级自动告警。Rollbar.js 是什么为什么值得用一句话概括Rollbar.js 是把你的 JavaScript 错误上报、聚合、追踪到 Rollbar 监控平台的官方 SDK。它的核心优势包括跨平台浏览器、Node.js、React Native 一个 SDK 全覆盖并支持 React、Angular、Express、Next.js 等主流框架遥测时间线Telemetry自动记录面包屑事件页面加载、用户操作、网络请求帮你还原错误发生前的完整上下文错误自动分组相同原因的错误自动聚合成同一个问题Item告别日志噪音会话回放Session ReplayBeta回放错误发生前的用户操作直观定位用户是怎么触发的可定制通知对接多种消息与事件管理工具错误实时告警项目整体结构非常清晰浏览器端运行时位于src/browser/Node 端处理逻辑位于src/server/React Native 模块在src/react-native/共享的链路追踪、遥测与工具模块则放在src/tracing/、src/telemetry.js 和src/utility/目录中公共入口统一经过 src/rollbar.js。如何快速安装 Rollbar.js三步接入第一步安装 SDK通过 npm 或 yarn 一行命令安装npm install --save rollbar # 或 yarn add rollbar第二步Node.js 端初始化const Rollbar require(rollbar); const rollbar new Rollbar({ accessToken: POST_SERVER_ITEM_ACCESS_TOKEN, // 在 Rollbar 控制台获取 captureUncaught: true, // 捕获未处理的异常 captureUnhandledRejections: true, // 捕获未处理的 Promise 拒绝 payload: { code_version: 1.0.0 }, // 附带代码版本方便定位 }); rollbar.log(Hello world!);Node 端也提供单例式初始化入口Rollbar.init()适合在应用启动时全局配置一次见 src/server/rollbar.js。第三步浏览器端接入Snippet 方式官方推荐snippet 片段方式接入在页面head中先定义_rollbarConfig配置对象再引入 snippet 脚本即可自动捕获未处理错误并开启遥测全程无需手动埋点。完整示例见 examples/snippet.html配置中只需填好accessToken并设置captureUncaught: true即可。浏览器端错误监控接入后你能得到什么浏览器端客户端的核心实现在 src/browser/core.js初始化时会自动完成这几件事接管全局错误通过setupUnhandledCapture()监听window.onerror与unhandledrejection事件未捕获异常自动上报自动插桩Auto-instrument监控网络请求、DOM 事件、页面加载等形成遥测时间线敏感数据脱敏上报前自动打码密码、Token 等字段下一节细讲会话回放进阶玩法如果开启了 Replay 配置浏览器端会在初始化时自动启动录屏组件把错误前的用户操作录制下来见 src/browser/core.js。注意 Replay 功能使用独立的更大体积包需从rollbar/replay导入不需要回放功能就用标准包即可。Node.js 后端错误追踪关键配置清单Node 端客户端实现在 src/server/rollbar.js几个新手最常问的点配置项作用建议accessToken服务端上报令牌POST Server Item Token必填且务必保密captureUncaught捕获uncaughtException开启captureUnhandledRejections捕获未处理的 Promise 拒绝开启environment环境标识如 production按部署环境区分locals捕获出错时的函数局部变量Node 10 支持如果你在用 Express官方还内置了中间件 src/server/middleware/rollbarExpressMiddleware.js挂到路由上即可自动捕获请求级错误后端报错行号对不上源码项目同样内置了 Source Map 解析支持位于src/server/sourceMap/目录。隐私保护与限流生产环境必配线上上报最容易踩的坑是把用户敏感信息传上去。Rollbar.js 内置了默认脱敏字段清单包括password、token、credit card number、cookie等定义在 src/defaults.js脱敏逻辑由 src/scrub.js 执行。你只需要在配置里补充自己业务的敏感字段名即可。另外两个实用配置默认值见 src/defaults.jsitemsPerMinute默认每分钟最多上报 60 条防止错误风暴打爆配额限流器实现见 src/rateLimiter.jsreportLevel控制哪些级别以上的日志才会真正上报框架集成React、Angular、Vue、Next.js 都有示例不用从零摸索examples/目录提供了覆盖主流框架与构建工具的完整示例⚛️React错误边界集成见 examples/react-19-ts-components/️AngularTypeScript 全局错误处理器见 examples/angular/Vue 3Vite 工程化接入见 examples/vuejs3/▲Next.jsSSR 客户端双端上报见 examples/next-typescript/构建工具examples/webpack/、examples/browserify/、examples/requirejs/浏览器扩展Manifest V2 / V3 双版本示例见 examples/browser_extension_v3/完整的环境 × 集成方式兼容矩阵Script 标签 / CommonJS / ESM / TypeScript / AMD收录在 examples/README.md照着表格选路径就行。常用 API 速查表核心日志方法定义在 src/rollbar.js上手阶段记住这几个就够用方法用途rollbar.debug / info / warn / error / critical按级别记录日志error级别对应出错场景rollbar.configure(options)运行时动态修改配置如切换code_versionrollbar.captureEvent(type, metadata)手动打一条遥测面包屑丰富时间线rollbar.wrap(fn)包装函数捕获其中的异步错误rollbar.wait(callback)等待上报队列清空后再执行回调写在最后Rollbar.js 的价值在于零侵入浏览器端一段 snippet、Node 端几行初始化代码就能获得未捕获错误监控 遥测时间线 错误自动分组 会话回放的完整能力。建议新手按本文三步接入走通最小流程再根据部署环境补充脱敏字段与限流配置。更多进阶用法React 错误边界、Lambda 场景、OpenTracing 集成等可以继续翻阅src/下的对应模块源码与examples/目录里的示例工程动手跑一遍是最快的学习方式。【免费下载链接】rollbar.jsError tracking and logging from Javascript to Rollbar项目地址: https://gitcode.com/gh_mirrors/ro/rollbar.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考