New Relic Browser logo

New Relic Browser

New Relic 浏览器监控代理，采集前端页面性能、Ajax、JavaScript 错误，并与 New Relic APM 全栈关联。

错误监控RUM性能监控企业级

New Relic Browser 通过在页面注入轻量 JavaScript 代理，采集页面性能、Core Web Vitals、SPA 路由、Ajax 请求与 JS 错误，与 New Relic APM 分布式追踪串联，适合存量 NR 企业客户扩展前端可观测。

访问官网

New Relic Browser

New Relic 浏览器监控代理，采集前端页面性能、Ajax、JavaScript 错误，并与 New Relic APM 全栈关联。

技术简介说明

New Relic Browser 是 New Relic 可观测平台中的浏览器端监控组件（Browser Monitoring），通过在页面注入轻量 JavaScript 代理，采集页面加载时间、Core Web Vitals、SPA 路由变化、Ajax/fetch 请求、JavaScript 错误与自定义 PageAction 事件，并将数据与 New Relic 的 APM、Infrastructure、Logs 关联。

对于已使用 New Relic 监控 Java、.NET、Node 等后端的企业，Browser 代理可将前端慢页面与后端慢事务在同一平台串联，适合传统企业与金融、电信等行业存量 New Relic 客户扩展前端可观测能力。

基本信息

快速上手

方式一：UI 生成脚本（最常见）

  1. New Relic One → Browser → Add data
  2. 选择 Copy/Paste JavaScript 方式
  3. 将生成的 <script> 放入 HTML <head> 靠前位置

方式二：NPM（现代 SPA）

npm install @newrelic/browser-agent
import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
 
const options = {
  init: {
    distributed_tracing: { enabled: true },
    privacy: { cookies_enabled: true },
    ajax: { deny_list: ['bam.nr-data.net'] },
  },
  info: {
    beacon: 'bam.nr-data.net',
    errorBeacon: 'bam.nr-data.net',
    licenseKey: 'YOUR_BROWSER_LICENSE_KEY',
    applicationID: 'YOUR_APP_ID',
    sa: 1,
  },
  loader_config: {
    accountID: 'YOUR_ACCOUNT_ID',
    trustKey: 'YOUR_TRUST_KEY',
    agentID: 'YOUR_AGENT_ID',
  },
}
 
new BrowserAgent(options)

自定义 Page Action

window.newrelic.addPageAction('checkoutComplete', {
  orderId: 'ORD-123',
  value: 99.9,
})

与 APM 关联（分布式追踪）

在 Browser 应用设置中启用 Distributed tracing，并确保后端 APM agent 支持 trace 上下文传递，即可在 Browser 会话中查看对应后端事务。

核心特性

  • 页面加载性能：TTFB、DOM、Window Load 等阶段耗时。
  • Core Web Vitals：LCP、INP、CLS 监控与告警。
  • SPA 支持：自动检测路由变化（History API）。
  • Ajax / fetch 监控：XHR 耗时、状态码、跨域配置。
  • JavaScript 错误：window.onerror、未处理 Promise rejection。
  • PageAction：自定义业务事件与属性。
  • Session Trace（视套餐）：会话级性能瀑布（功能因版本而异）。
  • 与 APM 关联：Browser → Backend transaction 钻取。

适用场景

  • 企业已采购 New Relic APM，需补齐前端性能盲区。
  • Java/.NET 单体或微服务 Web 应用，前后端统一供应商。
  • 需要按地理、浏览器、设备维度分析页面性能。
  • 合规采购要求延续既有 New Relic 合同而非引入新 RUM 厂商。

技术亮点

  • 与 APM 深度集成：同一账号体系，后端 agent 与 Browser agent 配置关联成熟。
  • 分布式追踪：跨 Browser → API Gateway → 微服务链路（需正确配置 CORS 与 trace header）。
  • 成熟的企业支持：大客户 SLA、合规认证与专业服务。
  • 灵活部署：脚本、NPM、自动注入多种方式适配遗留与现代化前端。

核心概念与架构

Browser Agent（页面 JS）
      ↓
 PageView / Ajax / JSError / PageAction 事件
      ↓
 New Relic Collector（bam.nr-data.net）
      ↓
 NR One UI（Browser 应用）
      ↕ Distributed Tracing
 APM Transactions

核心概念

  • Browser Application：逻辑应用单元，对应一个或多个域名。
  • License Key：浏览器数据上报密钥（区分于用户 API Key）。
  • PageView：一次页面加载或 SPA 虚拟页面浏览。
  • PageAction：自定义交互事件。
  • Distributed Tracing：W3C trace context 与后端 APM 串联。

技术局限与边界

  • Session Replay 弱于专精产品：回放能力不如 LogRocket、Sentry Replay 丰富（以当前产品为准）。
  • SPA 现代框架：复杂 React/Next 场景需验证自动路由检测是否完整。
  • 定价复杂：按 GB 摄入与用户席位组合，成本预估难度大。
  • SDK 现代化滞后感：部分团队反馈 DX 不如 Sentry/Datadog 新锐体验。
  • 国内访问：collector 域名与延迟需实测。

生态地图

  • Browser Agent：@newrelic/browser-agent、内联 script
  • APM：Java、Node、.NET 等 agent
  • Mobile：New Relic Mobile（独立产品线）
  • Synthetics：合成监控对比真实用户
  • 对比：Datadog RUM、Sentry、Elastic RUM

生态集成

  • React / Angular / Vue：NPM loader 在入口初始化；避免与 SSR 服务端重复加载。
  • APM 自动注入：部分 Java agent 可自动在 HTML 插入 Browser 脚本。
  • CI/CD：部署后通过 NR API 标记 deployment，关联 Browser 指标变化。
  • Alert：对 JS 错误率、CWV、Ajax 慢请求设 NRQL 告警。

开发与工程化

  • 脚本位置靠前：官方建议 <head> 尽早加载以捕获完整加载阶段。
  • deny_list：排除 analytics beacon 自身 URL 避免递归监控。
  • SPA 路由：确认 History API 劫持生效；Next.js App Router 需实测。
  • PageAction 规范：统一命名与属性 schema，便于 NRQL 查询。
  • 分布式追踪 CORS：后端需允许 trace header 传递。

性能与安全

  • 性能：Agent 异步上报；对主线程影响通常较小，但仍应监控自身 long task。
  • 安全：License Key 在客户端可见，属设计如此；勿与 Admin API Key 混淆。
  • 隐私：配置 cookie 与 session 追踪策略；欧盟用户注意同意管理。
  • CSP：需允许 bam.nr-data.net 等域名在 script/connect-src 中。

技术对比

维度New Relic BrowserDatadog RUMSentry
APM 关联极强（同源）极强强
Replay有限强强
DX中高高
适合NR 存量企业DD 存量企业前端优先团队

最佳实践

  1. 已购 APM 时同步开启 Distributed Tracing，否则 Browser 价值减半。
  2. 为关键业务定义 PageAction，补充自动采集盲区。
  3. 按部署标记版本，用 Deployment 功能对比发布后 CWV。
  4. NRQL 仪表板聚焦 CWV 与 JS 错误率，设 SLO 告警。
  5. 评估是否需专用 Replay 工具，NR Browser 可能不足以替代 LogRocket。

学习与社区资源