whitch-frontend-monitor
Version:
前端监控系统 - 一个轻量级的前端监控SDK
260 lines • 11.1 kB
JavaScript
;
/**
* 性能监控模块
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.PerformanceMonitor = void 0;
var reporter_1 = require("../reporter");
var PerformanceMonitor = /** @class */ (function () {
function PerformanceMonitor() {
}
/**
* 初始化性能监控
*/
PerformanceMonitor.init = function () {
var _a, _b;
// 获取已初始化的Reporter实例
if (!((_b = (_a = window.TraeMonitor) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.reportUrl)) {
console.warn('Reporter URL is not configured');
return;
}
this.reporter = reporter_1.Reporter.getInstance(window.TraeMonitor.config);
this.initPagePerformance();
this.initResourcePerformance();
this.initWebVitals();
};
/**
* 监控页面性能指标
*/
PerformanceMonitor.initPagePerformance = function () {
var _this = this;
window.addEventListener('load', function () {
setTimeout(function () {
var timing = performance.timing;
var pagePerf = {
dns: timing.domainLookupEnd - timing.domainLookupStart,
tcp: timing.connectEnd - timing.connectStart,
ttfb: timing.responseStart - timing.requestStart,
download: timing.responseEnd - timing.responseStart,
domParse: timing.domInteractive - timing.responseEnd,
dcl: timing.domContentLoadedEventEnd - timing.navigationStart,
load: timing.loadEventEnd - timing.navigationStart,
fcp: 0,
lcp: 0,
fid: 0,
cls: 0
};
Object.entries(pagePerf).forEach(function (_a) {
var key = _a[0], value = _a[1];
var perfInfo = {
type: "page_".concat(key),
value: value,
timestamp: Date.now(),
pageUrl: window.location.href,
pageInfo: {
title: document.title,
path: window.location.pathname,
loadTime: timing.navigationStart,
referrer: document.referrer
}
};
_this.performanceList.push(perfInfo);
// 添加到上报队列
_this.reporter.addToQueue({
type: 'performance',
data: perfInfo,
timestamp: Date.now()
});
});
}, 0);
});
};
PerformanceMonitor.initResourcePerformance = function () {
var _this = this;
var observer = new PerformanceObserver(function (list) {
var entries = list.getEntries();
entries.forEach(function (entry) {
if (entry.entryType === 'resource') {
var resourceEntry = entry;
var perfInfo = {
type: 'resource',
value: entry.duration,
timestamp: Date.now(),
pageUrl: window.location.href,
pageInfo: {
title: document.title,
path: window.location.pathname,
referrer: document.referrer
},
metadata: {
name: entry.name,
initiatorType: resourceEntry.initiatorType,
size: resourceEntry.transferSize,
protocol: resourceEntry.nextHopProtocol,
dnsTime: resourceEntry.domainLookupEnd - resourceEntry.domainLookupStart,
tcpTime: resourceEntry.connectEnd - resourceEntry.connectStart,
sslTime: resourceEntry.secureConnectionStart > 0 ? resourceEntry.connectEnd - resourceEntry.secureConnectionStart : 0,
ttfb: resourceEntry.responseStart - resourceEntry.requestStart,
downloadTime: resourceEntry.responseEnd - resourceEntry.responseStart,
decodedBodySize: resourceEntry.decodedBodySize,
encodedBodySize: resourceEntry.encodedBodySize
}
};
_this.performanceList.push(perfInfo);
// 添加到上报队列
_this.reporter.addToQueue({
type: 'performance',
data: perfInfo,
timestamp: Date.now()
});
}
});
});
observer.observe({ entryTypes: ['resource'] });
};
PerformanceMonitor.initWebVitals = function () {
var _this = this;
// First Contentful Paint
var fcpObserver = new PerformanceObserver(function (list) {
var entries = list.getEntries();
entries.forEach(function (entry) {
if (entry.name === 'first-contentful-paint') {
var perfInfo = {
type: 'web_vitals_fcp',
value: entry.startTime,
timestamp: Date.now(),
pageUrl: window.location.href,
pageInfo: {
title: document.title,
path: window.location.pathname,
referrer: document.referrer
},
};
_this.performanceList.push(perfInfo);
// 添加到上报队列
_this.reporter.addToQueue({
type: 'performance',
data: perfInfo,
timestamp: Date.now()
});
}
});
});
fcpObserver.observe({ entryTypes: ['paint'] });
// Largest Contentful Paint
var lcpObserver = new PerformanceObserver(function (list) {
var entries = list.getEntries();
entries.forEach(function (entry) {
var perfInfo = {
type: 'web_vitals_lcp',
value: entry.startTime,
timestamp: Date.now(),
pageUrl: window.location.href,
pageInfo: {
title: document.title,
path: window.location.pathname,
referrer: document.referrer
},
};
_this.performanceList.push(perfInfo);
// 添加到上报队列
_this.reporter.addToQueue({
type: 'performance',
data: perfInfo,
timestamp: Date.now()
});
});
});
lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });
// First Input Delay
var fidObserver = new PerformanceObserver(function (list) {
var entries = list.getEntries();
entries.forEach(function (entry) {
var perfInfo = {
type: 'web_vitals_fid',
value: entry.duration,
timestamp: Date.now(),
pageUrl: window.location.href,
pageInfo: {
title: document.title,
path: window.location.pathname,
referrer: document.referrer
},
};
_this.performanceList.push(perfInfo);
// 添加到上报队列
_this.reporter.addToQueue({
type: 'performance',
data: perfInfo,
timestamp: Date.now()
});
});
});
fidObserver.observe({ entryTypes: ['first-input'] });
// Cumulative Layout Shift
var clsValue = 0;
var clsEntries = [];
var clsObserver = new PerformanceObserver(function (list) {
var entries = list.getEntries();
entries.forEach(function (entry) {
if (!entry.hadRecentInput) {
var firstSessionEntry = clsEntries[0];
var lastSessionEntry = clsEntries[clsEntries.length - 1];
// 如果距离上一次偏移超过1秒或这是第一次偏移，开始新的会话
if (!firstSessionEntry ||
entry.startTime - lastSessionEntry.startTime >= 1000 ||
entry.startTime - firstSessionEntry.startTime >= 5000) {
clsEntries = [entry];
}
else {
clsEntries.push(entry);
}
// 计算当前会话的CLS值
var sessionValue_1 = 0;
clsEntries.forEach(function (e) {
sessionValue_1 += e.value;
});
// 更新最大会话值
if (sessionValue_1 > clsValue) {
clsValue = sessionValue_1;
var perfInfo = {
type: 'web_vitals_cls',
value: clsValue,
timestamp: Date.now(),
pageUrl: window.location.href,
pageInfo: {
title: document.title,
path: window.location.pathname,
referrer: document.referrer
},
};
_this.performanceList.push(perfInfo);
// 添加到上报队列
_this.reporter.addToQueue({
type: 'performance',
data: perfInfo,
timestamp: Date.now()
});
}
}
});
});
clsObserver.observe({ entryTypes: ['layout-shift'] });
};
/**
* 获取收集到的性能数据
*/
PerformanceMonitor.getPerformanceData = function () {
return this.performanceList;
};
/**
* 清空性能数据
*/
PerformanceMonitor.clearPerformanceData = function () {
this.performanceList = [];
};
PerformanceMonitor.performanceList = [];
return PerformanceMonitor;
}());
exports.PerformanceMonitor = PerformanceMonitor;
//# sourceMappingURL=performance.js.map