用户说"卡顿"，服务器一切正常：播放质量监测与 QoE 指标

用户的播放体验链路：
CDN 边缘节点 → 用户宽带（最后一公里）→ 路由器/WiFi → 设备解码 → 渲染

服务端能看到：CDN 边缘节点的健康状态（第一环）
服务端看不到：用户的宽带、WiFi、设备性能（后面几环）

class QoEMonitor {
    constructor(video, sessionId) {
        this.video = video;
        this.sessionId = sessionId;
        this.events = [];
        this.stallStart = null;
        this.playStart = null;
        this.firstFrame = false;
        this.switchCount = 0;
        this.lastLevel = null;
        this._bind();
    }

    _bind() {
        const v = this.video;

        // 首帧
        v.addEventListener('loadeddata', () => {
            if (!this.firstFrame) {
                this.firstFrame = true;
                const ttff = (performance.now() - this.playStart) / 1000;
                this._log('ttff', {ttff});
            }
        });

        // 卡顿开始
        v.addEventListener('waiting', () => {
            if (this.stallStart === null) {
                this.stallStart = performance.now();
                this._log('stall_start', {at: v.currentTime});
            }
        });

        // 卡顿结束
        v.addEventListener('playing', () => {
            if (this.stallStart !== null) {
                const dur = (performance.now() - this.stallStart) / 1000;
                this._log('stall_end', {duration: dur, at: v.currentTime});
                this.stallStart = null;
            }
        });

        // 错误
        v.addEventListener('error', () => {
            this._log('error', {
                code: v.error && v.error.code,
                message: v.error && v.error.message,
            });
        });

        // 结束
        v.addEventListener('ended', () => this._report());

        // 定期上报
        setInterval(() => this._report(), 30000);
    }

    play() {
        this.playStart = performance.now();
        this.video.play();
    }

    _log(type, data) {
        this.events.push({type, ts: Date.now(), ...data});
    }

    _report() {
        if (!this.events.length) return;
        const payload = {
            session: this.sessionId,
            video: this.video.currentSrc,
            events: this.events,
            // 上下文
            ua: navigator.userAgent,
            // 注意：不要采集能识别个人的信息
        };
        // 用 sendBeacon：页面关闭也能发出去
        navigator.sendBeacon('/api/qoe', new Blob([JSON.stringify(payload)],
            {type: 'application/json'}));
        this.events = [];
    }
}

const hls = new Hls();
hls.on(Hls.Events.LEVEL_SWITCHED, (evt, data) => {
    monitor._log('level_switch', {level: data.level, bitrate: hls.levels[data.level].bitrate});
});
hls.on(Hls.Events.FRAG_LOADED, (evt, data) => {
    // 每个分片的加载耗时（能反映 CDN 速度）
    monitor._log('frag', {duration: data.frag.duration, stats: data.stats});
});
hls.on(Hls.Events.ERROR, (evt, data) => {
    monitor._log('hls_error', {type: data.type, details: data.details, fatal: data.fatal});
});

{
  "session": "uuid",
  "ts": 1710144000,
  "video_id": "v123",
  "quality": "720p",
  "ttff": 1.8,
  "stalls": [
    {"at": 12.4, "duration": 2.1},
    {"at": 130.7, "duration": 0.8}
  ],
  "stall_ratio": 0.007,
  "switch_count": 3,
  "watched": 245.3,
  "duration": 320.0,
  "errors": [],
  "context": {
    "ua": "...",
    "network": "wifi",
    "device": "mobile"
  }
}

log_format cdn '$remote_addr [$time_local] "$request" $status $body_bytes_sent '
               '$request_time $upstream_response_time "$http_range"';

整体卡顿率：0.8%
按省份拆：
  广东 0.6%  北京 0.5%  上海 0.7%
  **某省 4.9%**   ← 异常
按运营商再拆（该省内）：
  电信 0.9%  移动 1.1%
  **联通 9.2%**   ← 锁定

结论：该省联通用户被调度到了一个负载高的节点
处理：联系 CDN 厂商调整调度策略 → 一周后降到 1.2%

SELECT province, isp,
       COUNT(*) AS sessions,
       AVG(stall_ratio) AS avg_stall,
       AVG(ttff) AS avg_ttff,
       SUM(CASE WHEN error IS NOT NULL THEN 1 ELSE 0 END)::float / COUNT(*) AS err_rate
FROM qoe_events
WHERE ts >= NOW() - INTERVAL '24 hours'
GROUP BY province, isp
HAVING COUNT(*) > 50
ORDER BY avg_stall DESC;