活动

天翼云最新优惠活动,涵盖免费试用,产品折扣等,助您降本增效!
热门活动
  • 618智算钜惠季 爆款云主机2核4G限时秒杀,88元/年起!
  • 免费体验DeepSeek,上天翼云息壤 NEW 新老用户均可免费体验2500万Tokens,限时两周
  • 云上钜惠 HOT 爆款云主机全场特惠,更有万元锦鲤券等你来领!
  • 算力套餐 HOT 让算力触手可及
  • 天翼云脑AOne NEW 连接、保护、办公,All-in-One!
  • 中小企业应用上云专场 产品组合下单即享折上9折起,助力企业快速上云
  • 出海产品促销专区 NEW 爆款云主机低至2折,高性价比,不限新老速来抢购!
  • 天翼云电脑专场 HOT 移动办公新选择,爆款4核8G畅享1年3.5折起,快来抢购!
  • 天翼云奖励推广计划 加入成为云推官,推荐新用户注册下单得现金奖励
免费活动
  • 免费试用中心 HOT 多款云产品免费试用,快来开启云上之旅
  • 天翼云用户体验官 NEW 您的洞察,重塑科技边界

智算服务

打造统一的产品能力,实现算网调度、训练推理、技术架构、资源管理一体化智算服务
智算云(DeepSeek专区)
科研助手
  • 算力商城
  • 应用商城
  • 开发机
  • 并行计算
算力互联调度平台
  • 应用市场
  • 算力市场
  • 算力调度推荐
一站式智算服务平台
  • 模型广场
  • 体验中心
  • 服务接入
智算一体机
  • 智算一体机
大模型
  • DeepSeek-R1-昇腾版(671B)
  • DeepSeek-R1-英伟达版(671B)
  • DeepSeek-V3-昇腾版(671B)
  • DeepSeek-R1-Distill-Llama-70B
  • DeepSeek-R1-Distill-Qwen-32B
  • Qwen2-72B-Instruct
  • StableDiffusion-V2.1
  • TeleChat-12B

应用商城

天翼云精选行业优秀合作伙伴及千余款商品,提供一站式云上应用服务
进入甄选商城进入云市场创新解决方案
办公协同
  • WPS云文档
  • 安全邮箱
  • EMM手机管家
  • 智能商业平台
财务管理
  • 工资条
  • 税务风控云
企业应用
  • 翼信息化运维服务
  • 翼视频云归档解决方案
工业能源
  • 智慧工厂_生产流程管理解决方案
  • 智慧工地
建站工具
  • SSL证书
  • 新域名服务
网络工具
  • 翼云加速
灾备迁移
  • 云管家2.0
  • 翼备份
资源管理
  • 全栈混合云敏捷版(软件)
  • 全栈混合云敏捷版(一体机)
行业应用
  • 翼电子教室
  • 翼智慧显示一体化解决方案

合作伙伴

天翼云携手合作伙伴,共创云上生态,合作共赢
天翼云生态合作中心
  • 天翼云生态合作中心
天翼云渠道合作伙伴
  • 天翼云代理渠道合作伙伴
天翼云服务合作伙伴
  • 天翼云集成商交付能力认证
天翼云应用合作伙伴
  • 天翼云云市场合作伙伴
  • 天翼云甄选商城合作伙伴
天翼云技术合作伙伴
  • 天翼云OpenAPI中心
  • 天翼云EasyCoding平台
天翼云培训认证
  • 天翼云学堂
  • 天翼云市场商学院
天翼云合作计划
  • 云汇计划
天翼云东升计划
  • 适配中心
  • 东升计划
  • 适配互认证

开发者

开发者相关功能入口汇聚
技术社区
  • 专栏文章
  • 互动问答
  • 技术视频
资源与工具
  • OpenAPI中心
开放能力
  • EasyCoding敏捷开发平台
培训与认证
  • 天翼云学堂
  • 天翼云认证
魔乐社区
  • 魔乐社区

支持与服务

为您提供全方位支持与服务,全流程技术保障,助您轻松上云,安全无忧
文档与工具
  • 文档中心
  • 新手上云
  • 自助服务
  • OpenAPI中心
定价
  • 价格计算器
  • 定价策略
基础服务
  • 售前咨询
  • 在线支持
  • 在线支持
  • 工单服务
  • 建议与反馈
  • 用户体验官
  • 服务保障
  • 客户公告
  • 会员中心
增值服务
  • 红心服务
  • 首保服务
  • 客户支持计划
  • 专家技术服务
  • 备案管家

了解天翼云

天翼云秉承央企使命,致力于成为数字经济主力军,投身科技强国伟大事业,为用户提供安全、普惠云服务
品牌介绍
  • 关于天翼云
  • 智算云
  • 天翼云4.0
  • 新闻资讯
  • 天翼云APP
基础设施
  • 全球基础设施
  • 信任中心
最佳实践
  • 精选案例
  • 超级探访
  • 云杂志
  • 分析师和白皮书
  • 天翼云·创新直播间
市场活动
  • 2025智能云生态大会
  • 2024智算云生态大会
  • 2023云生态大会
  • 2022云生态大会
  • 天翼云中国行
天翼云
  • 活动
  • 智算服务
  • 产品
  • 解决方案
  • 应用商城
  • 合作伙伴
  • 开发者
  • 支持与服务
  • 了解天翼云
      • 文档
      • 控制中心
      • 备案
      • 管理中心
      文档中心

      应用性能监控

      应用性能监控

        • 产品动态
        • 产品介绍
        • 产品定义
        • 产品优势
        • 功能特性
        • 应用场景
        • 指标总览
        • JVM监控
        • 内存
        • GC
        • 线程
        • 其他基础监控
        • 资源监控
        • Java方法
        • Netty内存
        • XXL-JOB
        • 数据库监控
        • MySQL
        • ClickHouse
        • Elasticsearch
        • MongoDb
        • DBCP连接池
        • Druid连接池
        • C3P0连接池
        • 缓存监控
        • Redis
        • Jedis
        • Lettuce
        • 消息监控
        • kafkaConsumer
        • KafkaProducer
        • RabbitMqConsumer
        • RabbitMqProducer
        • Web容器监控
        • Tomcat
        • 接口调用
        • URL
        • Dubbo
        • 外部调用
        • HttpClient
        • 上下游分析
        • 上游应用
        • 下游应用
        • 告警规则指标说明
        • Agent版本说明
        • 使用限制
        • 基本概念
        • 隐私与敏感信息保护声明
        • 计费说明
        • 计费说明
        • 费用账单
        • 欠费说明
        • 停止计费
        • 快速入门
        • 开通应用性能监控
        • 接入Java应用
        • 为Java应用手动安装Agent
        • 为容器服务的Java应用安装探针
        • 接入Go应用
        • 以OpenTelemetry方式接入
        • 以SkyWalking方式接入
        • 以Jeager方式接入
        • 接入Python应用
        • 以OpenTelemetry方式接入
        • 以SkyWalking方式接入
        • 接入Node.js应用
        • 以OpenTelemetry方式接入
        • 以Jeager方式接入
        • 以SkyWalking方式接入
        • 接入C#应用
        • 以Jeager方式接入
        • 以OpenTelemetry方式接入
        • 以SkyWalking方式接入
        • 用户指南
        • 应用列表
        • 应用列表
        • CMDB管理
        • 概览
        • 创建项目
        • 创建环境
        • 创建分组
        • 创建应用
        • 监控概览
        • 应用拓扑
        • 应用详情
        • 监控项视图
        • JVM监控
        • 其他基础监控
        • 数据库监控
        • 缓存监控
        • 消息监控
        • 接口监控
        • web容器监控
        • 异常错误分析
        • 上下游分析
        • 调用链查询
        • 其他分析视角
        • 接口调用
        • 数据库调用
        • 外部调用
        • 应用诊断
        • Arthas诊断
        • 线程分析
        • 应用设置
        • 配置说明
        • Agent开关配置
        • 调用链采集设置
        • URL采集设置
        • Dubbo设置
        • Java方法设置
        • SQL设置
        • 日志开启设置
        • 应用诊断设置
        • Agent管理
        • 调用链查询
        • 调用链查询
        • Trace详情
        • APM常用标签
        • 告警管理
        • 设置告警规则
        • 查看告警发送历史
        • 查看告警事件历史
        • 通知对象
        • 通知策略
        • 静默策略
        • 系统管理
        • 用量统计
        • 前端监控
        • 应用接入
        • 创建前端应用
        • Web 接入场景
        • 小程序接入场景
        • SDK 配置参考
        • 应用列表
        • 告警规则
        • 应用总览
        • 访问速度与页面性能
        • 访问明细
        • 静态资源
        • API 分析
        • 错误诊断
        • 日志查询
        • 用量统计
        • 应用设置
        • 接入步骤
        • 白名单管理
        • 应用名称
        • Sourcemap 管理
        • 启停设置
        • 限额设置
        • 开发参考
        • 应用性能指标
        • 跨域静态资源上报
        • 常见问题
        • 计费类
        • 计费FAQ
        • 如何查看agent用量
        • 操作类
        • 如何测试网络连通性?
        • 升级探针FAQ
        • 为Java应用手动安装Agent的FAQ
        • APMagent安装成功,为什么控制台仍然没有数据?
        • 安装Agent后应用启动时报OutOfMemoryError错误怎么办?
        • 调用链的时间线如何绘制的?
        • 其他问题
        • 最佳实践
        • 使用调用链采样策略
        • 诊断服务端报错问题
        • 业务日志关联调用链的TraceId信息
        • 通过调用链路和日志分析定位业务异常问题
        • 使用APM监控异步任务
        • API参考
        • API使用说明
        • 文档下载
        • 操作手册
        • 相关协议
        • APM产品服务协议
        • APM服务等级协议
          无相关产品

          本页目录

          帮助中心应用性能监控用户指南前端监控应用接入SDK 配置参考
          SDK 配置参考
          更新时间 2025-06-27 19:07:08
          • 新浪微博
          • 微信
            扫码分享
          • 复制链接
          最近更新时间: 2025-06-27 19:07:08
          分享文章
          • 新浪微博
          • 微信
            扫码分享
          • 复制链接

          前端监控提供一系列 SDK 配置项,您可以通过设置这些配置项实现更细粒度的数据上报控制或数据规整配置,如配置前端应用的环境与版本、用户的 uid 与用户名、各项功能开关以及规整上报数据等。

          您可以在初始化前端应用时,将本页面中的配置项添加到前端监控 SDK 的初始化配置中,script 标签引入与 NPM 引入的配置方法分别见下图。小程序应用的配置方法类似,只需在相应对象中添加配置项即可。

           

          以下配置项除特殊说明外,均支持 Web 应用与小程序应用。

          基础配置项

          appId

          必填项,值为字符串,是前端应用的唯一标识,创建应用时会自动生成。

          uid

          非必填项,值为函数,该函数需返回用户的 id,该 id 是用户的唯一标识,id 可以是字符串或数值。示例:

          "uid": function() {
              // 假设可通过 userUser 方法获取用户的 userId
              const { userId } = useUser()
              return userId
          },

          如果没有传 uid 配置,SDK 将会自动为用户生成唯一的 id。在控制台中,id 用于统计 UV/PV、对异常进行溯源等功能。

          username

          非必填项,值为函数,该函数需返回用户的名称,名称需为字符串,其长度若超过 40 个字符将被截断。示例:在控制台中,用户名用于对异常进行溯源等功能。

          "username": function() {
              // 假设可通过 userUser 方法获取用户的 userName
              const { userName } = useUser()
              return userName
          },

          release

          非必填项,值为字符串。在控制台中,是全局维度,也用于各项指标的版本分布统计。示例:

          "release": "1.10",

          environment

          非必填项,值为字符串。在控制台中,是全局维度,也用于各项指标的环境分布统计。

          environment 值环境
          dev开发环境
          test测试环境
          pre预发环境
          grey灰度环境
          prod生产环境

          示例:

          "environment": "prod",

          功能开关

          enableAPI

          是否启用 API 请求数据上报。非必填项,值为布尔值,默认值为 true。若为 true,将上报 API 请求信息;反之亦然。

          enablePv

          是否启用 PV 数据上报。非必填项,值为布尔值,默认值为 true。若为 true,将上报 PV 数据;反之亦然。

          enablePerf

          是否启用性能数据上报。非必填项,值为布尔值,默认值为 true。若为 true,将上报应用性能数据;反之亦然。

          enableResource

          是否启用静态资源上报。非必填项,置为布尔值,默认值为 false。若为 true,将上报页面静态资源(js、css、图片等)的加载结果;反之亦然。

          enableSPA(Web 应用)

          是否启用 SPA(Single Page Application) 解析。非必填项,值为布尔值,默认值为 false。若为 true,将监听页面的 hashchange 事件并自动上报 PV,适用于单页面应用场景;反之亦然。

          enableError(小程序应用)

          是否启用 JS 错误上报。非必填项,值为布尔值,默认值为 true。若为 true,将自动上报应用中的 JS 报错;反之亦然。当前仅支持小程序应用配置,Web 应用暂时无法关闭。

          enableSetData(小程序应用)

          非必填项,值为布尔值,默认值为 false。若为 true,则会上报小程序 setData 方法相关的性能数据;反之亦然。

          上报数据规整

          parseResponse

          用于解析并规整 API 响应数据。非必填项,值为函数,默认值为:

          "parseResponse": function(responseData, statusCode, { method, api, domain }) {
                  let msg = ''
                  if (responseData && typeof responseData === 'object') {
                      msg = responseData.msg || responseData.message || responseData.subMsg || responseData.errorMsg || responseData.ret || responseData.errorResponse || ''
                      if (typeof msg === 'object') {
                          msg = msg.msg || msg.message || msg.info || msg.ret || JSON.stringify(msg)
                      }
                  }
                  
                  // 默认 >= 200 && < 400 认为是接口成功
                  let success = true
                  if (parseInt(statusCode) < 200 || parseInt(statusCode) >= 400) {
                      success = false
                  }
                  
                  return {
                      msg, // String
                      success, // Boolean
                      code: statusCode, // Number
                  }
          },

          该函数需要返回一个包含 msg、success、code 的对象。SDK 会使用该函数对 API 响应进行解析,提取出 msg、success 和 code 字段。

          parseHash(Web 应用)

          用于解析 SPA 应用的 page 字段,仅在 enableSPA 为 true 时才生效。非必填项,值为函数,默认值为:

          "parseHash": function(hash) {
                  const cutUrlSearch = url => {
                      if (!url || typeof url !== 'string') return ''
                      return url.replace(
                          /^(https?:)?\/\//,
                          ''
                      ).replace(
                          /\?.*$/,
                          ''
                      )
          }
                  const page = hash ? util.cutUrlSearch(hash.replace(/^#\/?/, '')) : ''
                  return page || '[index]'
          },

          此配置项一般不需要修改。如果需要在上报时使用自定义的页面名,或 URL 的 Hash 比较复杂,则需要修改此配置项。示例:

          const PAGE_MAP = {
            '/overview': '总览页',
            '/log': '设置页',
            '/setting': '设置页',
            // ...
          }
          
          
          // ... 其他配置项
          "parseHash": function(hash) {
            const key = hash.replace(/\?.*$/, '')
            return PAGE_MAP[key] || key
          }
          // ... 其他配置项

          urlHelper

          用于规整上报数据的 page 字段,对于小程序应用及 Web 应用生效,这些应用会自动获取页面的 URL 或 url hash 作为 page 字段。

          当页面URL类似于 http://example.com/projects/123456  (projects后面的数字是项目ID)时,如果将  example.com/projects/123456 作为page上报,会导致在数据查看时页面无法聚成一类。这种情况下,为了使同类页面聚类,可以使用 urlHelper 参数过滤掉非关键字符,例如此例中的项目ID。 

          非必填项,默认值为:

          urlHelper: [
              // 将所有 Path 中的数字变成 *
              {
                  rule: /\/([a-z\-_]+)?\d{2,20}/g,
                  target: '/$1**'
              },
              // 去掉URL末尾的'/'
          /\/$/
          ],

          此配置项一般不需要修改,其作用是过滤掉 xxxx/123456 后面的数字,例如 xxxx/00001 和 xxxx/00002 都会变成 xxxx/**。

          urlHelper的值可以是以下类型:

          • String 或 RegExp(正则表达式):将匹配到的字符串去掉。

          • Object<rule, target>:对象包含两个Key(rule和target)作为JS字符串的replace方法的入参。使用方法参见JS相关教程中的String::replace方法。

          • Function:将原字符串作为入参执行方法,将执行结果作为Page。

          • Array:用于设置多条规则,每条规则都可以是上述类型之一。

          apiHelper

          用于规整 API 类型上报数据的 url 字段,用法及含义同 urlHelper。

          非必填项,默认值为:

          apiHelper: [
              // 将所有 Path 中的数字变成 *
              {
                  rule: /\/([a-z\-_]+)?\d{2,20}/g,
                  target: '/$1**'
              },
              // 去掉URL末尾的'/'
          /\/$/
          ],

          apiHelper的值可以是以下类型:

          • String 或 RegExp(正则表达式):将匹配到的字符串去掉。

          • Object<rule, target>:对象包含两个Key(rule和target)作为JS字符串的replace方法的入参。使用方法参见JS相关教程中的String::replace方法。

          • Function:将原字符串作为入参执行方法,将执行结果作为 url。

          • Array:用于设置多条规则,每条规则都可以是上述类型之一。

          ignore

          ignore: {
              ignoreUrls: [],
              ignoreApis: [],
              ignoreErrors: [/^Script error/],
          } 

          用于忽略指定URL/API/JS错误。符合规则的日志将被忽略且不会被上报,包含子配置项ignoreUrls、ignoreApis 和 ignoreErrors。

          ignore的值是一个对象,对象中包含 3 个属性:ignoreUrls、ignoreApis 和 ignoreErrors。可单独设置其中的 1 个或多个属性。
           

          非必填项,默认值为:ignoreUrls表示忽略某些URL(使用 page 字段匹配),符合规则的URL下的日志都不会被上报;ignoreApis表示忽略某些API(使用 api 字段匹配),符合规则的API将不会被监控;ignoreErrors表示忽略某些JS错误(使用 msg 字段匹配),符合规则的JS错误不会被上报。

          每个子配置项的值可以是 String、RegExp、Function 或者以上三种类型组成的数组,:

          • String 或 RegExp(正则表达式):若上述“匹配”字段(page/api/msg)包含指定字符串或符合指定正则匹配,则不会上报。

          • Function:若返回 true,则不会上报。

          • Array:用于设置多条规则,每条规则都可以是上述类型之一。

          文档反馈

          建议您登录后反馈,可在建议与反馈里查看问题处理进度

          鼠标选中文档,精准反馈问题

          选中存在疑惑的内容,即可快速反馈问题,我们会跟进处理

          知道了

          上一篇 :  小程序接入场景
          下一篇 :  应用列表
          搜索 关闭
          ©2025 天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
          公司地址:北京市东城区青龙胡同甲1号、3号2幢2层205-32室
          备案 京公网安备11010802043424号 京ICP备 2021034386号
          ©2025天翼云科技有限公司版权所有
          京ICP备 2021034386号
          备案 京公网安备11010802043424号
          增值电信业务经营许可证A2.B1.B2-20090001
          用户协议 隐私政策 法律声明