MobX observable component names hidden in stack trace

Question

Here is a component that intentionally throws an error:

The App component is labelled as observerComponent in the stack track. However, if we remove the observer wrapper around our component (replace line 11 with line 12) the component name displays in the stack trace.

MobX obfuscating component names make it difficult to debug.

How can I retain the component name in the stack trace while keeping my component as a MobX observer?

Answer 1

I think it was a bug (or rather something that got broken during React 17->18 transition) and it was fixed some time ago (maybe in this PR), so you just need to update to the latest version of MobX and mobx-react.

See Codesandbox:

Screenshot:

Answer 2

You can set the displayName property on the component to retain the component name in the stack trace:

const MyComponent = observer((props) => {
  ...
});

MyComponent.displayName = 'MyComponent';

Answer 3

This issue was created by some changes in how react handles name and displayName for components in stack traces.

There is an open issue on mobX's github page, and a work-around has already been implemented.

You just need to update your mobx-react-lite version.