前端错误监控：捕获、降噪、定位与恢复

interface ErrorPayload {
  kind: 'js' | 'resource' | 'rejection' | 'http';
  message: string;
  stack?: string;
  filename?: string;
  lineno?: number;
  colno?: number;
  target?: string;   // 资源错误的标签与 URL
}

// 入口一：window.onerror 只收 JS 运行时异常
window.onerror = function (message, source, lineno, colno, error) {
  report({
    kind: 'js',
    message: String(message),
    stack: error?.stack,
    filename: source,
    lineno,
    colno,
  });
};

// 入口二：error 事件既收 JS 异常，也收资源错误（必须开捕获）
// 资源错误不会冒泡，冒泡阶段监听 window 收不到，必须传第三参 true
window.addEventListener(
  'error',
  (event) => {
    const target = event.target as HTMLElement | null;
    if (target && (target.tagName === 'IMG' || target.tagName === 'SCRIPT' || target.tagName === 'LINK')) {
      report({
        kind: 'resource',
        message: `load failed: ${target.tagName}`,
        target: (target as HTMLImageElement).src || (target as HTMLLinkElement).href,
      });
      return;
    }
    // 走到这里的才是 JS 异常，ErrorEvent 上有完整 error 对象
    if (event instanceof ErrorEvent) {
      report({ kind: 'js', message: event.message, stack: event.error?.stack, filename: event.filename });
    }
  },
  true,
);

// 入口三：未处理的 rejection
window.addEventListener('unhandledrejection', (event) => {
  const reason = event.reason;
  report({
    kind: 'rejection',
    message: reason instanceof Error ? reason.message : String(reason),
    stack: reason instanceof Error ? reason.stack : undefined,
  });
});

async function request<T>(url: string, init?: RequestInit): Promise<T> {
  let response: Response;
  try {
    response = await fetch(url, init);
  } catch (networkError) {
    // 网络层失败：断网、DNS、CORS 拦截
    report({ kind: 'http', message: `network error: ${url}` });
    throw networkError;
  }
  if (!response.ok) {
    // HTTP 层失败：4xx/5xx
    report({
      kind: 'http',
      message: `http ${response.status}: ${url}`,
    });
  }
  return response.json() as Promise<T>; // 结构层失败交给上层 catch 统一处理
}

TypeError: Cannot read properties of undefined (reading 'id')
    at Pe (https://cdn.example.com/assets/app.a3f9c2.js:1:48213)
    at HTMLButtonElement.o (https://cdn.example.com/assets/app.a3f9c2.js:1:51190)

// 本地排查脚本：node restore.js app.a3f9c2.js.map 1 48213
const fs = require('node:fs');
const { SourceMapConsumer } = require('source-map');

const [mapPath, line, column] = process.argv.slice(2);
const rawMap = JSON.parse(fs.readFileSync(mapPath, 'utf8'));

SourceMapConsumer.with(rawMap, null, (consumer) => {
  const pos = consumer.originalPositionFor({
    line: Number(line),
    column: Number(column),
  });
  console.log(`${pos.source}:${pos.line}:${pos.column} -> ${pos.name ?? '(匿名)'}`);
  // sourcesContent 里通常包含源码片段，可直接打印上下文
});

<!-- 页面侧：声明跨源脚本 -->
<script src="https://cdn.example.com/assets/app.a3f9c2.js" crossorigin="anonymous"></script>

# CDN 侧：脚本响应必须带回以下响应头
Access-Control-Allow-Origin: *

function fingerprint(payload: ErrorPayload): string {
  const normalized = payload.message
    .replace(/\d+/g, '#')          // "user 1234 not found" -> "user # not found"
    .replace(/[0-9a-f]{8,}/gi, '~') // 长十六进制串（UUID/hash）
    .slice(0, 200);
  const topFrames = (payload.stack ?? '')
    .split('\n')
    .filter((line) => line.includes('/assets/')) // 只留应用自己的帧
    .slice(0, 3)
    .join('|');
  return `${payload.kind}:${normalized}:${hash(topFrames)}`;
}

function hash(input: string): string {
  let h = 5381;
  for (let i = 0; i < input.length; i++) h = ((h << 5) + h + input.charCodeAt(i)) | 0;
  return (h >>> 0).toString(36);
}

// 构建时通过 define 注入，Vite 中使用 define 配置
declare const __APP_VERSION__: string;

function report(payload: ErrorPayload): void {
  queue.push({
    ...payload,
    release: __APP_VERSION__,       // 建议直接用 commit hash
    environment: 'production',     // production / staging / dev 严格区分
    fingerprint: fingerprint(payload),
    url: location.pathname,         // 不带 query，防 token 泄露也便于聚合
    userAgent: navigator.userAgent,
    timestamp: Date.now(),
  });
}