Using trace for debugging

Trace is a small utility that helps to find out why your computed values, reactions or components are re-evaluating.

It can be used by simply importing import { trace } from "mobx", and then put it inside a reaction or computed value. It will print why it is re-evaluating the current derivation.

Optionally it is possible to automatically enter the debugger by passing true as last argument. This way the exact mutation that causes the reaction to re-run is still in stack, usually ~8 stack frames up. See the image below.

In debugger mode, the debug information will also reveal the full derivation tree that is affecting the current computation / reaction.



Live examples

Simple codesandbox trace example:

Here's a deployed example for exploring the stack: Be sure to play with chrome debugger's blackbox feature!

Usage examples

There are different ways of calling trace(), some examples:

import { observer } from "mobx-react"
import { trace } from "mobx"

class MyComponent extends React.Component {
    render() {
        trace(true) // enter the debugger whenever an observable value causes this component to re-run
        return <div>{}</name>

Enable trace by using the reaction argument of an reaction / autorun:

mobx.autorun("loggerzz", r => {

Pass in the property name of a computed property:

trace(user, "fullname")