"前端错误报告与崩溃分析安全治理（Source Map/采样/脱敏）最佳实践"

前端错误报告与崩溃分析安全治理（Source Map/采样/脱敏）最佳实践概述前端错误上报需兼顾敏感信息保护与可定位性。采用采样、脱敏与受控的Source Map解析可在降低隐私风险的同时提供有效诊断。采样与节流class Sampler { rate: number windowMs: number hits: number[] = [] constructor(rate: number, windowMs: number) { this.rate = rate; this.windowMs = windowMs } allow(): boolean { const now = Date.now() this.hits = this.hits.filter(t => now - t < this.windowMs) if (this.hits.length >= this.rate) return false this.hits.push(now) return true } } 字段脱敏function redactErrorPayload(payload: Record<string, any>): Record<string, any> { const sensitive = ['email', 'token', 'authorization', 'cookie'] const out: Record<string, any> = {} for (const k of Object.keys(payload)) { out[k] = sensitive.includes(k.toLowerCase()) ? '***' : payload[k] } return out } 受控Source Map解析import { SourceMapConsumer } from 'source-map' async function resolveStack(stack: string, mapContent: string): Promise<string[]> { const consumer = await new SourceMapConsumer(mapContent) const lines = stack.split('\n') const result: string[] = [] for (const line of lines) { const m = line.match(/(.*)\((.*):(\d+):(\d+)\)/) if (m) { const pos = consumer.originalPositionFor({ line: Number(m[3]), column: Number(m[4]) }) result.push(`${pos.source}:${pos.line}:${pos.column}`) } else { result.push(line) } } consumer.destroy() return result } 统一错误模型type ErrorEventPayload = { name: string; message: string; stack?: string; url: string; ua: string; traceId: string } function buildErrorEvent(e: Error, url: string, ua: string, traceId: string): ErrorEventPayload { return { name: e.name, message: e.message, stack: e.stack?.split('\n').slice(0, 15).join('\n'), url, ua, traceId } } 运维要点启用采样与窗口节流，避免报告风暴上报前进行字段脱敏与堆栈截断Source Map仅在受控环境解析，避免将源码暴露给客户端通过采样、脱敏与受控解析，可实现安全可控的前端错误报告体系。