Is there a way to catch an error on top store level?

[Lao-Ax]

Is there a way to catch an error on top store level?
Imagine, I have a

rootStore: { 
      modelA: { ..., someField: modelB }, 
      modelC: {... }
}

ModelB has an action \ flow which fail with error.

So, I want to track back this error on rootStore level. Kinda 'Unknow error'. ModelB is able to handle some of errors, but all others - throw it up!

I've tried to use middleware (or rootStore level):

const middleware = (call, next, abort) => {
  try {
    next(call)
  } catch (error) {
    // do something with error
    }
    throw error
  }
}

And I get the error. But I get it twice or more. I suppose it depends on action's store sub-level.

Please, help me comprehend what I'm doing wrong.

[coolsoftwaretyler]

Hey @Lao-Ax - I'll try to take a look at this soon. In the meantime, any chance you could post a CodeSandbox of what you're trying to do? It would help me answer you more thoroughly.

[Lao-Ax]

I use React-Native. I've created an example on CodeSandbox, but... it behaves differently. The code looks similar for me, but there is no such an effect as in RN.
I'll post a link when it is reproducible.

Until then, let me rephrase: When some async action (deep in store structure of 2-3 level of models) fails with an exception, my middle ware got the catch clause twice.

[Lao-Ax]

I reproduced it on new clear RN project. But not sure, that codebox is able to run it. Here is the link for RN project: https://codesandbox.io/p/devbox/mst-middleware-test-forked-s26qcq?workspaceId=ws_ReAtk9hXpS3iASNi8P7fgV
And here is web example: https://codesandbox.io/p/sandbox/mst-middleware-test-j57gr5

I see that there is different behaviour between RN and web and I cannot spell why.

1. The app does not crash on throw unhadled error, but web does.
2. I get into catch block twice in RN, but once in web.

What I want to achive is to get kinda top-level catch block to handle app level errors. Do you have any clues what I did wrong?

[coolsoftwaretyler]

Hey @Lao-Ax - thanks for the repro! I will take a look sometime this week or weekend.

[coolsoftwaretyler]

Hey @Lao-Ax - you might want to try createActionTrackingMiddleware2 for this instead. It gives you a cleaner start/finish api surface for actions, and you can write something like this:

  const middleware = createActionTrackingMiddleware2({
    filter() {
      return true;
    },
    onStart() {},
    onFinish(call, error) {
      if (error && !call.parentCall) {
        console.warn(
          `[ERROR] ${call.name} (${getPath(call.context)}): ${error instanceof Error ? error.message : error}`
        );
      }
    },
  });

  addMiddleware(store, middleware);

Which will check if there's an error in the call, and you can then check if the call had a parent, and only lift the error up once.

Does that help? Happy to look at other options if you're still having problems.

[Lao-Ax]

Hi @coolsoftwaretyler thank you for your response. I will look into this. From first glance it seems to me a bit complicated. I'm not sure that I truly understand the idea behind createActionTrackingMiddleware2.

I will add a comment when try it out.

[Lao-Ax]

I tried this solution. Looks good. Just moved !call.parentCall to a filter. Thank you!

Is there a way to stop error propagation from fishing()? Say, an action was called on a UI component?

const store = ...
... actions(self=> ({ 
  doSomething: flow(function* (){ throw new Error('Oops!')}), 
}))

// some where on a layout...
  const { doSomething } = store
  <Button onPress={ doSomething } title={'Press me'} /> // unhandled promise rejection. But we handled it in middleware, I suppose.

[coolsoftwaretyler]

Hey @Lao-Ax - glad that helped. I'll mark it as the answer!

I don't know of a good mechanism to suppress the errors on createActionTrackingMiddleware2. You could theoretically just catch it at the callsite with a catchblock:

<Button onPress={() => doSomething().catch(() => {})} title={'Press me'} />

I think that's pretty typical. If you've got something that throws, you should decide for yourself where and how to handle it.