funny-sdk
v2.2.8
Published
init
Downloads
12
Readme
发版 Check List
- [ ] 目前有两处修改版本号的地方, config/index.js & package.json, 两处版本号是否统一
安装与使用
使用项目中自带的 SDK 包，引入进行打点
import dt from 'funny-sdk'
// 初始化配置
function getUuid() {
let key = 'funnu-sdk-uuid'
if (localStorage.getItem(key)) return localStorage.getItem(key)
let id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (Math.random() * 16) | 0,
v = c == 'x' ? r : (r & 0x3) | 0x8
return v.toString(16)
})
localStorage.setItem(key, id)
return id
}
dt.set({
pid: 'project_id', // [必填]项目id, 由项目组统一分配
uuid: getUuid(), // [可选]设备唯一id, 用于计算uv数&设备分布. 一般在cookie中可以取到, 没有uuid可用设备mac/idfa/imei替代. 或者在storage的key中存入随机数字, 模拟设备唯一id.
ucid: '', // [可选]用户ucid, 用于发生异常时追踪用户信息, 一般在cookie中可以取到, 没有可传空字符串
record: {
time_on_page: true, // 是否监控用户在线时长数据, 默认为true
performance: true, // 是否监控页面载入性能, 默认为true
js_error: true, // 是否监控页面报错信息, 默认为true
// 配置需要监控的页面报错类别, 仅在js_error为true时生效, 默认均为true(可以将配置改为false, 以屏蔽不需要上报的错误类别)
js_error_report_config: {
ERROR_RUNTIME: true, // js运行时报错
ERROR_SCRIPT: true, // js资源加载失败
ERROR_STYLE: true, // css资源加载失败
ERROR_IMAGE: true, // 图片资源加载失败
ERROR_AUDIO: true, // 音频资源加载失败
ERROR_VIDEO: true, // 视频资源加载失败
ERROR_CONSOLE: true, // vue运行时报错
ERROR_TRY_CATCH: true, // 未catch错误
// 自定义检测函数, 上报前最后判断是否需要报告该错误
// 回调函数说明
// 传入参数 =>
// desc: 字符串, 错误描述
// stack: 字符串, 错误堆栈信息
// 返回值 =>
// true : 上报打点请求
// false : 不需要上报
checkErrrorNeedReport: function (desc, stack) {
return true
}
}
},
// 业务方的js版本号, 会随着打点数据一起上传, 方便区分数据来源
// 可以不填, 默认为1.0.0
version: '1.0.0',
// 对于如同
// test.com/detail/1.html
// test.com/detail/2.html
// test.com/detail/3.html
// ...
// 这种页面来说, 虽然url不同, 但他们本质上是同一个页面
// 因此需要业务方传入一个处理函数, 根据当前url解析出真实的页面类型(例如: 二手房列表/经纪人详情页), 以便系统对错误来源进行分类
// 回调函数说明
// 传入参数 => window.location
// 返回值 => 对应的的页面类型(50字以内, 建议返回汉字, 方便查看), 默认是返回当前页面的url
getPageType: function (location) {
return `${location.host}${location.pathname}`
}
})script 标签引入 =>
<script>
window.dt &&
dt.set({
pid: 'project_id', // [必填]项目id, 由项目组统一分配
uuid: '', // [可选]设备唯一id, 用于计算uv数&设备分布. 一般在cookie中可以取到, 没有uuid可用设备mac/idfa/imei替代. 或者在storage的key中存入随机数字, 模拟设备唯一id.
ucid: '', // [可选]用户ucid, 用于发生异常时追踪用户信息, 一般在cookie中可以取到, 没有可传空字符串
is_test: false, // 是否为测试数据, 默认为false(测试模式下打点数据仅供浏览, 不会展示在系统中)
record: {
time_on_page: true, // 是否监控用户在线时长数据, 默认为true
performance: true, // 是否监控页面载入性能, 默认为true
js_error: true, // 是否监控页面报错信息, 默认为true
// 配置需要监控的页面报错类别, 仅在js_error为true时生效, 默认均为true(可以将配置改为false, 以屏蔽不需要上报的错误类别)
js_error_report_config: {
ERROR_RUNTIME: true, // js运行时报错
ERROR_SCRIPT: true, // js资源加载失败
ERROR_STYLE: true, // css资源加载失败
ERROR_IMAGE: true, // 图片资源加载失败
ERROR_AUDIO: true, // 音频资源加载失败
ERROR_VIDEO: true, // 视频资源加载失败
ERROR_CONSOLE: true, // vue运行时报错
ERROR_TRY_CATCH: true, // 未catch错误
// 自定义检测函数, 上报前最后判断是否需要报告该错误
// 回调函数说明
// 传入参数 =>
// desc: 字符串, 错误描述
// stack: 字符串, 错误堆栈信息
// 返回值 =>
// true : 上报打点请求
// false : 不需要上报
checkErrrorNeedReport: function (desc, stack) {
return true
}
}
},
// 业务方的js版本号, 会随着打点数据一起上传, 方便区分数据来源
// 可以不填, 默认为1.0.0
version: '1.0.0',
// 对于如同
// test.com/detail/1.html
// test.com/detail/2.html
// test.com/detail/3.html
// ...
// 这种页面来说, 虽然url不同, 但他们本质上是同一个页面
// 因此需要业务方传入一个处理函数, 根据当前url解析出真实的页面类型(例如: 二手房列表/经纪人详情页), 以便系统对错误来源进行分类
// 回调函数说明
// 传入参数 => window.location
// 返回值 => 对应的的页面类型(50字以内, 建议返回汉字, 方便查看), 默认是返回当前页面的url
getPageType: function (location) {
return `${location.host}${location.pathname}`
}
})
</script>自动错误监控使用说明
浏览器中对脚本报错信息有跨域限制, 通过标签引入 js 时, 需要在所有要监控的 script 标签中添加 crossorigin="anonymous" 属性后, 才能获取到错误堆栈数据, 否则只能看到Script error的提示
有些项目用域名到 CDN 的脚本资源不同域，造成不同域的脚本报错无法捕获更多详细信息
解决： @vue/cli 脚手架项目 配置 vue.config.js
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
// 入口模块与splitChunks模块
crossorigin: 'anonymous',
chainWebpack: (config) => {
// 异步模块
config.output.crossOriginLoading('anonymous');
},
});
webpack 项目 配置 webpack.config.js
const CorsPlugin = require('@vue/cli-service/lib/webpack/CorsPlugin.js');
module.exports = {
output: {
// 异步模块
crossOriginLoading: 'anonymous',
},
plugins: [
new CorsPlugin({
publicPath: '项目的publicPath',
crossorigin: 'anonymous',
integrity: false,
}),
],
};主动打点方法说明
产品指标
/**
* 用户点击行为上报，用于统计菜单点击量
* @param {String} clickBehavior [必填]用户行为标识符, 用于统计菜单点击量 , 最多50字符( menu/click/button/...)
* @param {String} name [必填]用户行为名称, 和clickBehavior对应, 用于展示, 建议传中文, 最多50字符
* @param {String} url [可选]用户点击页面url, 可以作为辅助信息, 最多200字符
*/
dt.behavior(clickBehaviorType, name, url)
//demo:
dt.behavior(
'/abnormal_monitor/error_dashboard',
'-页面性能',
window.location.href
)
/**
* JS错误主动上报接口
* @param {String} errorName 错误类型, 推荐格式 => "错误类型(中文)_${具体错误名}", 最长200字
* @param {String} url 错误对应的url, location.host + location.pathname, 不包括get参数(get参数可以转成json后放在detail中), 最长200个字
* @param {Object} extraInfo 附属信息, 默认为空对象
* => extraInfo 中以下字段填写后可以在后台错误日志列表中直接展示
* => trace_url // [String]请求对应的trace系统查看地址, 例如: trace系统url + trace_id
* => http_code // [Number]接口响应的Http状态码，
* => during_ms // [Number]接口响应时长(毫秒)
* => request_size_b // [Number]post参数体积, 单位b
* => response_size_b // [Number]响应值体积, 单位b
* => 其余字段会作为补充信息进行展示
*/
function notify (errorName = '', url = '', extraInfo = {})
// demo：
dt.notify(
'response code', // 错误名, 不能超过200个字符
'a.b.com', // url地址, 不能超过200个字符
{
// 下列字段填写后会被统一展示
'trace_url':'trace.test.com/123456',
'http_code':200,
'during_ms':10,
'request_size_b':1024,
'response_size_b':1024,
// 以下字段作为补充说明进行展示
... // 任意 key => value
})如何确认埋点成功？
通过 Chrome 或 Charles 等工具拦截 URL 为https://test/dsfunny.gif开头的网络请求,查看请求参数是否携带埋点信息
例如这个 URL: 点我
对应打点信息为
d: {
"type": "error",
"code": 3,
"detail": {
"error_no": 122,
"http_code": "",
"during_ms": "",
"url": "a.b.c",
"request_size_b": "",
"response_size_b": "",
"reason": "ERR_BLOCKED_BY_CLIENT"
},
"extra": {},
"common": {
"pid": "platfe",
"uuid": "f770330d-b2c7-4bfa-94fb-b31338f65a85",
"ssid": "df9c0245-005d-479c-81e0-7daa94c0681d",
"ucid": 1000000023100106,
"timestamp": 1537431733127
},
"msg": ""
}