鼠标悬停表情符号时控制台报Unchecked runtime.lastError问题求助

错误原因分析 #

Unchecked runtime.lastError: The message port closed before a response was received. 这个错误通常和以下场景相关：

• 浏览器扩展冲突：部分广告拦截、隐私防护类扩展会干扰页面的消息通信端口，当鼠标悬停触发元素事件时，扩展的拦截逻辑导致消息端口提前关闭。
• 未清理的异步操作：如果你的compute_scroller滚动处理函数或on_select选择回调中调用了浏览器API（比如chrome.runtime.sendMessage）、异步请求，当组件卸载或操作未完成时，消息端口已关闭，从而抛出错误。
• 第三方库/框架的隐性调用：某些UI库或工具在处理表情元素交互时，可能后台触发了未正确处理的跨上下文消息通信。

解决方案 #

1. 排查浏览器扩展干扰 #

• 暂时禁用所有浏览器扩展，刷新页面后测试表情悬停是否还会报错。
• 如果错误消失，逐个重新启用扩展，定位到引发冲突的扩展后，更新该扩展或替换为同类工具。

2. 检查并清理异步操作 #

• 若compute_scroller或on_select中存在异步逻辑（比如调用浏览器API、fetch请求）：
  • 添加错误捕获逻辑，处理端口关闭的情况：

    // 示例：处理chrome.runtime.sendMessage的错误
    chrome.runtime.sendMessage(yourMessage, (response) => {
      if (chrome.runtime.lastError) {
        // 忽略端口关闭的错误，或做日志记录
        console.log('消息端口已关闭:', chrome.runtime.lastError.message);
        return;
      }
      // 正常处理响应
    });
    

  • 在React组件中，使用useEffect的清理函数终止未完成的异步任务：

    useEffect(() => {
      const controller = new AbortController();
      // 关联异步请求到controller
      const fetchData = async () => {
        try {
          await fetch(url, { signal: controller.signal });
        } catch (err) {
          if (err.name !== 'AbortError') {
            // 处理其他错误
          }
        }
      };
      return () => controller.abort(); // 组件卸载时终止请求
    }, []);
    

3. 检查表情元素的事件绑定 #

• 确认表情项的onClick之外，是否存在隐性的onMouseOver/onMouseEnter事件绑定（可能来自父组件或第三方库），这些事件可能触发了未处理的通信逻辑。
• 尝试移除onScroll={compute_scroller}临时测试，看错误是否和滚动事件的处理逻辑相关。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture