Mobx集成Redux DevTools的有效配置及依赖漏洞解决方案

我用Mobx开发时，创建Store及开发流程都十分顺畅。为了通过浏览器Redux DevTools获取可视化调试信息，编写了如下代码：

import { observable, action } from "mobx";
import remotedev from "mobx-remotedev";

const createCounterStore = () => {
    const store = observable( {
        count: 0,
        increment: action( () => {
            store.count++;
        } ),
        reset: action( () => {
            store.count = 0;
        } ),
        decrement: action( () => {
            store.count--;
        } )
    } );

    // Connect MobX store with the Redux DevTools Extension
    remotedev( store, { name: "CounterStore" } );
};
const store = createCounterStore();
export default store;

但遇到两个问题：一是npm审计报告提示ws（5.0.0-5.2.2版本）存在ReDoS漏洞，该漏洞由socketcluster-client传递至remotedev（>=0.2.8版本）；二是应用在浏览器中无法运行，移除remotedev相关代码后恢复正常。现针对两个疑问解答如下：

1. 绕过当前问题的可行方法 #

强制升级漏洞依赖 #

直接修复ws的ReDoS漏洞：在package.json中通过overrides（npm 8.3+）或resolutions（Yarn）强制指定ws版本为>=5.2.3（该版本已修复漏洞）：

// npm 用户添加以下配置
"overrides": {
  "ws": "^5.2.3"
}

// Yarn 用户添加以下配置
"resolutions": {
  "ws": "^5.2.3"
}

配置完成后重新执行npm install或yarn install，再启动项目验证。

替换为官方调试集成方案 #

放弃第三方的mobx-remotedev，改用Mobx官方维护的mobx-redux-devtools包实现与Redux DevTools的集成，该包依赖更安全且维护活跃。示例代码：

import { observable, action, configure } from "mobx";
import { connectReduxDevtools } from "mobx-redux-devtools";

configure({ enforceActions: "always" });

const createCounterStore = () => {
  const store = observable({
    count: 0,
    increment: action(() => store.count++),
    reset: action(() => store.count = 0),
    decrement: action(() => store.count--)
  });

  connectReduxDevtools(remotedevInstance => {
    remotedevInstance(store, { name: "CounterStore" });
  });

  return store;
};

const store = createCounterStore();
export default store;

先执行npm install mobx-redux-devtools安装依赖，再替换代码即可。

仅在开发环境启用调试 #

如果暂时不想更换依赖，可将remotedev相关代码限定在开发环境加载，避免生产环境引入漏洞依赖，同时可能缓解浏览器运行问题：

const createCounterStore = () => {
  const store = observable({ /* 现有store代码 */ });

  if (process.env.NODE_ENV === "development") {
    const remotedev = require("mobx-remotedev");
    remotedev(store, { name: "CounterStore" });
  }

  return store;
};

注意确保生产构建时tree-shaking能移除这部分代码，不过此方法仅为临时规避，优先推荐前两种方案。

2. 资深Mobx用户的调试工具选择与MST的使用情况 #

Redux DevTools的替代与正确用法 #

多数资深Mobx用户不会依赖mobx-remotedev，而是选择更可靠的调试方式：

• Mobx原生trace功能：在action或computed函数内添加trace()调用，可在控制台输出状态变更的完整路径，满足基础调试需求。
• mobx-logger：安装该包后，可打印状态变更的详细日志，配合浏览器控制台过滤功能，能清晰跟踪状态变化。
• 官方mobx-redux-devtools：即前文提到的官方集成包，稳定且安全，是需要Redux DevTools可视化调试的首选。

Mobx-State-Tree（MST）的选择逻辑 #

部分资深用户会改用MST，但核心原因并非调试工具：MST自带类型安全、快照回滚、结构化日志等特性，本身调试能力就很强，且能直接与Redux DevTools集成，无需额外第三方包。但如果你的项目已基于原生Mobx稳定运行，没必要为了调试工具特意迁移到MST——原生Mobx配合合适的调试工具完全够用，MST更适合对数据结构严谨性要求极高的大型项目。

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