火山引擎“应用性能监控全链路版”实践 - zptime/blog GitHub Wiki

前两天刚看了一篇文章应用性能前端监控，字节跳动这些年经验都在这了，决定试用一下这个应用性能监控全链路版系统，目前面向新用户提供了试用 30 天的限时免费服务。

温馨提示：一定要看到最后，前面的操作包含试错的过程，操作不对，最后的操作才是正确的

注册

注册时，需要绑定手机号，如下所示：毕竟现在账号和密码太多了，一般也难得记住，直接用手机号和验证码登陆已经是很通用的方式了。

demo

默认进入系统之后，是没有权限的，只能查看 Demo，如下图所示：

要想开通 30 天免费试用，必须进行实名认证并且开通业务。

试用

产品试用文档介绍：https://www.volcengine.com/docs/6431/69877 应用与权限文档介绍：https://www.volcengine.com/docs/6431/70797

实名认证

如果要申请 30 天免费试用，必须先在进行实名认证，实名认证要绑定身份证和银行卡，然后在后台创建应用，最后填写一个申请表，等待工作人员处理就行。

申请链接：https://wenjuan.feishu.cn/m/cfm?t=s6RJBByEbWvi-fmpz

创建项目

进入管理后台，点击“访问控制”->“项目管理”->“新建项目”，如下图所示：

这个地方发现了一个 bug，这个备注的编辑是有问题的，修改不了。工单中没看见提问题的地方，只能在这提示下了

项目中可以添加成员，添加角色；还可以查看“已添加资源”，这个是和应用绑定了，即查看绑定的应用信息

创建应用

进入管理后台，点击“我的应用”->“创建应用”，当然，应用中可以关联之前创建的项目，如下图所示：

Web 端监控

官方文档：https://www.volcengine.com/docs/6431/68836

我目前体验的仅仅是 web 端的监控，还可以进行服务端、APP 端、小程序等的监控。

安装及配置

我是用的 npm 接入形式

// 1. 安装
npm install @apm-insight-web/rangers-site-sdk

// 2. main.js配置
// 默认配置只需要配置app_id，其他的功能开启类配置，都默认开启了
import RangersSiteSDK from "@apm-insight-web/rangers-site-sdk";
RangersSiteSDK("config", {
  app_id: '你的appid',
  // app_id: 257357,

  // 功能开启类, 如果要关闭，需要设置代码
  hookXHR: true, // 是否劫持xhr, 默认 true
  hookFetch: true, // 是否劫持fetch, 默认 true
  enableFMP: true, // 是否计算fmp, 默认true
  enablePerformance: true, // 是否监控性能, 默认true
  enableResourcePerformance: true, // 是否监控静态资源性能，默认 true
  enableStaticError: true, // 是否捕获静态资源异常, 默认true
  enableCatchJSError: true, // 是否捕获JS异常, 默认true
  enableBreadcrumb: true, // 是否采集用户行为， 默认true
});