工程化与框架系列（36）--前端监控告警实践

前端监控告警实践 🔔

引言

前端监控是保障应用质量和用户体验的重要手段。本文将深入探讨前端监控的实现方案，包括性能监控、错误监控、用户行为监控等方面，以及相应的告警机制。

监控系统概述

前端监控系统主要包括以下方面：

• 性能监控：页面加载、资源加载、接口性能等
• 错误监控：JS错误、接口错误、资源加载错误等
• 用户行为：PV/UV、点击行为、路由变化等
• 业务监控：转化率、留存率、业务指标等
• 告警系统：规则配置、通知分发、告警处理等

监控系统实现

监控管理器

// 监控管理器类
class MonitoringManager {private static instance: MonitoringManager;private config: MonitorConfig;private collectors: Map<string, Collector>;private processors: Map<string, Processor>;private reporters: Map<string, Reporter>;private alerter: Alerter;private constructor() {this.collectors = new Map();this.processors = new Map();this.reporters = new Map();this.config = {appId: '',userId: '',sessionId: '',environment: 'production',version: '1.0.0',sampling: 100};}// 获取单例实例static getInstance(): MonitoringManager {if (!MonitoringManager.instance) {MonitoringManager.instance = new MonitoringManager();}return MonitoringManager.instance;}// 初始化监控系统init(config: MonitorConfig): void {this.config = { ...this.config, ...config };// 初始化收集器this.initCollectors();// 初始化处理器this.initProcessors();// 初始化上报器this.initReporters();// 初始化告警器this.initAlerter();// 启动监控this.start();}// 初始化收集器private initCollectors(): void {// 性能收集器this.collectors.set('performance',new PerformanceCollector());// 错误收集器this.collectors.set('error',new ErrorCollector());// 行为收集器this.collectors.set('behavior',new BehaviorCollector());// 业务收集器this.collectors.set('business',new BusinessCollector());}// 初始化处理器private initProcessors(): void {// 性能处理器this.processors.set('performance',new PerformanceProcessor());// 错误处理器this.processors.set('error',new ErrorProcessor());// 行为处理器this.processors.set('behavior',new BehaviorProcessor());// 业务处理器this.processors.set('business',new BusinessProcessor());}// 初始化上报器private initReporters(): void {// HTTP上报器this.reporters.set('http',new HttpReporter(this.config.reportUrl));// 信标上报器this.reporters.set('beacon',new BeaconReporter());// 日志上报器this.reporters.set('log',new LogReporter());}// 初始化告警器private initAlerter(): void {this.alerter = new Alerter({rules: this.config.alertRules,channels: this.config.alertChannels});}// 启动监控private start(): void {// 启动收集器this.collectors.forEach(collector => {collector.start();});// 启动处理器this.processors.forEach(processor => {processor.start();});// 启动上报器this.reporters.forEach(reporter => {reporter.start();});// 启动告警器this.alerter.start();}// 停止监控stop(): void {// 停止收集器this.collectors.forEach(collector => {collector.stop();});// 停止处理器this.processors.forEach(processor => {processor.stop();});// 停止上报器this.reporters.forEach(reporter => {reporter.stop();});// 停止告警器this.alerter.stop();}// 手动上报report(data: MonitorData): void {// 采样判断if (!this.shouldSample()) {return;}// 数据处理const processor = this.processors.get(data.type);if (processor) {data = processor.process(data);}// 数据上报const reporter = this.reporters.get(this.config.reportType);if (reporter) {reporter.report(data);}// 告警检查this.alerter.check(data);}// 采样判断private shouldSample(): boolean {return Math.random() * 100 < this.config.sampling;}
}// 收集器基类
abstract class Collector {protected config: CollectorConfig;protected callback: (data: MonitorData) => void;constructor(config: CollectorConfig) {this.config = config;}setCallback(callback: (data: MonitorData) => void): void {this.callback = callback;}abstract start(): void;abstract stop(): void;
}// 性能收集器
class PerformanceCollector extends Collector {private observer: PerformanceObserver | null = null;start(): void {// 收集性能指标this.collectMetrics();// 观察性能事件this.observePerformance();}stop(): void {this.observer?.disconnect();this.observer = null;}private collectMetrics(): void {// 收集导航计时const navigation = performance.getEntriesByType('navigation')[0];this.callback?.({type: 'performance',subType: 'navigation',data: navigation});// 收集资源计时const resources = performance.getEntriesByType('resource');resources.forEach(resource => {this.callback?.({type: 'performance',subType: 'resource',data: resource});});// 收集First Paintconst paint = performance.getEntriesByType('paint');paint.forEach(entry => {this.callback?.({type: 'performance',subType: 'paint',data: entry});});}private observePerformance(): void {this.observer = new PerformanceObserver(list => {list.getEntries().forEach(entry => {this.callback?.({type: 'performance',subType: entry.entryType,data: entry});});});// 观察的性能指标类型this.observer.observe({entryTypes: ['navigation','resource','paint','largest-contentful-paint','first-input','layout-shift']});}
}// 错误收集器
class ErrorCollector extends Collector {private errorHandler: (event: ErrorEvent) => void;private unhandledRejectionHandler: (event: PromiseRejectionEvent) => void;start(): void {// 监听JS错误this.errorHandler = (event: ErrorEvent) => {this.callback?.({type: 'error',subType: 'javascript',data: {message: event.message,filename: event.filename,lineno: event.lineno,colno: event.colno,error: event.error}});};window.addEventListener('error', this.errorHandler);// 监听Promise错误this.unhandledRejectionHandler = (event: PromiseRejectionEvent) => {this.callback?.({type: 'error',subType: 'promise',data: {reason: event.reason}});};window.addEventListener('unhandledrejection',this.unhandledRejectionHandler);}stop(): void {window.removeEventListener('error', this.errorHandler);window.removeEventListener('unhandledrejection',this.unhandledRejectionHandler);}
}// 行为收集器
class BehaviorCollector extends Collector {private clickHandler: (event: MouseEvent) => void;private routeHandler: () => void;start(): void {// 监听点击事件this.clickHandler = (event: MouseEvent) => {const target = event.target as HTMLElement;this.callback?.({type: 'behavior',subType: 'click',data: {path: this.getElementPath(target),timestamp: Date.now()}});};document.addEventListener('click', this.clickHandler);// 监听路由变化this.routeHandler = () => {this.callback?.({type: 'behavior',subType: 'route',data: {path: location.pathname,timestamp: Date.now()}});};window.addEventListener('popstate', this.routeHandler);}stop(): void {document.removeEventListener('click', this.clickHandler);window.removeEventListener('popstate', this.routeHandler);}private getElementPath(element: HTMLElement): string {const path: string[] = [];let current: HTMLElement | null = element;while (current && current !== document.body) {let selector = current.tagName.toLowerCase();if (current.id) {selector += `#${current.id}`;} else if (current.className) {selector += `.${current.className.split(' ').join('.')}`;}path.unshift(selector);current = current.parentElement;}return path.join(' > ');}
}// 业务收集器
class BusinessCollector extends Collector {private metrics: Map<string, number> = new Map();start(): void {// 定时上报业务指标setInterval(() => {this.reportMetrics();}, this.config.reportInterval);}stop(): void {this.metrics.clear();}// 记录业务指标record(name: string, value: number): void {this.metrics.set(name, value);}private reportMetrics(): void {this.metrics.forEach((value, name) => {this.callback?.({type: 'business',subType: 'metric',data: {name,value,timestamp: Date.now()}});});}
}// 处理器基类
abstract class Processor {protected config: ProcessorConfig;constructor(config: ProcessorConfig) {this.config = config;}abstract start(): void;abstract stop(): void;abstract process(data: MonitorData): MonitorData;
}// 性能处理器
class PerformanceProcessor extends Processor {start(): void {}stop(): void {}process(data: MonitorData): MonitorData {if (data.type !== 'performance') {return data;}// 处理性能数据switch (data.subType) {case 'navigation':return this.processNavigation(data);case 'resource':return this.processResource(data);case 'paint':return this.processPaint(data);default:return data;}}private processNavigation(data: MonitorData): MonitorData {const entry = data.data as PerformanceNavigationTiming;return {...data,data: {dns: entry.domainLookupEnd - entry.domainLookupStart,tcp: entry.connectEnd - entry.connectStart,ttfb: entry.responseStart - entry.requestStart,download: entry.responseEnd - entry.responseStart,domReady: entry.domContentLoadedEventEnd - entry.navigationStart,load: entry.loadEventEnd - entry.navigationStart}};}private processResource(data: MonitorData): MonitorData {const entry = data.data as PerformanceResourceTiming;return {...data,data: {name: entry.name,type: entry.initiatorType,duration: entry.duration,size: entry.transferSize}};}private processPaint(data: MonitorData): MonitorData {const entry = data.data as PerformancePaintTiming;return {...data,data: {name: entry.name,time: entry.startTime}};}
}// 错误处理器
class ErrorProcessor extends Processor {start(): void {}stop(): void {}process(data: MonitorData): MonitorData {if (data.type !== 'error') {return data;}// 处理错误数据return {...data,data: {...data.data,timestamp: Date.now(),url: location.href,userAgent: navigator.userAgent}};}
}// 行为处理器
class BehaviorProcessor extends Processor {start(): void {}stop(): void {}process(data: MonitorData): MonitorData {if (data.type !== 'behavior') {return data;}// 处理行为数据return {...data,data: {...data.data,url: location.href,title: document.title}};}
}// 业务处理器
class BusinessProcessor extends Processor {start(): void {}stop(): void {}process(data: MonitorData): MonitorData {if (data.type !== 'business') {return data;}// 处理业务数据return {...data,data: {...data.data,env: this.config.environment}};}
}// 上报器基类
abstract class Reporter {protected config: ReporterConfig;protected queue: MonitorData[] = [];protected timer: number | null = null;constructor(config: ReporterConfig) {this.config = config;}start(): void {// 定时上报this.timer = window.setInterval(() => {this.flush();}, this.config.flushInterval);}stop(): void {if (this.timer) {clearInterval(this.timer);this.timer = null;}}report(data: MonitorData): void {this.queue.push(data);// 队列满时立即上报if (this.queue.length >= this.config.maxBatchSize) {this.flush();}}protected abstract flush(): void;
}// HTTP上报器
class HttpReporter extends Reporter {protected async flush(): void {if (this.queue.length === 0) {return;}try {const data = this.queue.slice();this.queue = [];await fetch(this.config.url, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(data)});} catch (error) {console.error('Failed to report data:', error);// 失败重试this.queue.push(...data);}}
}// 信标上报器
class BeaconReporter extends Reporter {protected flush(): void {if (this.queue.length === 0) {return;}const data = this.queue.slice();this.queue = [];const blob = new Blob([JSON.stringify(data)],{ type: 'application/json' });navigator.sendBeacon(this.config.url, blob);}
}// 日志上报器
class LogReporter extends Reporter {protected flush(): void {if (this.queue.length === 0) {return;}const data = this.queue.slice();this.queue = [];console.log('Monitor Data:', data);}
}// 告警器
class Alerter {private config: AlertConfig;private rules: Map<string, AlertRule> = new Map();private state: Map<string, AlertState> = new Map();constructor(config: AlertConfig) {this.config = config;}start(): void {// 初始化告警规则this.config.rules.forEach(rule => {this.rules.set(rule.id, rule);});}stop(): void {this.rules.clear();this.state.clear();}// 检查告警check(data: MonitorData): void {this.rules.forEach(rule => {if (this.matchRule(rule, data)) {this.processAlert(rule, data);}});}// 匹配规则private matchRule(rule: AlertRule, data: MonitorData): boolean {// 类型匹配if (rule.type !== data.type) {return false;}// 子类型匹配if (rule.subType && rule.subType !== data.subType) {return false;}// 条件匹配return this.evaluateCondition(rule.condition, data.data);}// 评估条件private evaluateCondition(condition: AlertCondition,data: any): boolean {const value = data[condition.field];switch (condition.operator) {case '>':return value > condition.value;case '<':return value < condition.value;case '>=':return value >= condition.value;case '<=':return value <= condition.value;case '==':return value == condition.value;case '!=':return value != condition.value;default:return false;}}// 处理告警private processAlert(rule: AlertRule, data: MonitorData): void {const state = this.state.get(rule.id) || {count: 0,firstTime: Date.now(),lastTime: Date.now()};// 更新状态state.count++;state.lastTime = Date.now();this.state.set(rule.id, state);// 检查告警条件if (this.shouldAlert(rule, state)) {this.sendAlert(rule, state, data);}}// 判断是否需要告警private shouldAlert(rule: AlertRule, state: AlertState): boolean {// 检查告警间隔const interval = state.lastTime - state.firstTime;if (interval < rule.timeWindow) {return false;}// 检查告警次数return state.count >= rule.threshold;}// 发送告警private async sendAlert(rule: AlertRule,state: AlertState,data: MonitorData): Promise<void> {const alert: Alert = {id: rule.id,name: rule.name,level: rule.level,message: this.formatMessage(rule, state, data),time: Date.now()};// 发送到不同渠道await Promise.all(this.config.channels.map(channel => {return this.sendToChannel(channel, alert);}));// 重置状态this.state.delete(rule.id);}// 格式化告警消息private formatMessage(rule: AlertRule,state: AlertState,data: MonitorData): string {return `告警：${rule.name}级别：${rule.level}时间：${new Date().toLocaleString()}次数：${state.count}详情：${JSON.stringify(data)}`;}// 发送到告警渠道private async sendToChannel(channel: AlertChannel,alert: Alert): Promise<void> {try {await fetch(channel.url, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({channel: channel.type,alert})});} catch (error) {console.error(`Failed to send alert to ${channel.type}:`,error);}}
}// 接口定义
interface MonitorConfig {appId: string;userId: string;sessionId: string;environment: string;version: string;sampling: number;reportUrl?: string;reportType?: string;alertRules?: AlertRule[];alertChannels?: AlertChannel[];
}interface CollectorConfig {reportInterval?: number;
}interface ProcessorConfig {environment: string;
}interface ReporterConfig {url: string;flushInterval: number;maxBatchSize: number;
}interface AlertConfig {rules: AlertRule[];channels: AlertChannel[];
}interface MonitorData {type: string;subType: string;data: any;
}interface AlertRule {id: string;name: string;type: string;subType?: string;level: 'info' | 'warning' | 'error' | 'critical';condition: AlertCondition;timeWindow: number;threshold: number;
}interface AlertCondition {field: string;operator: '>' | '<' | '>=' | '<=' | '==' | '!=';value: any;
}interface AlertState {count: number;firstTime: number;lastTime: number;
}interface Alert {id: string;name: string;level: string;message: string;time: number;
}interface AlertChannel {type: string;url: string;
}// 使用示例
const monitor = MonitoringManager.getInstance();// 初始化监控
monitor.init({appId: 'my-app',userId: 'user-123',sessionId: 'session-456',environment: 'production',version: '1.0.0',sampling: 100,reportUrl: 'https://monitor.example.com/report',reportType: 'http',alertRules: [{id: 'error-rate',name: '错误率告警',type: 'error',level: 'error',condition: {field: 'count',operator: '>',value: 10},timeWindow: 60000,threshold: 5}],alertChannels: [{type: 'webhook',url: 'https://alert.example.com/webhook'}]
});// 手动上报
monitor.report({type: 'business',subType: 'conversion',data: {name: 'purchase',value: 100}
});// 停止监控
monitor.stop();

最佳实践与建议

1. 监控范围

   • 性能指标
   • 错误信息
   • 用户行为
   • 业务数据

2. 采集策略

   • 采样控制
   • 批量上报
   • 优先级分级
   • 实时性要求

3. 告警机制

   • 规则配置
   • 级别定义
   • 通知方式
   • 处理流程

4. 数据处理

   • 数据清洗
   • 聚合分析
   • 存储策略
   • 查询优化

总结

前端监控系统需要考虑以下方面：

1. 监控指标的全面性
2. 数据采集的可靠性
3. 处理分析的及时性
4. 告警通知的准确性
5. 系统运维的可维护性

通过完善的监控体系，可以及时发现和解决问题，提高应用质量。

学习资源

1. 性能监控指标
2. 错误监控方案
3. 用户行为分析
4. 告警系统设计
5. 监控平台实践

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻