简介

前端运维（Front-end Operations，俗称“前端可观测性”）中的白屏检测、错误日志上报

白屏检测

白屏一般指用户打开页面但没有正常渲染内容，常见原因包括 JS 加载失败、接口卡住、资源加载慢等。

常用检测方式：

采集首屏关键节点比如通过定时器检测页面上是否有关键 DOM 出现：

setTimeout(() => {
  const hasContent = document.querySelector('#app')?.children.length > 0;
  if (!hasContent) {
    reportWhiteScreen(); // 上报白屏
  }
}, 3000);

通过 Performance API 检测资源加载

window.addEventListener('load', () => {
  const entries = performance.getEntriesByType('resource');
  const hasScript = entries.some(e => e.initiatorType === 'script');
  if (!hasScript) {
    reportWhiteScreen('No JS Loaded');
  }
});

打点检测视觉区域是否有实际内容

取几个固定点，判断这些点上是否都是背景色：

function isWhiteScreen() {
  const points = [0.1, 0.3, 0.5, 0.7, 0.9].map(scale => {
    return document.elementFromPoint(window.innerWidth * scale, window.innerHeight * scale);
  });
  return points.every(el => !el || el.tagName === 'HTML' || el.tagName === 'BODY');
}

错误日志上报

用于自动捕捉页面异常和用户行为，便于调试与告警。

常见类型：

类型	描述
JS 异常	`window.onerror` / `window.addEventListener('error')`
Promise 未处理异常	`unhandledrejection` 事件
资源加载失败	`img.onload`, `img.onerror` 等
自定义打点	接口失败、埋点事件等

常用工具或平台：

Sentry（推荐）支持 SourceMap，自动捕捉异常和堆栈信息
Fundebug / logRocket / 阿里 ARMS / 腾讯 TSW
自建上报平台

异常捕捉后，通过 navigator.sendBeacon() 或 AJAX 上报到日志服务

window.onerror = function (msg, url, line, col, error) {
  sendToServer({
    type: 'js-error',
    msg,
    url,
    line,
    col,
    stack: error?.stack
  });
};
window.addEventListener('unhandledrejection', event => {
  sendToServer({
    type: 'promise-error',
    reason: event.reason
  });
});

Raven.js / @sentry/browser

简介

是 Sentry 官方的 JS SDK（老版本），用于前端异常捕捉和上报

功能：

捕捉错误、Promise 异常
自动处理 SourceMap
上报用户信息、标签、环境变量等

现在已被新的 SDK（@sentry/browser）替代：

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'https://xxx@xxx.ingest.sentry.io/xxx',
  tracesSampleRate: 1.0,
});

补充：

除了上面提到的白屏和错误监控，还包括：

页面性能监控（FCP、TTI、LCP、CLS）
接口响应时间、失败率
用户行为回放（如 logRocket）
网络请求分析（慢接口、失败接口）
资源加载分析（JS、CSS、图片等）

总结

名称	用途
白屏检测	判断页面是否空白未加载成功
错误日志上报	捕捉 JS / Promise / 网络等错误
Raven.js / Sentry	前端错误监控平台
相关平台工具	Sentry, 阿里 ARMS, 腾讯 TSW, Fundebug 等

前端运维

On this page