合成监控：确保应用性能的第一道防线

合成监控：确保应用性能的第一道防线

前言

作为前端开发者，你是否想在代码上线前就发现性能问题？是否想确保应用在各种环境下都能正常运行？合成监控就是你的答案！

合成监控（Synthetic Monitoring）是一种模拟用户行为来检测应用性能和可用性的方法。它可以帮助你在真实用户遇到问题之前就发现并解决问题。今天，我们就来深入探讨如何建立一套完善的前端合成监控体系。

什么是合成监控

合成监控是通过模拟用户行为来定期检查应用的性能和可用性。它与RUM（真实用户监控）互补，RUM关注真实用户的体验，而合成监控关注应用的整体健康状况。

合成监控与RUM的对比

合成监控的核心价值

1. 提前发现问题：在用户遇到问题之前发现并解决
2. 确保SLA达成：确保服务等级协议的达成
3. 性能基线监控：建立性能基线，检测异常变化
4. 多区域测试：在不同地理位置测试应用性能

合成监控核心指标

1. 可用性指标

2. 性能指标

3. 功能验证指标

实战：搭建合成监控系统

第一步：合成监控配置

// 合成监控配置 const syntheticConfig = { // 监控目标 targets: [ { name: '首页', url: 'https://example.com', frequency: '5m', // 每5分钟执行一次 locations: ['北京', '上海', '广州', '深圳'], browsers: ['Chrome', 'Firefox', 'Safari'] }, { name: '登录页', url: 'https://example.com/login', frequency: '10m', locations: ['北京', '上海'], browsers: ['Chrome', 'Safari'] }, { name: '商品详情页', url: 'https://example.com/products/123', frequency: '15m', locations: ['北京'], browsers: ['Chrome'] } ], // 性能预算 performanceBudget: { lcp: 2500, fid: 100, cls: 0.1, ttfb: 800, pageLoadTime: 3000 }, // 告警配置 alerts: { enabled: true, thresholds: { availability: 99, errorRate: 1, lcp: 3000 }, notify: ['slack', 'email'] } };

第二步：合成监控执行器

// 合成监控执行器 class SyntheticMonitor { constructor(config) { this.config = config; this.results = []; this.init(); } init() { // 为每个目标创建定时任务 this.config.targets.forEach(target => { const interval = this.parseFrequency(target.frequency); setInterval(() => { this.runMonitor(target); }, interval); // 立即执行一次 this.runMonitor(target); }); } parseFrequency(frequency) { const match = frequency.match(/^(\d+)([smhd])$/); if (!match) return 60000; // 默认1分钟 const value = parseInt(match[1]); const unit = match[2]; const multipliers = { s: 1000, m: 60 * 1000, h: 60 * 60 * 1000, d: 24 * 60 * 60 * 1000 }; return value * multipliers[unit]; } async runMonitor(target) { const result = { target: target.name, url: target.url, timestamp: Date.now(), locations: [], errors: [] }; // 在每个位置执行监控 for (const location of target.locations) { const locationResult = await this.runInLocation(target, location); result.locations.push(locationResult); if (locationResult.status !== 'success') { result.errors.push({ location, error: locationResult.error }); } } this.results.push(result); this.checkAlerts(result); // 保留最近100条结果 if (this.results.length > 100) { this.results.shift(); } return result; } async runInLocation(target, location) { const startTime = Date.now(); try { // 使用Puppeteer模拟浏览器访问 const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] }); const page = await browser.newPage(); // 设置视口 await page.setViewport({ width: 1280, height: 800 }); // 启用性能追踪 await page.tracing.start({ path: `trace-${target.name}-${location}.json`, categories: ['devtools.timeline'] }); // 访问页面 const response = await page.goto(target.url, { waitUntil: 'networkidle2', timeout: 30000 }); // 等待页面稳定 await page.waitForTimeout(2000); // 停止追踪 await page.tracing.stop(); // 获取性能指标 const performanceMetrics = await this.getPerformanceMetrics(page); // 获取页面截图 const screenshot = await page.screenshot({ fullPage: true }); // 检查关键元素 const elementChecks = await this.checkElements(page, target); await browser.close(); return { location, status: 'success', responseTime: Date.now() - startTime, statusCode: response.status(), performance: performanceMetrics, elementChecks, screenshot: screenshot.toString('base64') }; } catch (error) { return { location, status: 'error', responseTime: Date.now() - startTime, error: error.message }; } } async getPerformanceMetrics(page) { const metrics = await page.evaluate(() => { const perf = performance.getEntriesByType('navigation')[0]; const lcpEntry = performance.getEntriesByType('largest-contentful-paint'); const clsEntries = performance.getEntriesByType('layout-shift'); const lcp = lcpEntry.length > 0 ? lcpEntry[lcpEntry.length - 1].startTime + lcpEntry[lcpEntry.length - 1].duration : null; const cls = clsEntries.reduce((sum, entry) => sum + entry.value, 0); return { ttfb: perf?.responseStart - perf?.navigationStart, fcp: perf?.responseEnd - perf?.navigationStart, lcp, cls, domContentLoaded: perf?.domContentLoadedEventEnd - perf?.navigationStart, load: perf?.loadEventEnd - perf?.navigationStart }; }); return metrics; } async checkElements(page, target) { const checks = []; // 检查页面标题 const title = await page.title(); checks.push({ name: '页面标题', passed: title && title.length > 0, value: title }); // 检查关键按钮 const submitBtn = await page.$('button[type="submit"]'); checks.push({ name: '提交按钮', passed: !!submitBtn, value: submitBtn ? '存在' : '不存在' }); // 检查Logo const logo = await page.$('img[alt*="logo"], .logo'); checks.push({ name: 'Logo', passed: !!logo, value: logo ? '存在' : '不存在' }); return checks; } checkAlerts(result) { const errors = result.errors; if (errors.length > 0) { const errorCount = errors.length; const locationCount = result.locations.length; const errorRate = (errorCount / locationCount) * 100; if (errorRate > this.config.alerts.thresholds.errorRate) { this.triggerAlert({ type: 'availability', message: `${result.target} 可用性异常`, details: { errorRate: `${errorRate.toFixed(1)}%`, errors: errors.map(e => `${e.location}: ${e.error}`) } }); } } // 检查性能指标 const avgPerformance = this.calculateAveragePerformance(result.locations); if (avgPerformance.lcp && avgPerformance.lcp > this.config.alerts.thresholds.lcp) { this.triggerAlert({ type: 'performance', message: `${result.target} LCP超过阈值`, details: { lcp: `${(avgPerformance.lcp / 1000).toFixed(2)}s`, threshold: `${(this.config.alerts.thresholds.lcp / 1000).toFixed(2)}s` } }); } } calculateAveragePerformance(locations) { const validLocations = locations.filter(l => l.status === 'success' && l.performance); if (validLocations.length === 0) return {}; const metrics = ['ttfb', 'fcp', 'lcp', 'cls', 'domContentLoaded', 'load']; const averages = {}; metrics.forEach(metric => { const values = validLocations.map(l => l.performance[metric]).filter(v => v !== null && v !== undefined); if (values.length > 0) { averages[metric] = values.reduce((a, b) => a + b, 0) / values.length; } }); return averages; } triggerAlert(alert) { console.log(`🚨 告警触发: ${alert.type} - ${alert.message}`); if (this.config.alerts.notify.includes('slack')) { this.sendSlackAlert(alert); } if (this.config.alerts.notify.includes('email')) { this.sendEmailAlert(alert); } } async sendSlackAlert(alert) { const payload = { text: `*${alert.type.toUpperCase()}告警*: ${alert.message}`, attachments: [{ fields: Object.entries(alert.details).map(([key, value]) => ({ title: key, value: Array.isArray(value) ? value.join('\n') : value, short: false })) }] }; await fetch(process.env.SLACK_WEBHOOK_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); } async sendEmailAlert(alert) { const emailData = { to: process.env.ALERT_EMAILS, subject: `[合成监控] ${alert.type.toUpperCase()}告警: ${alert.message}`, body: JSON.stringify(alert.details, null, 2) }; await fetch('/api/send-email', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(emailData) }); } } // 初始化合成监控 const monitor = new SyntheticMonitor(syntheticConfig);

第三步：合成监控仪表盘

// 合成监控仪表盘 class SyntheticDashboard { constructor(monitor) { this.monitor = monitor; this.updateInterval = null; } init() { this.render(); this.startAutoUpdate(); } startAutoUpdate() { this.updateInterval = setInterval(() => { this.render(); }, 30000); } stopAutoUpdate() { if (this.updateInterval) { clearInterval(this.updateInterval); } } render() { const recentResults = this.monitor.results.slice(-20); const dashboard = ` <div class="synthetic-dashboard"> <div class="dashboard-header"> <h1>合成监控仪表盘</h1> <div class="last-update"> 最后更新: ${new Date().toLocaleString()} </div> </div> <div class="summary-section"> <h2>整体状态</h2> <div class="summary-cards"> <div class="summary-card ${this.getOverallStatus()}"> <div class="summary-icon">${this.getStatusIcon()}</div> <div class="summary-info"> <div class="summary-value">${this.getOverallStatusText()}</div> <div class="summary-label">整体状态</div> </div> </div> <div class="summary-card"> <div class="summary-icon">✅</div> <div class="summary-info"> <div class="summary-value">${this.getSuccessRate()}%</div> <div class="summary-label">成功率</div> </div> </div> <div class="summary-card"> <div class="summary-icon">⏱️</div> <div class="summary-info"> <div class="summary-value">${this.getAvgResponseTime()}ms</div> <div class="summary-label">平均响应时间</div> </div> </div> </div> </div> <div class="targets-section"> <h2>监控目标</h2> <div class="targets-grid"> ${this.renderTargets()} </div> </div> <div class="history-section"> <h2>历史记录</h2> <div class="history-list"> ${this.renderHistory(recentResults)} </div> </div> </div> `; document.getElementById('dashboard').innerHTML = dashboard; } getOverallStatus() { const recentResults = this.monitor.results.slice(-10); if (recentResults.length === 0) return 'status-neutral'; const successCount = recentResults.filter(r => r.errors.length === 0 ).length; const successRate = (successCount / recentResults.length) * 100; if (successRate >= 95) return 'status-good'; if (successRate >= 80) return 'status-warning'; return 'status-bad'; } getStatusIcon() { const status = this.getOverallStatus(); const icons = { 'status-good': '✅', 'status-warning': '⚠️', 'status-bad': '🔴', 'status-neutral': '⚪' }; return icons[status]; } getOverallStatusText() { const status = this.getOverallStatus(); const texts = { 'status-good': '正常', 'status-warning': '警告', 'status-bad': '异常', 'status-neutral': '未知' }; return texts[status]; } getSuccessRate() { const recentResults = this.monitor.results.slice(-10); if (recentResults.length === 0) return 'N/A'; let totalLocations = 0; let successLocations = 0; recentResults.forEach(result => { totalLocations += result.locations.length; successLocations += result.locations.filter(l => l.status === 'success').length; }); return ((successLocations / totalLocations) * 100).toFixed(1); } getAvgResponseTime() { const recentResults = this.monitor.results.slice(-10); if (recentResults.length === 0) return 'N/A'; let totalTime = 0; let count = 0; recentResults.forEach(result => { result.locations.forEach(location => { if (location.status === 'success') { totalTime += location.responseTime; count++; } }); }); return Math.round(totalTime / count); } renderTargets() { return this.monitor.config.targets.map(target => { const recentResult = this.monitor.results .filter(r => r.target === target.name) .slice(-1)[0]; const status = recentResult && recentResult.errors.length === 0 ? 'status-good' : 'status-bad'; return ` <div class="target-card ${status}"> <div class="target-header"> <span class="target-name">${target.name}</span> <span class="target-status">${recentResult ? '正常' : '未执行'}</span> </div> <div class="target-url">${target.url}</div> <div class="target-meta"> <span>频率: ${target.frequency}</span> <span>位置: ${target.locations.join(', ')}</span> </div> </div> `; }).join(''); } renderHistory(results) { if (results.length === 0) { return '<div class="empty-state">暂无监控记录</div>'; } return results.map(result => ` <div class="history-item ${result.errors.length === 0 ? 'success' : 'error'}"> <div class="history-time">${new Date(result.timestamp).toLocaleTimeString()}</div> <div class="history-target">${result.target}</div> <div class="history-locations"> ${result.locations.map(l => ` <span class="location-tag ${l.status}">${l.location}</span> `).join('')} </div> ${result.errors.length > 0 ? ` <div class="history-error"> ${result.errors.map(e => e.error).join(', ')} </div> ` : ''} </div> `).join(''); } } // 初始化仪表盘 const dashboard = new SyntheticDashboard(monitor); dashboard.init();

合成监控最佳实践

1. 选择关键监控点

// 关键页面和API列表 const criticalTargets = [ { name: '首页', url: 'https://example.com', critical: true }, { name: '登录接口', url: 'https://api.example.com/login', critical: true }, { name: '支付接口', url: 'https://api.example.com/payment', critical: true }, { name: '产品列表', url: 'https://example.com/products', critical: false } ];

2. 设置合理的频率

// 根据重要性设置频率 function getFrequency(critical) { if (critical) return '1m'; // 关键目标每分钟检查 return '5m'; // 非关键目标每5分钟检查 }

3. 多区域测试

// 覆盖多个地理位置 const locations = [ { name: '北京', region: 'cn-north' }, { name: '上海', region: 'cn-east' }, { name: '广州', region: 'cn-south' }, { name: '新加坡', region: 'ap-southeast' }, { name: '东京', region: 'ap-east' } ];

常见问题

Q1: 合成监控会影响生产环境吗？

A: 合成监控的请求量相对较小，影响可以忽略。

Q2: 需要监控哪些页面？

A: 重点监控关键路径页面，如首页、登录页、核心功能页面。

Q3: 如何处理误报？

A: 设置合理的阈值和连续失败次数，避免单次波动触发告警。

Q4: 合成监控的成本如何？

A: 可以通过调整频率和采样率来控制成本。

Q5: 是否需要在多个浏览器测试？

A: 建议至少在主流浏览器（Chrome、Safari、Firefox）中测试。

总结

合成监控是前端稳定性保障的重要组成部分，通过定期模拟用户行为，可以：

1. 提前发现问题
2. 确保SLA达成
3. 建立性能基线
4. 多区域测试

结合RUM，你可以建立一个完整的监控体系，全面保障应用的性能和可用性。

延伸阅读：

• Pingdom
• UptimeRobot
• New Relic Synthetic Monitoring