npm 包 @micahhausler/newrelic 使用教程

简介

在前端开发中，我们常常需要对网站或者应用程序进行监测和优化，以达到更好的用户体验。这时，New Relic 就发挥了非常重要的作用。New Relic 是一家提供应用性能管理 (Application Performance Management，简称 APM) 的软件公司，他们为用户提供了一整套的 APM 解决方案，包括浏览器端监测、服务器端监测和移动端监测等。为了方便用户在前端开发中使用 New Relic，@micahhausler 开发了一个 npm 包 @micahhausler/newrelic，帮助用户快速集成 New Relic 到自己的前端项目中。

安装 @micahhausler/newrelic

在安装 @micahhausler/newrelic 前，需要先拥有 New Relic 账号，并在 New Relic 中创建一个 Browser Monitor 应用并获取 Browser Monitor 的 license key。具体创建方法可以参考这里。

然后使用 npm 安装 @micahhausler/newrelic：

$ npm install --save @micahhausler/newrelic

初始化 @micahhausler/newrelic

在使用 @micahhausler/newrelic 之前，需要先初始化 New Relic 配置。通过 browser 对象的 config 函数，传入一个配置对象，即可对 New Relic 进行初始化，配置如下：

import newrelic from '@micahhausler/newrelic';

const config = {
  licenseKey: <your license key>,
  applicationID: <your application id>,
};

newrelic.config(config);

其中，licenseKey 为上一节中获取到的 Browser Monitor 的 license key，applicationID 是 New Relic 中 Browser Monitor 应用的 application id。

监测页面访问

通过 newrelic 对象的 sendPageView 函数，可以监测当前页面的访问情况。在页面加载完成后，调用 sendPageView 函数即可：

import newrelic from '@micahhausler/newrelic';

newrelic.sendPageView();

监测页面事件

在前端开发中，我们常常需要监测用户的行为，例如点击某个按钮等。通过 newrelic 对象的 addPageAction 函数，可以对页面的事件进行监测。在用户触发某个事件后，调用 addPageAction 函数即可：

import newrelic from '@micahhausler/newrelic';

button.addEventListener('click', () => {
  newrelic.addPageAction('button click');
});

其中，'button click' 为自定义的事件名称。

监测 API 请求

在前端应用程序中，我们常常需要通过 AJAX 或者其他方式进行 API 请求。通过 newrelic 对象的 xhr 函数，可以监测这些 API 请求的状态。在发起一个新的 API 请求前，先调用 xhr 函数，传入一个唯一的 transaction name，即可开始监测：

import newrelic from '@micahhausler/newrelic';

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api');
newrelic.xhr('API', () => xhr.send());

其中，'API' 为自定义的 transaction name，可以根据需要进行替换。

总结

通过本文你可以了解到，如何使用 @micahhausler/newrelic 快速集成 New Relic 到自己的前端项目中，并对页面访问、页面事件和 API 请求进行监测。希望这篇文章可以帮助你更好地优化你的前端应用程序。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005523e81e8991b448cfc64