捕获srcDoc iframe 中的 JavaScript 错误_技术教程

本文介绍如何在 React 组件中使用 `srcDoc` 属性创建的 iframe 中捕获 JavaScript 错误。通过监听 iframe 的 `load` 事件并检查 `contentDocument` 是否包含错误信息，可以有效地检测并处理 iframe 内容中的错误，从而提升用户体验。本文提供了一种可靠的方法来确保错误处理程序的正确触发，并提供示例代码进行演示。

在使用 React 开发过程中，有时需要在 iframe 中渲染动态 HTML/JavaScript 内容，并使用 srcDoc 属性直接将 HTML 内容注入 iframe。然而，iframe 中的 JavaScript 代码可能存在错误，导致页面出现异常。为了提升用户体验，我们需要捕获 iframe 中的 JavaScript 错误，并在出现错误时显示友好的错误提示。

监听 load 事件而非 error 事件

最初的解决方案尝试监听 iframe.contentWindow 的 error 事件，但这种方法可能存在时序问题，导致错误处理程序未能及时触发。更可靠的方法是监听 iframe 的 load 事件，并在 load 事件处理程序中检查 iframe 的 contentDocument 是否包含错误信息。

import React, { useEffect, useRef, useState } from "react";

const RenderHtml = ({ htmlBlock }: { htmlBlock: {html: string} }) => {
  const iframeRef = useRef(null);
  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    if (!iframeRef.current) return;

    const iframe = iframeRef.current;

    const handleLoad = () => {
      // 检查 iframe 的 contentDocument 是否可访问
      // 以及是否包含任何错误消息
      if (iframe.contentDocument?.querySelector("body script[src^='chrome-error://']")) {
        setHasError(true);
      }
    };

    iframe.addEventListener("load", handleLoad);

    return () => {
      iframe.removeEventListener("load", handleLoad);
    };
  }, [htmlBlock.html]);

  return !hasError ? (
    
  ) : (
    There was an error loading the HTML content
  );
};

export default RenderHtml;

代码解释：

useRef 和 useState: iframeRef 用于获取 iframe 元素的引用，hasError 用于控制是否显示错误提示。
useEffect: 在组件挂载后，useEffect 钩子函数会被调用。它用于添加和移除 iframe 的 load 事件监听器。依赖项 [htmlBlock.html] 确保在 htmlBlock.html 发生变化时，useEffect 会重新执行。
handleLoad: 当 iframe 加载完成时，handleLoad 函数会被调用。它检查 iframe.contentDocument 是否包含错误信息。这里使用 querySelector("body script[src^='chrome-error://']") 来检测是否存在来自 Chrome 浏览器的错误脚本。你可以根据实际情况修改这个选择器，例如检查特定的错误元素或错误消息。
错误处理: 如果检测到错误，setHasError(true) 会被调用，导致组件重新渲染并显示错误提示。
清理函数: useEffect 返回一个清理函数，用于在组件卸载或 htmlBlock.html 发生变化时移除事件监听器，防止内存泄漏。
条件渲染: 根据 hasError 的值，组件会渲染 iframe 或错误提示。

注意事项

跨域问题: 如果 iframe 的 srcDoc 内容来自不同的域，可能会遇到跨域问题，导致无法访问 contentDocument。确保 iframe 内容与主页面同源，或者正确配置 CORS。
错误检测方式: 示例代码中使用 querySelector("body script[src^='chrome-error://']") 检测 Chrome 浏览器的错误脚本。可以根据实际情况修改这个选择器，例如检查特定的错误元素或错误消息。
安全性: 在使用 srcDoc 属性时，要特别注意安全性问题。确保 htmlBlock.html 内容来自可信的来源，防止 XSS 攻击。对外部传入的 HTML 内容进行适当的过滤和转义。

总结

通过监听 iframe 的 load 事件并检查 contentDocument 是否包含错误信息，可以有效地捕获 srcDoc iframe 中的 JavaScript 错误。这种方法比监听 error 事件更可靠，并能提供更好的用户体验。同时，需要注意跨域问题和安全性问题，确保应用程序的稳定性和安全性。