Phase 4C - 高级监控功能集成指南

状态: ✅ 已完成基础架构集成 | 日期：2026年3月6日

📋 概述

Phase 4C 为性能监控系统添加了 7 个高级功能模块，涵盖：

📊 性能趋势分析
🔍 深度错误调查
🚨 多通道告警管理
🌍 多环境监控
📄 格式化报告生成
🎯 性能回归检测
👥 用户行为分析

🏗️ 已完成的集成

1️⃣ 监控系统全局初始化 ✅

文件: .vitepress/theme/monitoring-setup.ts

typescript

import { initializeMonitoringSystem } from './monitoring-setup';

// 自动初始化（在 DOM 就绪时）
// 或手动调用
initializeMonitoringSystem();

初始化内容:

✅ EnvironmentMonitor（多环境支持）
✅ WebhookAlertManager（告警管理）
✅ RegressionDetector（回归检测）
✅ UserBehaviorAnalytics（行为追踪）
✅ 事件监听器配置

2️⃣ SentryAPIClient 多环境支持 ✅

文件: .vitepress/theme/sentry-api.ts

typescript

// 自动监听环境切换
const sentryClient = new SentryAPIClient();

// 获取当前环境
const env = sentryClient.getCurrentEnvironment(); // 'production' | 'staging' | 'development'

// 手动更新凭证
sentryClient.setCredentials(token, org, project);

特性:

自动监听环境切换事件
动态更新 Sentry 凭证
后备凭证管理

3️⃣ PerformanceDashboard 集成 ✅

文件: .vitepress/theme/components/PerformanceDashboard.vue

集成的功能:

✅ 环境切换器（生产/测试/开发）
✅ 报告下载按钮（HTML/CSV/JSON）
✅ PerformanceTrendChart 组件
✅ ErrorDetailModal 弹窗
✅ 错误卡片可点击交互
✅ 报告生成逻辑

使用示例:

vue

<!-- 环境选择 -->
<select v-model="currentEnvironment" @change="switchEnvironment(currentEnvironment)">
  <option value="production">🚀 生产环境</option>
  <option value="staging">🔄 测试环境</option>
  <option value="development">🧪 开发环境</option>
</select>

<!-- 报告按钮 -->
<button @click="generateReport('html')">📄 HTML</button>
<button @click="generateReport('csv')">📊 CSV</button>
<button @click="generateReport('json')">🔧 JSON</button>

📦 新增模块功能

ReportGenerator - 性能报告生成

文件: .vitepress/theme/report-generator.ts

typescript

import { ReportGenerator } from './report-generator';

// 下载报告
const reportData = {
  title: '性能监控报告',
  period: { start: '2026-01-01', end: '2026-03-06' },
  summary: { avgErrorRate: 2.5, avgResponseTime: 1200 },
  metrics: {
    /* ... */
  },
  recommendations: [
    /* ... */
  ],
  alerts: [
    /* ... */
  ],
};

ReportGenerator.downloadReport(reportData, 'html');
ReportGenerator.downloadReport(reportData, 'csv');
ReportGenerator.downloadReport(reportData, 'json');

// 发送邮件
await ReportGenerator.sendReportByEmail(reportData, 'team@example.com');

// 上传云存储
const url = await ReportGenerator.shareReportToCloud(reportData);

// 定时报告
ReportGenerator.scheduleReport({
  frequency: 'weekly',
  recipients: ['admin@example.com'],
  // ...
});

支持的格式:

📄 HTML: 带完整样式，支持打印和 PDF 导出
📊 CSV: 用于数据分析和 Excel 导入
🔧 JSON: 用于程序化处理

RegressionDetector - 性能回归检测

文件: .vitepress/theme/regression-detector.ts

typescript

import { RegressionDetector } from './regression-detector';

const detector = new RegressionDetector({
  enableAutoDetection: true,
  baselineWindow: 7, // 7 天基线
  regressionThreshold: {
    FCP: 10, // 10% 回归
    LCP: 10,
    CLS: 15,
  },
});

// 添加数据点
detector.addMetricDataPoint('LCP', 2500, Date.now());

// 检测回归
const alert = detector.checkRegression('LCP', 3200);
// { regression: 28.0%, severity: 'high', ... }

// 获取指标统计
const stats = detector.getMetricStats('LCP');
// { min, max, avg, median, stdDev }

// 获取告警
const alerts = detector.getAlerts({ severity: 'critical' });
detector.acknowledgeAlert(alertId);

// 生成报告
const report = detector.generateRegressionReport(7); // 过去 7 天

特性:

自动基线计算（中位数）
严重级别分类
告警确认和误报标记
指标历史追踪
LocalStorage 持久化

UserBehaviorAnalytics - 用户行为分析

文件: .vitepress/theme/user-behavior-analytics.ts

typescript

import { UserBehaviorAnalytics } from './user-behavior-analytics';

const analytics = new UserBehaviorAnalytics(userId);

// 自动追踪页面浏览
analytics.trackPageView();

// 追踪自定义事件
analytics.trackEvent('click', 'subscribe-button', {
  position: 'header',
  source: 'cta',
});

// 获取会话摘要
const summary = analytics.getSessionSummary();
// { totalSessions, totalUsers, bounceRate, avgPageViewsPerSession }

// 用户流分析
const flows = analytics.getUserFlows(10);
// { startPage, endPage, count, avgDuration, conversionRate }

// 队列留存分析
const cohorts = analytics.getCohortAnalysis(7); // 7 日留存
// { cohortName, userCount, retentionRate, conversionRate }

// 导出报告
const report = analytics.exportReport();

自动功能:

✅ 会话追踪
✅ 页面浏览计时
✅ 事件缓冲（降低性能影响）
✅ 页面卸载清理
✅ LocalStorage 持久化

🔧 配置环境变量

更新 .env 文件以启用多环境支持：

bash

# 生产环境
VITE_SENTRY_PRODUCTION_AUTH_TOKEN=your_prod_token
VITE_SENTRY_PRODUCTION_ORG=your_prod_org
VITE_SENTRY_PRODUCTION_PROJECT=your_prod_project

# 测试环境
VITE_SENTRY_STAGING_AUTH_TOKEN=your_staging_token
VITE_SENTRY_STAGING_ORG=your_staging_org
VITE_SENTRY_STAGING_PROJECT=your_staging_project

# 开发环境
VITE_SENTRY_DEVELOPMENT_AUTH_TOKEN=your_dev_token
VITE_SENTRY_DEVELOPMENT_ORG=your_dev_org
VITE_SENTRY_DEVELOPMENT_PROJECT=your_dev_project

# Webhook 通道（可选）
VITE_SENTRY_SLACK_WEBHOOK_URL=https://hooks.slack.com/...
VITE_SENTRY_DINGTALK_WEBHOOK_URL=https://oapi.dingtalk.com/...
VITE_SENTRY_WECOM_WEBHOOK_URL=https://qyapi.weixin.qq.com/...

📊 集成工作流

┌─────────────────────────────────────────────┐
│  Web Vitals 数据                             │
└──────────────┬──────────────────────────────┘
               │
        ┌──────▼──────┐
        │ SentryAPI   │
        │  (多环境)   │
        └──────┬──────┘
               │
    ┌──────────┼──────────┐
    │          │          │
    │          │          │
┌───▼──┐  ┌───▼──┐   ┌───▼──┐
│Trend │  │Error │   │Stats │
│Chart │  │Modal │   │Sheet │
└──────┘  └──────┘   └──────┘
    │          │          │
    └──────────┼──────────┘
               │
        ┌──────▼──────────┐
        │ Regression      │
        │ Detection       │
        └──────┬──────────┘
               │
        ┌──────▼──────────┐
        │ Webhook Alert   │ ──→ Slack/钉钉/企业微信
        │ Manager         │
        └──────┬──────────┘
               │
        ┌──────▼──────────┐
        │ Report          │
        │ Generator       │ ──→ HTML/CSV/JSON
        └────────────────┘

🚀 快速开始

步骤 1：验证构建

bash

pnpm build
# ✓ build complete in 20.05s

步骤 2：启动开发服务

bash

pnpm docs:dev
# 访问 http://localhost:5173

步骤 3：测试功能

打开"性能仪表板"页面
选择不同环境（生产/测试/开发）
点击"错误"卡片查看详情
下载性能报告

步骤 4：配置告警通知

typescript

import { getWebhookAlertManager } from './monitoring-setup';

const webhookMgr = getWebhookAlertManager();

// 添加 Slack 通知
await webhookMgr.addWebhook({
  type: 'slack',
  url: 'https://hooks.slack.com/...',
  enabled: true,
  triggers: {
    errorRate: 5, // 5% 错误率
    performanceLow: true,
    userImpact: 100, // 100 个用户受影响
  },
  name: 'Team Slack',
});

📈 性能影响分析

模块	包大小	运行时开销	说明
monitoring-setup.ts	2KB	↓	初始化，仅运行一次
report-generator.ts	8KB	↓	按需触发
regression-detector.ts	6KB	↓	后台检测
user-behavior-analytics.ts	7KB	↓↓	事件缓冲，性能影响小
总计	23KB	符合预期	gzip 后约 7KB

⚠️ 常见问题

Q1: 多环境凭证不生效

A: 确保环境变量名称正确：

VITE_SENTRY_PRODUCTION_ORG（注意 PRODUCTION 大写）
检查 .env 文件编码为 UTF-8

Q2: 错误详情模态框无法打开

A: 确保已导入 ErrorDetailModal 组件：

typescript

import ErrorDetailModal from './ErrorDetailModal.vue';

Q3: Webhook 告警未执行

A: 检查：

Webhook URL 有效性
触发条件配置正确
浏览器控制台是否有错误信息

Q4: 性能报告下载失败

检查浏览器是否允许下载
确保 ReportGenerator 已正确导入
验证报告数据结构完整

🔄 后续计划 (Phase 4D)

[ ] A/B 测试框架
[ ] 性能预测模型
[ ] 实时告警仪表板
[ ] 用户分群工具
[ ] 自定义指标支持

📚 相关文档

✅ 验证清单

[x] 监控系统初始化完成
[x] SentryAPIClient 支持多环境
[x] PerformanceDashboard 集成新组件
[x] 报告生成工具 (HTML/CSV/JSON)
[x] 性能回归检测
[x] 用户行为分析
[x] 构建测试通过 ✅
[ ] E2E 测试验证
[ ] 性能基准测试
[ ] 生产环境部署

最后更新: 2026-03-06 | 状态: 基础架构集成完成

Phase 4C - 高级监控功能集成指南 ​

📋 概述 ​

🏗️ 已完成的集成 ​

1️⃣ 监控系统全局初始化 ✅ ​

2️⃣ SentryAPIClient 多环境支持 ✅ ​

3️⃣ PerformanceDashboard 集成 ✅ ​

📦 新增模块功能 ​

ReportGenerator - 性能报告生成 ​

RegressionDetector - 性能回归检测 ​

UserBehaviorAnalytics - 用户行为分析 ​

🔧 配置环境变量 ​

📊 集成工作流 ​

🚀 快速开始 ​

步骤 1：验证构建 ​

步骤 2：启动开发服务 ​

步骤 3：测试功能 ​

步骤 4：配置告警通知 ​

📈 性能影响分析 ​

⚠️ 常见问题 ​

Q1: 多环境凭证不生效 ​

Q2: 错误详情模态框无法打开 ​

Q3: Webhook 告警未执行 ​

Q4: 性能报告下载失败 ​

🔄 后续计划 (Phase 4D) ​

📚 相关文档 ​

✅ 验证清单 ​

Phase 4C - 高级监控功能集成指南

📋 概述

🏗️ 已完成的集成

1️⃣ 监控系统全局初始化 ✅

2️⃣ SentryAPIClient 多环境支持 ✅

3️⃣ PerformanceDashboard 集成 ✅

📦 新增模块功能

ReportGenerator - 性能报告生成

RegressionDetector - 性能回归检测

UserBehaviorAnalytics - 用户行为分析

🔧 配置环境变量

📊 集成工作流

🚀 快速开始

步骤 1：验证构建

步骤 2：启动开发服务

步骤 3：测试功能

步骤 4：配置告警通知

📈 性能影响分析

⚠️ 常见问题

Q1: 多环境凭证不生效

Q2: 错误详情模态框无法打开

Q3: Webhook 告警未执行

Q4: 性能报告下载失败

🔄 后续计划 (Phase 4D)

📚 相关文档

✅ 验证清单