使用Redux时Chrome报Unchecked runtime.lastError错误如何解决

该报错Unchecked runtime.lastError: The message port closed before a response was received.本质是Chrome浏览器中跨进程/跨上下文的消息通信端口，在接收方返回响应前就被关闭导致的，和Redux使用场景关联的常见触发逻辑如下：

• Redux DevTools调试扩展版本过旧，和当前Chrome版本、项目使用的Redux/Redux Toolkit版本不兼容，调试连接建立后意外断开
• Redux DevTools扩展安装损坏，或后台进程被浏览器意外回收，和项目Redux store建立的长连接没有正常释放
• 项目的Redux配置中没有加DevTools兼容性兜底，扩展不存在或连接异常时没有捕获对应错误
• 也可能是其他Chrome扩展（广告拦截、VPN、密码管理类扩展）的通信冲突，刚好在操作Redux相关逻辑时触发报错

• 优先验证是否为扩展导致的问题：打开Chrome无痕模式（默认禁用所有扩展），访问项目复现操作步骤，如果报错消失，即可确定是扩展问题：
  • 若确认是Redux DevTools导致的，先前往Chrome应用商店将扩展更新到最新版本，或卸载后重装扩展
  • 优化项目内的Redux DevTools配置，增加兼容性判断，避免扩展异常时抛出未捕获错误，示例配置如下：
    Redux Toolkit写法：

    const store = configureStore({
      reducer: rootReducer,
      devTools: process.env.NODE_ENV === 'development' ? {
        trace: true,
        traceLimit: 25
      } : false
    })
    

    原生Redux手动配置写法：

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?.({ trace: true }) || compose
    const store = createStore(rootReducer, composeEnhancers(applyMiddleware(...middlewares)))
    

• 若无痕模式下仍然能复现报错，排查项目内的Chrome API调用逻辑：
  • 检查所有chrome.runtime.sendMessage调用的回调函数，增加runtime.lastError的捕获兜底
  • 检查自定义内容脚本、Service Worker和页面之间的通信逻辑，避免端口关闭后仍然尝试发送消息

内容的提问来源于stack exchange，提问作者ismail