页面白屏处理

疑难问题 |

白屏原因与排查方法

1. JavaScript 执行错误（最常见）

典型场景：SPA 应用中未捕获的异常导致整个应用崩溃。

// 常见错误类型
// 1. 空值引用
const userInfo = null;
console.log(userInfo.name); // TypeError: Cannot read property 'name' of null

// 2. 异步错误未捕获
async function loadData() {
  const response = await fetch("/api/user");
  const data = await response.json();
  // 如果接口返回格式异常，下面代码会报错
  document.getElementById("username").textContent = data.user.name;
}

排查方法：

  • 打开 Console 面板，查看错误信息和堆栈跟踪
  • 错误信息通常直接指向问题代码行
  • 关注 TypeError、ReferenceError 等常见错误类型

2. 资源加载失败

典型场景：CDN 故障、网络不稳定导致关键 CSS/JS 文件加载失败。

排查方法：

  • Network 面板查看资源加载状态
  • 重点关注状态码为 4xx、5xx 的失败请求
  • 检查关键资源：主 CSS 文件、JavaScript 入口文件

预防方案：

// 资源加载容错
function loadCriticalResource(primaryUrl, fallbackUrl) {
  return new Promise((resolve, reject) => {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = primaryUrl;

    link.onload = resolve;
    link.onerror = () => {
      // 主资源失败，加载备用资源
      link.href = fallbackUrl;
      link.onerror = reject;
    };

    document.head.appendChild(link);
  });
}

3. 接口异常

典型场景：关键数据接口超时或返回异常，页面无法获取必要数据。

排查方法：

  • Network 面板检查接口请求状态
  • Console 面板查看接口错误信息
  • 确认接口返回数据格式是否符合预期

预防方案：

// 统一接口错误处理
async function apiRequest(url, options = {}) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 10000);

  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal,
    });

    clearTimeout(timeoutId);

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    return await response.json();
  } catch (error) {
    if (error.name === "AbortError") {
      throw new Error("请求超时，请稍后重试");
    }
    throw error;
  }
}

4. CSS 样式问题

典型场景：样式异常导致内容不可见，造成视觉白屏。

/* 可能导致白屏的CSS */
.content {
  color: white;
  background: white; /* 白色文字配白色背景 */
}

.container {
  position: absolute;
  left: -9999px; /* 内容移出可视区域 */
}

排查方法：

  • Elements 面板检查 DOM 结构是否正常
  • 查看元素的 Computed 样式
  • 确认关键元素的 display、visibility、opacity 等属性

5. 移动端特殊问题

排查工具：

  • vConsole：移动端调试面板
  • 真机调试：Chrome DevTools 远程调试
  • 抓包工具：Charles、Fiddler 分析网络请求
// 移动端vConsole集成
import VConsole from "vconsole";

if (
  process.env.NODE_ENV === "development" ||
  window.location.search.includes("debug=1")
) {
  new VConsole();
}

预防与监控

1. 错误边界处理

// React错误边界
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 上报错误
    console.error("页面错误:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div className="error-fallback">页面出现错误，请刷新重试</div>;
    }
    return this.props.children;
  }
}

2. 错误监控系统

// Sentry错误监控
import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "YOUR_DSN_HERE",
  environment: process.env.NODE_ENV,
});

// 全局错误捕获
window.addEventListener("error", (event) => {
  Sentry.captureException(event.error);
});

window.addEventListener("unhandledrejection", (event) => {
  Sentry.captureException(event.reason);
});

3. 兼容性检测

// 关键特性检测
function checkCompatibility() {
  const requiredFeatures = [
    () => typeof Promise !== "undefined",
    () => typeof fetch !== "undefined",
    () => typeof Object.assign !== "undefined",
  ];

  const unsupported = requiredFeatures.filter((check) => !check());

  if (unsupported.length > 0) {
    document.body.innerHTML = `
      <div style="text-align: center; padding: 50px;">
        <h2>浏览器版本过低</h2>
        <p>请升级浏览器以获得最佳体验</p>
      </div>
    `;
    return false;
  }

  return true;
}

面试回答技巧

标准回答模板

第一步：快速分类（30 秒）"页面白屏主要有五种原因：JavaScript 执行错误、资源加载失败、CSS 样式问题、接口异常和浏览器兼容性。其中 JavaScript 错误最常见，特别是 SPA 应用中的未捕获异常。"

第二步：排查方法（1 分钟）"我的排查步骤是：首先查看 Console 面板的错误信息，这能快速定位 JS 异常；然后检查 Network 面板确认资源加载状态；接着用 Elements 面板验证 DOM 和样式；移动端问题会用 vConsole 或真机调试。生产环境结合 Sentry 等监控系统分析。"

第三步：预防措施（30 秒）"预防方面建立错误边界、资源容错机制、统一接口异常处理、兼容性检测，同时搭建监控告警体系。"

高频追问及回答要点

Q: 如何区分 JS 错误和资源加载失败？

  • A: JS 错误在 Console 有明确报错信息和堆栈，资源失败在 Network 显示红色状态码。可以先看 Console，无报错再查 Network。

Q: 生产环境白屏如何快速定位？

  • A: 依赖监控系统收集错误信息，结合用户反馈确定影响范围，通过错误堆栈和用户环境信息快速定位。必要时可以灰度回滚。

Q: 移动端白屏有什么特殊性？

  • A: 移动端调试困难，需要 vConsole 或真机调试。还要考虑内存限制、网络环境、浏览器内核差异等因素。

总结

白屏问题排查需要系统性方法：从 Console 错误信息入手，结合 Network 资源状态，通过 Elements 验证渲染结果。关键是建立完善的错误处理和监控体系，将问题消灭在萌芽状态。