前端监控提供一系列 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
:用于设置多条规则,每条规则都可以是上述类型之一。