简介
在前端开发中，我们常常需要对网站或者应用程序进行监测和优化，以达到更好的用户体验。这时，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：
- --- ------- ------ ----------------------
初始化 @micahhausler/newrelic
在使用 @micahhausler/newrelic 之前，需要先初始化 New Relic 配置。通过 browser 对象的 config 函数，传入一个配置对象，即可对 New Relic 进行初始化，配置如下：
------ -------- ---- ------------------------- ----- ------ - - ----------- ----- ------- ----- -------------- ----- ----------- ---- -- ------------------------
其中，licenseKey 为上一节中获取到的 Browser Monitor 的 license key，applicationID 是 New Relic 中 Browser Monitor 应用的 application id。
监测页面访问
通过 newrelic 对象的 sendPageView 函数，可以监测当前页面的访问情况。在页面加载完成后，调用 sendPageView 函数即可：
------ -------- ---- ------------------------- ------------------------
监测页面事件
在前端开发中，我们常常需要监测用户的行为，例如点击某个按钮等。通过 newrelic 对象的 addPageAction 函数，可以对页面的事件进行监测。在用户触发某个事件后，调用 addPageAction 函数即可：
------ -------- ---- ------------------------- -------------------------------- -- -- - ------------------------------ -------- ---
其中，'button click' 为自定义的事件名称。
监测 API 请求
在前端应用程序中，我们常常需要通过 AJAX 或者其他方式进行 API 请求。通过 newrelic 对象的 xhr 函数，可以监测这些 API 请求的状态。在发起一个新的 API 请求前，先调用 xhr 函数，传入一个唯一的 transaction name，即可开始监测：
------ -------- ---- ------------------------- ----- --- - --- ----------------- --------------- -------- ------------------- -- -- ------------
其中，'API' 为自定义的 transaction name，可以根据需要进行替换。
总结
通过本文你可以了解到，如何使用 @micahhausler/newrelic 快速集成 New Relic 到自己的前端项目中，并对页面访问、页面事件和 API 请求进行监测。希望这篇文章可以帮助你更好地优化你的前端应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005523e81e8991b448cfc64