fast-tracker-browser

天眼FAST探针（Browser）

安装

使用Yarn进行安装（推荐）

yarn add fast-tracker-browser

使用npm进行安装

npm install fast-tracker-browser

使用

建议登录天眼平台按照前端应用接入指引使用

如对该工具比较熟悉，可自行进行配置，请在应用程序入口添加以下代码

// 引入探针
import fastTracker from 'fast-tracker-browser';
// 引入配置文件
import fastTrackerConfig from '这里需要自行创建一个JSON配置文件 可从天眼平台数据接入功能中下载';

// 使用配置执行探针初始化
fastTracker(config);

JSON配置文件内容 其中endpoint、logstore、app、replay.endpoint、replay.logstore均会在下载的配置文件中默认填写

{
	"endpoint": "{天眼日志服务数据上报接口域名}",
	"logstore": "{在天眼平台创建的产品下的前端日志库密钥}",
	"enable": 1,
	"app": "{数据接入中创建的应用名称}",
	"is_spa": true,
	"include_search": true,
	"log_content_attribute": "data-log",
	"log_event_attribute": "data-event",
	"log_module_attribute": "data-module",
	"report_api_params": false,
	"api_ignore_urls": [],
	"api_url_regx": "",
	"ignore_pages": [],
	"capture_type": 0,
	"collect_event_types": ["event","page","click","api","error","crash"],
	"tenant_reader": {
		"key": "",
		"range": ["url","localstorage","sessionstorage","cookie","window"]
	},
	"real_user_reader": {
		"key": "",
		"range": ["url","localstorage","sessionstorage","cookie","window"]
	},
	"user_group_reader": {
		"key": "",
		"range": ["url","localstorage","sessionstorage","cookie","window"]
	},
	"app_version_reader": {
		"key": "",
		"range": ["url","localstorage","sessionstorage","cookie","window"]
	},
	"trace_config": {
		"tid_type": "fast",
		"rules": [],
		"headers": []
	},
	"replay": {
		"endpoint": "{MFastLog的数据上传接口}",
		"logstore": "{回放数据日志库密钥}",
		"error": false,
		"crash": false,
		"all": false
	}
}

探针配置清单

配置项	配置描述	是否必填	默认值	说明	配置示例
endpoint	探针上报地址	是	无	在天眼平台下载的配置会自动注入当前所属产品前端日志库的上报地址	"https://fast-logstore-test.mypaas.com/report"
logstore	探针上报KEY	是	无	在天眼平台下载的配置会自动注入当前所属产品前端日志库的标识KEY	"P5Nn2BVv2gEbR8CspaRoFn0nvVWVCRmYMilZ5sHl1UX_k8kLRAPgf3t6kZLaWoFa="
enable	是否启用日志上报	否	1	是否允许日志调用endpoint进行上报（仅在部分私有化环境中因客户特殊需求使用）	1
app	应用名称	否	无	在天眼平台下载的配置中会自动注入创建应用时填写的名称	"analysis"
include_search	开启页面地址参数采集	否	true	开启后将页面URL的参数（search）部分上报为page_search字段	true
ignore_pages	按页面禁用日志采集	否	[]	将屏蔽配置的列表中匹配到的页面的所有事件采集	["/login","/admin"]
capture_type	处于iframe时透传页面加载日志	否	0	0：不透传 1：父级 2：顶级	1
tenant_reader	租户读取	否	{key: "",range:["url","localstorage","sessionstorage","cookie","window"]}	根据配置的key在range指定的范围内按先后顺序读取作为tenant字段上报	{key:"org_code",range:["localstorage"]}
real_user_reader	用户读取	否	{key: "",range:["url","localstorage","sessionstorage","cookie","window"]}	根据配置的key在range指定的范围内按先后顺序读取作为real_user_id字段上报	{key:"userinfo.code",range:["localstorage"]}
user_group_reader	用户分组读取	否	{key: "",range:["url","localstorage","sessionstorage","cookie","window"]}	根据配置的key在range指定的范围内按先后顺序读取作为user_group字段上报	{key:"userinfo.role",range:["localstorage"]}
app_version_reader	应用版本读取	否	{key: "",range:["url","localstorage","sessionstorage","cookie","window"]}	根据配置的key在range指定的范围内按先后顺序读取作为app_version字段上报	{key:"version",range:["window"]}
log_event_attribute	申明式埋点事件名称属性名称	否	data-event	click事件中指定作为event字段上报的由DOM读取的属性名，仅当DOM上原有的自定义属性占用了默认值时才修改	data-eventname
log_content_attribute	申明式埋点事件内容属性名称	否	data-log	click事件中指定作为logs字段上报的由DOM读取的属性名，仅当DOM上原有的自定义属性占用了默认值时才修改	data-content
log_module_attribute	申明式埋点事件模块属性名称	否	data-module	click事件中指定作为module字段上报的由DOM读取的属性名，仅当DOM上原有的自定义属性占用了默认值时才修改	data-mod
collect_event_types	采集事件类型	否	["page","api","click","error","crash","event"]	按照事件类型指定需要采集的日志	["page","api"]
is_spa	开启单页应用页面切换采集	否	true	开启后将增加history.pushState、history.replaceState、hashchange事件、popstate事件的监听，用于单页应用路由切换监听	true
report_api_params	开启API调用参数采集	否	false	开启后将开始采集api的参数，包含querystring以及requestbody部分	true
api_url_regx	API截取正则	否	""	将正则匹配到的部分（如存在捕获串则取第一个捕获串）替换到API日志的tags.api字段中	"(?=index\\.php).*r=(.*?)&"
api_ignore_urls	忽略采集的API地址	否	[]	列表中匹配到的API地址不采集API日志，默认屏蔽endpoint以及其他同类产品的采集请求	["fast.mypaas.com/api/log"]
trace_config	打通前后端调用链路	否	{tid_type: "fast",rules:[],headers:[]}	开启后针对rules中匹配域名的API，将添加headers中的自定义请求头，默认会添加x-fast-trace-id请求头，trace_id的类型支持fast和skywalking两种，详见下方说明	{tid_type:"fast",rules:["fast.mypaas.com"],headers:[{name:"x-fast-uid",type:"built-in",value:"u"}]}
replay	视频回放采集	否	{endpoint:"",logstore:"",error:false,crash:false,all:false}	replay.endpoint：视频回放上报地址 replay.logstore：视频回放上报KEY replay.error：在发生错误时上报错误前一小段时间的视频 replay.crash：与replay.error的机制相同，采集崩溃前的一段视频 replay.all：全量采集回放视频	{endpoint:"",logstore:"",error: true,crash:false,,all:false}
debug	开启调试模式	否	false	目前暂时没有明确作用，不在配置表单中体现	false

关于trace_config的说明

| 配置子项 | 说明 | 默认值 | 示例值 | | :--- | :--- | :--- | | tid_type | 跟踪ID的类型 | fast | skywalking | | rules | 需要进行跟踪的API地址匹配规则 | [] | ['fast.mypaas.com'] | | headers | 需要附加的请求头 | [] | [{name:"x-fast-uid",type:"built-in",value:"u"}] | ​ tid_type可填写fast与skywalking两个值，默认为fast ​

trace_id类型	请求头名称	请求头值示例
fast	x-fast-trace-id	fast-24c02aa0b8c84c0-82cc00d917-6e2e4131_d05c4000fc2e
skywalking	sw8	skywalking的sw8实现

关于capture_type的说明：

1. 当探针在iframe中加载，父级或者顶级的窗口需要获取iframe窗口中的page_load相关日志需配置该选项
2. 配置该选项后，探针一旦触发page_load日志，会向指定的窗口发送page_load日志数据

探针API

API名称	API描述	参数说明
registUser({tenant_code,user_account,user_group})	注册用户信息	所有参数非必填，参数与上报字段对应关系：tenant_code→tenant，user_account→real_user_id，user_group→user_group
setBasicInfo({custom_data,app_version,app_hotupdate_version,globalModule})	设置附加日志内容	custom_data公共附加信息，追加至logs字段中
report(eventName, logs, eventModule, forceMode)	上报埋点日志	eventName事件名称（event字段），logs日志内容（需要JSON OBJECT，追加到logs中），eventModule事件所属模块（module字段），forceMode强制上报模式（0普通，1创建日志后立即异步上报，2创建日志后立即同步上报）
reportError(errorData, extraInfo, module)	上报前端错误	errorData错误对象（需要使用new Error等方式创建），extraInfo错误附加信息（作为logs.extraInfo上报），注意使用该API上报的异常不会收到配置项collect_event_types的控制

版本日志（CDN持续保持最新，以下仅针对npm包）

1.0.1-r19

1. 修复关闭页面、超大日志上报可能会出现重复日志问题
2. page_load事件支持postMessage向外部窗口提供数据订阅
3. 页面加载事件采集重构：将原有的fmp、page_load事件名统一为page_load 详细说明请查看文档
4. 修复探针初始化在DOMContentLoaded之后时首次有效渲染触发的页面加载无法采集的问题
5. 优化fmp算法
6. 补充页面参数和API参数采集时需要屏蔽的敏感信息参数名称
7. 修复产生日志时，没有每次都获取当前document.title的问题

1.0.1-r18

1. 修复FMP对于持续有动画的页面无法触发结算导致内存溢出的问题

1.0.1-r17

1. API:setBasicInfo更新，支持globalModule参数，对于所产生的所有日志，日志自由module > globalModule
2. API:reportError更新，新增module参数
3. 修复对于MFastLog插件的API:setExtraLogs在调用时因参数存在null值导致的异常

1.0.1-r16

1. 支持window.__fastTrackerLogEnv__变量来设置日志归属环境
2. 关闭探针自身的性能日志采集

1.0.1-r15

1. 修复应用热更新版本没有写入到日志字段中的问题
2. 将encodeBase64方法中在字符越界时的Throw Type Error改为输出警告，并返回原字符串，避免探针阻碍应用运行
3. reportError上报不再受collect_event_types配置项控制
4. 移除fmp事件中可能冗余的__fastCurrPage__字段
5. 调整API采集机制，避免可能丢失的API日志（例如删除过ResourceEntry数据时）
6. 确定初始上报env的机制调整为：初始化传参env > window.__fastTrackerEnv__ > "prod"
7. 适配MFastLog-v1.0.7支持识别鸿蒙操作系统
8. 修改webpack配置中output.globalObject为this

1.0.1-r14

1. 修复页面事件触发时机晚于一些页面组件Didmount类声明周期触发的问题
2. 修复触发页面跳转的点击事件晚于页面事件触发的问题
3. 调整时间戳的生成方法

1.0.1-r13

1. 修复api日志中的冗余了tags.regxApiUrl字段的问题

1.0.1-r12

1. 把页面标题加入内部维护的页面参数中，使上报对应的page_title字段与其他（domain、page等）保持一致的更新机制

1.0.1-r11

1. 补充遗漏的navigator.connection.type为cellular的判断
2. 补充有网模式下进行的MFastLog.startUploadLog调用，以保障断网场景下产生的文件被上传

1.0.1-r9

1. 增加enable配置项，用于控制是否启用日志上报（某些私有化部署不允许上报日志）
2. 增加API:setEnable，用于设置enable配置项
3. 支持api_url_regx，用于截取API地址

1.0.1-r8

1. 外部订阅数据补充env字段
2. 修复是否调用MFastLog写入日志的网络状态属性读取错误

1.0.1-r7

1. 移除domain字段中的协议部分
2. 限制每2分钟调用一次MFastLog.startUploadLog，避免插件调用过频
3. 限制仅wifi及4g以下的网络使用MFastLog写入和上报日志

1.0.1-r5

1. 重写page事件的逻辑，避免日志上报在错误的当前页

1.0.1-r4

1. 修复在没有replay.logstore时replay.endpoint被丢弃的问题
2. 新增trace_config.tid_type配置项，用于设置trace_id的模式，支持fast（默认）和skywalking两种模式

1.0.1

1. 修复传递给MFastLog插件的endpoint缺少env参数的问题
2. 修复回放日志上报endpoint缺少env参数的问题
3. 修复fetch方法传递通过Headers构造的请求头参数时在添加trace-id请求头后原请求头丢失的问题

1.0.0

1. 适配天眼3.0新的日志结构
2. 对接天眼3.0日志服务
3. 适配新的Cordova插件MFastLog
4. 修复在页面LOAD事件触发前使用Image上报导致页面LOAD事件被推迟的问题