docs: 可回溯系统前端封装程序包

2026-07-22 07:08:37 +08:00
parent 0cc4b691de
commit 612d69e691
1 changed files with 189 additions and 0 deletions
@@ -0,0 +1,189 @@
+import {
+	default as Record
+} from "./record.js"; // record, pack
+import request from './request.js'
+const {
+	record,
+	pack,
+	unpack,
+	Replayer
+} = Record;
+
+window.TracePlugin = {
+	endOrNot: true,
+	uniqueNo: null,
+	traceId: null,
+	appKey: null,
+	productCode: null,
+	productName: null,
+	module: null,
+	content: null,
+	events: [],
+	replayer: null,
+	/**
+	 * 开始录制函数
+	 * uniqueNo 订单唯一标识，非必传
+	 * extra    订单额外参数，非必传
+	 */
+	start: function(uniqueNo = null, extra = {}) {
+		window.TracePlugin.traceId = null;
+		window.TracePlugin.endOrNot = false;
+		if (window.stopFn) {
+			window.stopFn();
+			window.stopFn = null;
+		}
+		window.stopFn = record({
+			emit(event) {
+				window.TracePlugin.appKey = extra.appKey;
+				window.TracePlugin.productCode = extra.productCode;
+				window.TracePlugin.productName = extra.productName;
+				window.TracePlugin.module = extra.module;
+				window.TracePlugin.content = extra.content;
+				window.TracePlugin.uniqueNo = uniqueNo;
+				if (!window.TracePlugin.endOrNot) {
+					window.TracePlugin.events.push(event);
+					if (window.TracePlugin.events.length === 100) {
+						window.TracePlugin.stop(uniqueNo);
+						window.TracePlugin.endOrNot = false;
+						window.TracePlugin.events = [];
+					}
+				}
+			},
+			packFn: pack,
+			sampling: {
+				// 定义不录制的鼠标交互事件类型，可以细粒度的开启或关闭对应交互录制
+				mouseInteraction: {
+					MouseUp: false,
+					MouseDown: false,
+					Click: true,
+					ContextMenu: false,
+					DblClick: false,
+					Focus: true,
+					Blur: true,
+					TouchStart: true,
+					TouchEnd: true,
+				},
+				mousemove: false,
+				scroll: 150, // 每 150ms 最多触发一次
+				// 设置输入事件的录制时机
+				input: "last", // 连续输入时，只录制最终值
+			},
+			recordCanvas: true, //支持录制canvas
+		});
+	},
+	/**
+	 * 暂停录制函数
+	 * uniqueNo 订单唯一标识，必传
+	 * callback 录制成功后回调函数，非必传
+	 * fail     录制失败后回调函数，非必传
+	 */
+	stop: async function(uniqueNo, callback, fail) {
+		// 压缩、入库、重置事件库、唯一标识
+		window.TracePlugin.uniqueNo = uniqueNo;
+		// 事件数超过100则分割
+		let len = Math.ceil(window.TracePlugin.events.length / 100)
+		let save = async (events) => {
+			try {
+				const res = await request({
+					url: '/track/save',
+					method: 'post',
+					data: {
+						traceId: window.TracePlugin.traceId,
+						last: false,
+						orderId: uniqueNo,
+						appKey: window.TracePlugin.appKey,
+						productCode: window.TracePlugin.productCode,
+						productName: window.TracePlugin.productName,
+						module: window.TracePlugin.module,
+						content: window.TracePlugin.content,
+						events: events
+					}
+				})
+				const {
+					code,
+					data
+				} = res
+				if (code === 200 && data) {
+					const {
+						traceId
+					} = data
+					window.TracePlugin.traceId = traceId;
+				}
+			} catch (e) {
+				console.log(e)
+				fail && fail(window.TracePlugin.traceId)
+			}
+		}
+		let timer = null;
+		for (let i = 0; i < len; i++) {
+			let events = window.TracePlugin.events.slice(i * 100, i === len - 1 ? window.TracePlugin.events
+				.length : 100)
+			timer && window.clearTimeout(timer);
+			timer = setTimeout(async function() {
+				await save(events);
+			}, 200);
+		}
+		window.TracePlugin.events = [];
+		callback && callback(window.TracePlugin.traceId);
+		window.TracePlugin.endOrNot = true;
+		return JSON.stringify(window.TracePlugin.events);
+	},
+	/**
+	 * 结束录制函数
+	 * uniqueNo 订单唯一标识，必传
+	 * callback 录制成功后回调函数，非必传
+	 * fail     录制失败后回调函数，非必传
+	 */
+	end: async function(uniqueNo, callback, fail) {
+		if (window.stopFn) {
+			window.stopFn();
+			window.stopFn = null;
+		}
+		// 压缩、入库、重置事件库、唯一标识
+		window.TracePlugin.uniqueNo = uniqueNo
+		// 事件数超过100则分割
+		let len = Math.ceil(window.TracePlugin.events.length / 100)
+		let save = async (events) => {
+			try {
+				const res = await request({
+					url: '/track/save',
+					method: 'post',
+					data: {
+						traceId: window.TracePlugin.traceId,
+						last: true,
+						orderId: uniqueNo,
+						appKey: window.TracePlugin.appKey,
+						productCode: window.TracePlugin.productCode,
+						productName: window.TracePlugin.productName,
+						module: window.TracePlugin.module,
+						content: window.TracePlugin.content,
+						events: events
+					}
+				})
+				const {
+					code
+				} = res
+				if (code === 200) {
+					window.TracePlugin.traceId = null;
+				}
+			} catch (e) {
+				console.log(e)
+				fail && fail(window.TracePlugin.traceId)
+			}
+		}
+		let timer = null;
+		for (let i = 0; i < len; i++) {
+			let events = window.TracePlugin.events.slice(i * 100, i === len - 1 ? window.TracePlugin.events
+				.length -
+				i * 100 : 100)
+			timer && window.clearTimeout(timer);
+			timer = setTimeout(async function() {
+				await save(events);
+			}, 200);
+		}
+		window.TracePlugin.events = [];
+		callback && callback(window.TracePlugin.traceId)
+		window.TracePlugin.endOrNot = true;
+		return JSON.stringify(window.TracePlugin.events);
+	}
+};