whitch-frontend-monitor
Version:
前端监控系统 - 一个轻量级的前端监控SDK
206 lines • 7.71 kB
JavaScript
;
/**
* 用户行为监控模块
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.BehaviorMonitor = void 0;
var reporter_1 = require("../reporter");
var BehaviorMonitor = /** @class */ (function () {
function BehaviorMonitor() {
}
/**
* 初始化行为监控
*/
BehaviorMonitor.init = function () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
// 获取已初始化的Reporter实例
var reportConfig = {
reportUrl: ((_b = (_a = window.TraeMonitor) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.reportUrl) || '',
delay: ((_d = (_c = window.TraeMonitor) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.delay) || 1000,
maxRetry: ((_f = (_e = window.TraeMonitor) === null || _e === void 0 ? void 0 : _e.config) === null || _f === void 0 ? void 0 : _f.maxRetry) || 3,
sampleRate: ((_h = (_g = window.TraeMonitor) === null || _g === void 0 ? void 0 : _g.config) === null || _h === void 0 ? void 0 : _h.sampleRate) || 1,
ignoreUrls: ((_k = (_j = window.TraeMonitor) === null || _j === void 0 ? void 0 : _j.config) === null || _k === void 0 ? void 0 : _k.ignoreUrls) || [],
compression: ((_m = (_l = window.TraeMonitor) === null || _l === void 0 ? void 0 : _l.config) === null || _m === void 0 ? void 0 : _m.compression) || false
};
if (!reportConfig.reportUrl) {
console.warn('Reporter URL is not configured');
return;
}
this.reporter = reporter_1.Reporter.getInstance(reportConfig);
this.initClickMonitor();
this.initRouteMonitor();
this.initConsoleMonitor();
};
/**
* 监控点击事件
*/
BehaviorMonitor.initClickMonitor = function () {
var _this = this;
window.addEventListener('click', function (event) {
var _a;
var target = event.target;
var behavior = {
type: 'click',
target: _this.getElementPath(target),
pageUrl: window.location.href,
timestamp: Date.now(),
metadata: {
className: target.className,
tagName: target.tagName.toLowerCase(),
text: (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim()
}
};
_this.behaviorList.push(behavior);
// 添加到上报队列
_this.reporter.addToQueue({
type: 'behavior',
data: behavior,
timestamp: Date.now()
});
}, true);
};
/**
* 监控路由变化
*/
BehaviorMonitor.initRouteMonitor = function () {
var _this = this;
// 监听 history 路由变化
var originalPushState = history.pushState;
var originalReplaceState = history.replaceState;
history.pushState = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var behavior = {
type: 'route',
pageUrl: window.location.href,
timestamp: Date.now(),
metadata: { method: 'pushState' }
};
BehaviorMonitor.behaviorList.push(behavior);
// 添加到上报队列
BehaviorMonitor.reporter.addToQueue({
type: 'behavior',
data: behavior,
timestamp: Date.now()
});
return originalPushState.apply(this, args);
};
history.replaceState = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var behavior = {
type: 'route',
pageUrl: window.location.href,
timestamp: Date.now(),
metadata: { method: 'replaceState' }
};
BehaviorMonitor.behaviorList.push(behavior);
// 添加到上报队列
BehaviorMonitor.reporter.addToQueue({
type: 'behavior',
data: behavior,
timestamp: Date.now()
});
return originalReplaceState.apply(this, args);
};
// 监听 hash 路由变化
window.addEventListener('hashchange', function () {
var behavior = {
type: 'route',
pageUrl: window.location.href,
timestamp: Date.now(),
metadata: { method: 'hashchange' }
};
_this.behaviorList.push(behavior);
// 添加到上报队列
_this.reporter.addToQueue({
type: 'behavior',
data: behavior,
timestamp: Date.now()
});
});
};
/**
* 监控控制台输出
*/
BehaviorMonitor.initConsoleMonitor = function () {
var _this = this;
var methods = ['log', 'info', 'warn', 'error'];
methods.forEach(function (method) {
var original = console[method];
console[method] = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var behavior = {
type: 'console',
pageUrl: window.location.href,
timestamp: Date.now(),
metadata: {
method: method,
arguments: args
}
};
_this.behaviorList.push(behavior);
// 添加到上报队列
_this.reporter.addToQueue({
type: 'behavior',
data: behavior,
timestamp: Date.now()
});
original.apply(console, args);
};
});
};
/**
* 获取元素的CSS选择器路径
*/
BehaviorMonitor.getElementPath = function (element) {
var path = [];
var current = element;
while (current && current !== document.body) {
var selector = current.tagName.toLowerCase();
if (current.id) {
selector += "#".concat(current.id);
path.unshift(selector);
break;
}
else {
var sibling = current;
var nth = 1;
while (sibling = sibling.previousElementSibling) {
if (sibling.tagName === current.tagName)
nth++;
}
if (nth !== 1)
selector += ":nth-of-type(".concat(nth, ")");
}
path.unshift(selector);
current = (current === null || current === void 0 ? void 0 : current.parentElement) || null;
if (!current)
break;
}
return path.join(' > ');
};
/**
* 获取收集到的用户行为数据
*/
BehaviorMonitor.getBehaviors = function () {
return this.behaviorList;
};
/**
* 清空用户行为数据
*/
BehaviorMonitor.clearBehaviors = function () {
this.behaviorList = [];
};
BehaviorMonitor.behaviorList = [];
return BehaviorMonitor;
}());
exports.BehaviorMonitor = BehaviorMonitor;
//# sourceMappingURL=behavior.js.map