1. 什么是 appdynamics-javascript-agent
appdynamics-javascript-agent 是一个 npm 包，主要提供了在前端应用程序中对应用程序性能进行监控的功能。帮助开发人员监测前端 web 页面的性能数据（如页面加载时间、响应时间等）和用户行为数据（如用户的点击次数、鼠标滚动次数等）。在开发和维护一个前端应用程序时非常有用。
2. 安装和设置
2.1 安装
运行以下命令进行安装：
npm install --save appdynamics-javascript-agent
2.2 初始化
在 HTML 文件中的 <head> 标签中添加以下代码：
-- -------------------- ---- ------- -------- -------------------------- - --- ----------------- ----------------------- - -------------------- --------------------------- - ------------------------ -------------------------- - ----------------------- ------------------------- - ---------------------- ------------------------ - --------------------- --------------------------- - ------------------------ ---------
将以上 YOUR_*_HERE 替换为你的应用程序的相关信息。
2.3 引入 npm 包
在 JavaScript 文件中添加以下代码以引入包：
import { ADRUM } from 'appdynamics-javascript-agent';3. 实现
3.1 示例
以下是一个简单的使用 appdynamics-javascript-agent 的示例代码：
import { ADRUM } from 'appdynamics-javascript-agent';
function onLoadComplete() {
console.log('页面加载完成');
}
ADRUM.onLoadComplete = onLoadComplete;在 onLoadComplete 方法中，你可以编写自己的代码以做一些有意义的事情，比如记录特定事件、生成报表等等。
3.2 API
以下是 appdynamics-javascript-agent 的公开 API：
3.2.1 ADRUM.userEvent()
可以使用 userEvent() 方法记录用户操作。以下是示例代码：
ADRUM.userEvent({
'type': 'button',
'name': 'Sign In',
'action': 'click'
})类型为 'button' 的事件是指用户点击了一个按钮。在上述示例中，name 是事件名称，action 是事件的操作类型（如 'click'，'drag' 等），可以根据实际需要进行自定义。
3.2.2 ADRUM.timeline()
使用 timeline() 方法记录客户端执行的动作序列。以下是示例代码：
-- -------------------- ---- -------
----------------
------- --- ------ ----------
------- -
-------- --- -----------------
---------- -
-- --- ------ -------
-
-
--在上述示例中，name 是动作序列的名称，data 是包含动作序列数据的对象。其中，data.start 是时间戳，actions 包含动作对象数组，可以根据实际需要进行自定义。
4. 结论
使用 appdynamics-javascript-agent，开发人员可以更细致地监测前端应用程序性能和用户行为。在实际项目中，可以根据实际需要选择对应的 API 进行记录数据，并对记录的数据进行自定义分析。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f70238a385564ab66f0