newrelic-browser-agent 的安装和配置教程

2025-05-23 16:14:14作者：薛曦旖Francesca

项目的基础介绍和主要的编程语言

newrelic-browser-agent 是由 New Relic 提供的一个开源项目，用于监控 Web 应用程序的性能、错误和其他行为。这个项目主要使用 JavaScript 编程语言，并且是为了在浏览器环境中运行的。

项目使用的关键技术和框架

该项目使用了多种技术和框架来确保其在浏览器中的高效运行，包括但不限于：

New Relic agent: 用于收集和报告应用程序性能数据的核心库。
ES6+: 使用现代 JavaScript 的特性进行开发，以确保代码的现代化和效率。
Webpack: 一个模块打包工具，用于打包 JavaScript 应用程序。
Jest: 一个用于 JavaScript 的测试框架，用于确保代码的质量和功能。

项目安装和配置的准备工作和详细的安装步骤

准备工作

在开始安装 newrelic-browser-agent 之前，请确保您已经安装了以下环境和工具：

Node.js: JavaScript 运行环境，用于运行安装脚本和构建过程。
npm (Node Package Manager): Node.js 的包管理器，用于安装项目依赖。

安装步骤

克隆项目仓库

首先，您需要在您的本地环境中克隆项目仓库：

git clone https://github.com/newrelic/newrelic-browser-agent.git
cd newrelic-browser-agent

安装依赖

使用 npm 安装项目所需的依赖：
```
npm install
```
创建 New Relic 应用

在 New Relic 仪表板中创建一个新的浏览器应用。登录到 New Relic，添加一个数据源，选择“浏览器监控”，然后启用应用。您将需要一个 applicationID 和 licenseKey 来配置浏览器代理。

配置浏览器代理

在您的项目中，您需要导入 BrowserAgent 类并使用您的 New Relic 应用配置来实例化它。以下是一个配置示例：

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent';

// 使用您从 New Relic 应用获取的配置值填充以下选项
const options = {
  info: {
    applicationID: '您的 applicationID',
    licenseKey: '您的 licenseKey'
  }
};

// 实例化浏览器代理
new BrowserAgent(options);

集成到您的应用中

将代理的实例化代码集成到您的 Web 应用程序的 HTML 输出的 <head> 部分尽可能接近顶部的地方。具体的集成方式取决于您的应用程序的架构或框架。
测试配置

在完成配置后，确保在开发环境中测试您的应用程序，以确保 New Relic 浏览器代理正常工作并收集所需的数据。