How to catch/serialize all action calls in production?

[hyperknot]

I've an app using MobX strict mode, with all important actions having their own functions (so no runInAction).

I'm trying to make the app multi-user aware using socket.io, and for this, I'd like to catch action calls with their arguments, then I'd run the same functions on other users' computers. So say, one user calls setColor(objectId, 'red'), I'd transmit `{command: 'setColor', args: ['red']} over socket.io and then all other user would have this action applied in real time.

I've seen that spy() can do this, but I'd need it in production. Also I don't need it to be nested/recursive, I'm looking to capture the top level actions and serialize them to JSON.

How can I do this?

[danielkcz]

Perhaps have a look at mobx-state-tree which has the concept of patches. Instead of transmitting commands, you are transmitting store modifications. You can easily transmit these patches and apply them to other stores. Technically, you can do this without MST, just autorun, and compare data with previous values to figure out what to send. If you need true collaboration without the risk of losing some data, that's much trickier and out of scope for this discussion.

[urugator]

Not sure if it makes much sense to use autorun that has to traverse the whole state to kinda artifically subscribe for everything, just so you can run diff to figure out what actually changed - I mean you could just run the diff on any command, that subscription/notification step seems a bit redundant...
However one could do something like reaction(() => store.color, color => sendCommand("setColor", color))

[urugator]

I would consider using redux's dispatch({ type: 'setColor', color: "red" }) + reducer approach, the only difference will be that the reducer won't be "reducing", but "mutating" state.
Keep in mind that eg setColor.name won't work on minified sources.

[danielkcz]

To follow up on "redux approach", have a look at XState state machines which are also powered by that approach, but more robust and easier to follow.

[hyperknot]

Thanks for the replies, I'll look into those approaches. So far what I did was I'm converting the functions I need to take one object argument only, and then I can wrap the functions like this:

const featureFns = ['setTitle', 'setColor']

function wrapFeatureFunctions() {
  for (const fn of featureFns) {
    const origFn = Feature.prototype[fn]

    Feature.prototype[fn] = function () {
      const featureId = this.id
      const opt = arguments[0]

      const payload = {
        fn,
        featureId,
        opt,
      }

      socket.emit('user_edit', payload)
      return origFn.apply(this, arguments)
    }
  }
}

This basically makes a JSON for each function call like this:

{
  fn: 'setTitle',
  featureId: 1894576744,
  opt: {title: 'New item1'}
}

It works, but as @urugator said this string based approach will probably not work on minified sources. Is there any way to solve this? For example can I make a map like this?

const featureFns = {
  setTitle: Feature.prototype.setTitle,
}

would this work? And if this does, how can I apply it back on the receiving side?

Right now I'm using the following which works great in development:

const { fn, featureId, opt } = payload
const feature = featureMap.get(featureId)
feature[fn]({ ...opt, external: true })

[danielkcz]

@hyperknot You certainly don't need to refactor a whole app, just the stores. That's the beauty of MobX, on the outside it will still look and act the same, but you will have some extra options and type safety. Although MST is somewhat unmaintained currently and maybe not even compatible with MobX6. Perhaps mobx-keystone would be a better choice, but I don't have personal experience with that.

[urugator]

It's like a chat room, where commands appear one after an other.

If every client mutates it's own state first, then broadcast the command to others, you have no guarantee that everyone ends up with the same state (application order matters if commands contain conditionals/loops etc).

[hyperknot]

Yes, I'm seeing that for simple examples, like setColor(value) it makes no difference, but for more complex ones with conditionals it gets quite tricky.

So from the multiple solutions mentioned here, which one do you recommend looking at first? MST, keystone, XState? I'd definitely like to stay with MobX's react bindings, basically my whole app is built around @observer (I know it's changing in v6, but right now 4.x works wonderfully in my app).

[hyperknot]

I have to say the todo example in keystone looks really impressive, action-log and patch-log looks like exactly what I'm trying to achieve.

[urugator]

I would firstly look around the internet how to handle collaborative editing in general. It's not a trivial problem.
You may need to send commands/whole state/patches/logs or perform rollbacks/replays/distributed transactions, I dunno, therefore I can't even tell for what tools you should look for.