Debugging Reactivity

Debugging

Reactivity can be complicated to debug as it requires an understanding of “what caused what” which is not as intuitive as simply seeing the callee of a function.

Semantic UI’s reactivity implementation provides several different ways to handle debugging. For starters if you are adding your own custom breakpoints in code, Reaction.current will always reference the current Reaction being run (if any). You can check this to see what the source of a reaction is.

To make this even more simple Reaction exposes a special helpers Reaction.getSource() this will return a trace of the current context which causes a reaction specifically for debugging;

// example output
Reaction triggered by:
    at Object.setActiveItem (https://dev.semantic-ui.com/src/components/InPageMenu/InPageMenu.js:126:23)
    at IntersectionObserver.onIntersection (https://dev.semantic-ui.com/src/components/InPageMenu/InPageMenu.js:244:13)

If you are trying to debug reactivity inside a template, you can add {debugReactivity}, this will trigger a breakpoint at this context in the template and call Reaction.getSource().