mobx-safe

Drop-in action replacement for MobX that can handle errors before throwing.

import { action, caughtErrors } from "mobx-safe";
 
class DangerZone {
    @action
    public enter() {
        throw new Error("Lana!");
    }
}
 
setTimeout(() => new DangerZone().enter(), 100);
setTimeout(() => console.log(caughtErrors), 200); // [Error: Lana!]

Why

Generally, MobX recommends using native browser/Node error handling for uncaught errors. IE and older versions of Edge don't provide stack traces in certain cross-domain situations (link/link). In order to react to errors and guarantee call stacks you'll need to handle the errors yourself in the original execution stack. Knarly!

See this MobX issue.

Usage

action

Import action from mobx-safe and use as you would mobx's action. That's it!

import { action } from "mobx-safe";
 
const wrapped = action(() => {
    throw new Error("What!?");
});
 
// Error: What!?
wrapped();

Basic method wrapping and TypeScript decorators are supported. Babel decorators are not supported.

caughtErrors

Type: IObservableArray<Error>

Synchronously pushed to whenever an action error throws, before it's rethrown or handled. Observe this to react to errors having been thrown.

import { autorun } from "mobx";
import { caughtErrors } from "mobx-safe";
 
autorun(() => {
    console.log(`There are ${caughtErrors.length} errors.`);
});

configure.clearOnCaughtErrorHandlers

Type: boolean

If given as true, clears any handlers added for caught errors.

import { configure as configureMobXSafe } from "mobx-safe";
 
configureMobXSafe({
    clearOnCaughtErrorHandlers: true,
});

configure.onCaughtError

Type: (handler: (error: Error) => void) => void

Adds a method to be called whenever an error is pushed to caughtErrors. These methods are called synchronously before caught errors are rethrown.

import { configure as configureMobXSafe } from "mobx-safe";
 
configureMobXSafe({
    onCaughtError(error) {
        console.log("Found an error:", error);
    },
});

If passed with clearOnCaughtErrorHandlers, only the added onCaughtError will be registered after configure finishes.

Best Practices

Clear Between Tests

Multiple tests that interact with mobx-safe can leave with multiple onCaughtError handlers active. Clear state after each test with configure.clearOnCaughtErrorHandlers.

For example, in Jest and other test frameworks with afterEach:

afterEach(() => {
    const { configure } = require("mobx-safe");
 
    configure({
        clearOnCaughtErrorHandlers: true,
    });
});