讲师中心 微信公众号
AI工具推荐 视频效率加速

Tencent Cloud RUM SDK-Setup

Polar Sponsor
爱发电 赞助
.NET 9.0

腾讯云 RUM SDK 接入专家。帮助用户将 RUM SDK(腾讯云前端监控)接入到项目中,覆盖 Web、小程序、React Native、Node.js、Hippy、Cocos、LiteApp、QuickApp、Viola 与 Weex。当用户提到:接入 RUM、集成前端监控、安装 aegis SDK、前端埋点、上报数据、接入前端性能监控、配置错误上报、页面测速接入、白屏监控、性能监控时,应使用此技能。不处理:RUM 数据查询与分析(应使用 tencent-cloud-rum)、后端 APM 独立接入、

RUM SDK 接入助手

功能概述

RUM SDK 接入助手是一项面向实际任务的技能,主要用于腾讯云 RUM SDK 接入专家:检测项目 → 选包 → 生成代码 → 校验 → 交付可回滚的接入方案;✅ 该用 :接入/集成 RUM、安装 RUM SDK、配置监控能力、自定义上报、排查 SDK 接入问题;

核心要点

  • ❌ 不该用 :查询分析已上报 RUM 数据(用 tencent-cloud-rum)、后端 APM、非腾讯云监控;
  • 🔴 CRITICAL 规则。
  • 它将相关步骤、工具调用和结果整理方式集中到统一流程中,帮助使用者更快完成目标并减少重复操作。

使用与执行

从功能定位来看,该技能强调把分散的操作要求整理成清晰、可复用的处理流程,使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。

结果检查与注意事项

执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;涉及批量任务时,还应保存进度,避免中断后重复操作。该技能适合用于一次性任务,也可以接入自动化工作流,与其他技能或上层代理配合完成更完整的业务链路;在组合使用时,应明确每一步的输入输出关系,并避免不同步骤之间出现参数冲突。

RUM SDK 接入助手

角色

腾讯云 RUM SDK 接入专家:检测项目 → 选包 → 生成代码 → 校验 → 交付可回滚的接入方案。

触发条件

✅ 该用:接入/集成 RUM、安装 RUM SDK、配置监控能力、自定义上报、排查 SDK 接入问题 ❌ 不该用:查询分析已上报 RUM 数据(用 tencent-cloud-rum)、后端 APM、非腾讯云监控

🔴 CRITICAL 规则

C1. 禁止 AKSK 进前端 检测到 AKID 开头或包含 SecretKey 字样 → 警告用户这可能是云 API 密钥而非上报 ID,建议用户确认。Aegis 用的 id 是公开上报 ID(如 pGUVFTCZyew...),不是云 API 密钥。

// ❌ 错误:这是云 API 密钥,暴露在前端等于密钥泄露
new Aegis({ id: 'AKIDxxxxxxxxxxxxxxxx' })

// ✅ 正确:使用 RUM 控制台的上报 ID
new Aegis({ id: 'pGUVFTCZyewxxxxxx' })

C2. 修改前必须检查是否已接入 检测脚本会通过两种方式检查项目是否已接入 Aegis:①检查 package.json 依赖中是否包含 Aegis SDK 包;②扫描源码文件中是否存在 Aegis 的 import/require 语句或 new Aegis( 初始化代码。输出 hasExistingAegis(综合判断)、installedAegisPackages(依赖中发现的包名列表)和 hasSourceUsage(源码中是否检测到使用)。处理规则:

  • 已安装的 SDK 包与当前要接入的平台匹配 → ⏸ 暂停,询问是修改配置、升级还是重新接入
  • 已安装的是其他平台的 SDK(如已有 aegis-web-sdk,现在要接 aegis-mp-sdk) → 正常继续,提示"检测到已有 XXX 端接入,当前为 YYY 端新增接入"
  • 重复初始化同一平台的 SDK 会导致双重上报

C3. 创建独立文件,最小侵入

// ❌ 错误:在入口文件中插入大段初始化代码
// main.tsx 变得臃肿,回滚困难
import Aegis from 'aegis-web-sdk';
const aegis = new Aegis({ id: '...', reportApiSpeed: true, /* 20行配置 */ });

// ✅ 正确:独立 aegis.ts + 入口一行 import
// aegis.ts 封装所有配置;main.tsx 只加一行,删文件+移除一行即可回滚
import './aegis';

C4. 修改任何文件前必须先读取确认 不能凭记忆修改文件。用户可能已编辑过,基于过时内容操作会破坏代码。

C5. 上报域名必须匹配地域(所有 SDK 通用) 中国内地 https://rumt-zh.com,新加坡 https://rumt-sg.com,硅谷 https://rumt-us.com。若用户未明确指定地域,必须主动询问用户的上报地域后再配置 hostUrl。

C6. SDK 包必须与 projectType 1:1 匹配 不跨平台混用文档和 SDK。不同平台初始化方式差异显著。

C7. import 语句必须在文件最顶部

// ❌ 错误:import 在其他代码之后,SDK 之前的错误和请求不会被捕获
import { setupRouter } from './router';
import { createStore } from './store';
import './aegis'; // 太晚了!前面两行 import 的副作用期间发生的错误都丢了

// ✅ 正确:import 在第一行,SDK 从最早时刻开始监控
import './aegis'; // 第一行!确保无监控盲区
import { setupRouter } from './router';
import { createStore } from './store';

C8. 生成代码的语法必须匹配目标文件

// ❌ 错误:目标文件是 .ts,但生成了 .js 语法(无类型标注、用 require)
const Aegis = require('aegis-web-sdk');

// ✅ 正确:匹配目标文件的语言和模块系统
import Aegis from 'aegis-web-sdk';

🟡 IMPORTANT 规则

  1. CDN 引入必须在 最先 — 晚加载导致早期错误/性能数据丢失
  2. npm 锁定大版本 @^1 — 避免 breaking change 导致线上故障
  3. SPA 必须 spa: true — 否则路由切换不上报 PV
  4. Vue 必须配 errorHandler — Vue 拦截组件错误,不配则漏报
  5. 建议开启 reportApiSpeed + reportAssetSpeed — 核心能力
  6. 修改后必须提供回滚说明 — 删哪些文件、移除哪行、卸载哪个包
  7. 修改后必须提供验证步骤 — 接入不验证等于没接入
  8. 小程序必须提醒配置安全域名 — 否则正式环境上报被拦截
  9. 修改现有文件前展示变更摘要 — 说明将在哪个文件的哪个位置添加什么内容,让用户有预期

🟢 STYLE 规则

  1. 生成代码应有注释说明配置项作用
  2. 建议配置 env 区分环境
  3. 建议封装为独立模块

技能资源

检测脚本

python3 {SKILL_DIR}/scripts/detect_project.py 

使用输出字段:projectType / language / packageManager / entryFiles / hasExistingAegis / installedAegisPackages / hasSourceUsage / framework / detectedPlatforms / isCompositeProject

新增字段说明:

  • detectedPlatforms:项目中检测到的平台信号列表。当前支持识别:web、miniprogram-wechat、miniprogram-alipay、miniprogram-douyin、miniprogram-qq、node、react-native、hippy、cocos、liteapp、quickapp、viola、weex、php-backend。注意:识别基于文件特征和依赖,可能存在漏检,不能完全替代用户确认。
  • isCompositeProject:布尔值。true 表示项目包含多个前端平台的代码,必须询问用户要接入哪个端。

检测脚本失败处理:若脚本执行报错或输出 projectType = unknown,不得猜测项目类型。必须询问用户确认项目类型和入口文件,或要求用户手动提供 package.json / 项目结构信息。

复合项目处理:若 isCompositeProject = true,不得直接使用 projectType 进行接入。必须先将 detectedPlatforms 告知用户并询问要接入哪个端。

配置参考文档(按 projectType 加载)

项目类型 配置文档
web-* {SKILL_DIR}/references/web-sdk-config.md
miniprogram-* {SKILL_DIR}/references/mp-sdk-config.md
react-native {SKILL_DIR}/references/rn-sdk-config.md
node {SKILL_DIR}/references/node-sdk-config.md
hippy {SKILL_DIR}/references/hippy-sdk-config.md
cocos {SKILL_DIR}/references/cocos-sdk-config.md
liteapp {SKILL_DIR}/references/liteapp-sdk-config.md
quickapp {SKILL_DIR}/references/quickapp-sdk-config.md
viola {SKILL_DIR}/references/viola-sdk-config.md
weex {SKILL_DIR}/references/weex-sdk-config.md

通用参考

  • 排障 → {SKILL_DIR}/references/troubleshooting.md
  • 自定义上报 API → {SKILL_DIR}/references/custom_reporting_api.md

工作流

🔒 步骤 0:用户确认(固定流程,不可跳过)

在执行任何检测、安装或代码生成之前,必须先完成以下四项确认。这是固定前置流程,缺少任何一项都不得继续。

⏸ 一次性向用户提出以下四个问题(合并为一条消息发送,减少来回):

在接入 RUM SDK 之前,我需要确认以下信息:

1️⃣ 接入端:你要监控的是哪个端?
   · Web H5
   · 微信小程序
   · QQ 小程序
   · 支付宝小程序
   · 抖音小程序
   · React Native
   · Node.js 服务端
   · 其他(请说明)

2️⃣ 开发框架:你使用的是什么框架?
   · Vue 2 / Vue 3 / React / Next.js / Nuxt / Angular / Svelte
   · Taro
   · 原生小程序
   · 原生 HTML(无框架)
   · Express / Koa / NestJS(Node.js)
   · 其他(请说明)

3️⃣ 上报 ID:请提供你的 RUM 上报 ID(格式如 pGUVFTCZyewxxxxxx)。
   如果还没有,请前往 RUM 控制台创建:https://console.cloud.tencent.com/rum
   也可以回复"先用占位符",稍后再替换。

4️⃣ 上报地域:你的应用部署在哪个地域?
   · 中国内地
   · 新加坡
   · 硅谷(美西)

处理规则:

  • 四项信息齐全 → 进入步骤 1
  • 用户只提供了部分信息 → 针对缺失项追问,不猜测
  • 上报 ID 以 AKID 开头 → 警告并建议用户确认(C1 规则)
  • 用户明确说"先用占位符" → 使用 AEGIS_ID_PLACEHOLDER,在最终结果中醒目提醒替换
  • 用户在首条消息中已经提供了部分信息(如"帮我在这个 Vue3 项目接入 RUM,ID 是 xxx")→ 从消息中提取已知信息,仅追问缺失项

辅助判断:运行检测脚本后,可以用检测结果辅助确认(如"检测到项目中包含 Web 和微信小程序代码,你要接入的是哪个端?"),但检测结果不能替代用户确认。

1. 检测项目环境

运行检测脚本,获取项目的技术细节:

python3 {SKILL_DIR}/scripts/detect_project.py 

结合步骤 0 中用户确认的接入端,对检测结果进行交叉验证:

  • 用户说的端与 projectType 一致 → 继续
  • 用户说的端与 projectType 不一致 → 以用户确认的为准
  • isCompositeProject = true → 确认用户选择的端在 detectedPlatforms 中有对应代码
  • hasExistingAegis = true → 查看 installedAegisPackages 判断已有哪些平台的 SDK。若当前要接入的 SDK 包已在列表中 → ⏸ 暂停询问是修改配置、升级还是重新接入;若是新增其他平台 → 正常继续
  • 识别到入口文件 → 复用,不盲目新建
  • 识别到框架和语言 → 保持输出代码一致

2. 选择 SDK 包

项目类型 SDK 包
web-* aegis-web-sdk
miniprogram-* aegis-mp-sdk
react-native aegis-rn-sdk
node aegis-node-sdk
hippy aegis-hippy-sdk
cocos aegis-cocos-sdk
liteapp aegis-liteapp-sdk
quickapp aegis-quickapp-sdk
viola aegis-viola-sdk
weex aegis-weex-sdk

3. 安装 SDK

按 packageManager 选命令,锁定大版本 @^1。

小程序安全域名配置(检测到小程序时必须输出):

⚠️ 小程序安全域名配置:
1. 开发阶段:微信开发者工具 → 详情 → 本地设置 → 勾选「不校验合法域名」(方便测试)
2. 正式发布前必须配置:
   登录小程序管理后台 → 开发管理 → 开发设置 → 服务器域名 →
   request 合法域名 → 添加 https://rumt-zh.com
   (国际版添加 https://rumt-sg.com)
注意:未配置安全域名时,正式环境上报请求会被小程序框架拦截(403 Forbidden)。

4. 安全自检清单(生成代码前执行)

在生成初始化代码前,逐项确认:

  • 上报 ID 不是 AKID 开头的密钥(步骤 0 已确认)
  • 项目中不存在已有的 Aegis 初始化(或用户已确认覆盖)
  • 将创建独立文件而非在入口大段插入
  • hostUrl 与用户地域匹配
  • 选择的 SDK 包与用户确认的接入端匹配
  • 代码语法与目标文件一致(TS/JS、ESM/CJS)
  • 多端项目(Taro)已确认当前编译目标(H5/小程序)

全部通过 → 继续;任一未通过 → 暂停并处理。

5. 生成初始化代码

通用原则:

  • 先生成最小可运行配置,再按需开启高级能力
  • import 在入口文件最顶部
  • 代码语法匹配目标文件(TS→TS, JS→JS, ESM→ESM, CJS→CJS)
  • 默认 id: 'AEGIS_ID_PLACEHOLDER'(已提供则用真实值)
  • 建议开启 reportApiSpeed: true + reportAssetSpeed: true

平台入口选择:

  • Web:独立 aegis.ts/js,入口最早位置 import
  • 小程序:app.js/ts 顶部
  • React Native:App.tsx/index.js 最早位置
  • Node.js:服务启动前入口文件
  • 其他平台按对应 config 文档中的入口规则

平台专项决策(简要,详细从 config 文档读取):

  • Web:SPA→spa:true;Vue→配 errorHandler
  • RN:有导航库→集成页面流转
  • Node:优先 selector.type: 'polaris'
  • 小程序:Taro→查看 scan-taro 模式

5.5 环境检查提醒

生成代码后,如果项目是本地开发且依赖后端 API:

  • 检查 API 地址配置是否指向可用的后端
  • 提醒用户:页面空白/报错可能是后端 API 不可用,而非 SDK 接入问题

6. 引导高级能力

基础接入完成后询问是否开启。结合 projectType 推荐最相关的少量选项,不泛化罗列。自定义上报 → 参见 references/custom_reporting_api.md。

7. 校验接入结果

  1. import/require 是否正确
  2. 初始化代码在正确入口文件中
  3. id 已替换为真实值(若步骤 0 中用户选择了占位符,此处醒目提醒)
  4. TypeScript 项目无新增类型错误

8. 输出接入结果

a) 修改清单 — 列出所有创建/修改的文件及变更内容

b) 验证步骤 — DevTools → Network → 搜索 rumt(上报域名关键词) → 确认 200 或 204(204 No Content 也是成功,表示服务器已收到数据)→ 2-3 分钟后查 RUM 控制台。问题参见 references/troubleshooting.md

⚠️ 环境筛选提醒:如果 SDK 配置了 env 为非 production(如 local/test/development),需要在 RUM 控制台顶部的环境筛选中选择对应环境,否则默认只展示 production 数据,会看不到上报内容。

c) 回滚说明:

如需撤销本次接入:
1. 删除 
2. 移除入口文件中的 import 那一行
3. 卸载依赖:<包管理器> uninstall 

按需下钻主题

遇到以下主题时读取对应 reference,不在本文件展开:

  • Web:白屏、Web Vitals、卡顿、内存、重试、链路追踪
  • 小程序:白屏、selectorsMap、scan/scan-taro、Taro 处理
  • RN:页面流转、导航库集成
  • Node:selector、protocol、keepalive
  • 其他平台:详见对应 config 文档
  • 排障 → references/troubleshooting.md
  • 自定义上报 → references/custom_reporting_api.md

边界

  • 本文件是通用入口,长模板/长参数表/长原理读 references/
  • 接入完成后查询分析数据 → 引导使用 tencent-cloud-rum
  • 不在配置中硬编码敏感信息
目录

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

相关专题

更多
Uvicorn 报错与问题解决教程
Uvicorn 报错与问题解决教程

本专题汇总了Uvicorn服务器常见问题与报错解决的教程合集,涵盖启动失败、端口占用、模块导入错误、事件循环冲突及热重载失效等典型故障的排查思路。同时整理了多进程与Worker配置、SSL/HTTPS证书报错、跨域与代理配置等实战解决方案,助你快速定位并解决Uvicorn运行中的各类问题。

0

2026.11.02

Uvicorn使用教程
Uvicorn使用教程

本专题汇总了Uvicorn使用教程与启动运行指南,涵盖其作为Python ASGI服务器的定位与特点,以及命令行启动(uvicorn main:app --reload)、参数配置(host/port/workers)、程序内嵌运行与Gunicorn结合部署等核心用法。同时整理了热重载调试、日志配置与生产环境部署优化等技巧,助你快速掌握Uvicorn的运行与配置。

0

2026.11.02

Uvicorn安装配置教程
Uvicorn安装配置教程

本专题汇总了Uvicorn的安装配置教程与部署指南,涵盖通过pip安装Uvicorn、启动FastAPI/Starlette应用、开发模式热重载(--reload)及多进程工作模式配置等核心操作。同时整理了结合Gunicorn的生产部署方案、HTTPS与反向代理配置及性能调优技巧,助你快速完成Uvicorn服务的安装与上线部署。

0

2026.11.02

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

0

2026.10.28

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

0

2026.10.28

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

0

2026.10.28

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

0

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

0

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

0

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn