0

Here is a component that intentionally throws an error:

enter image description here

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.

enter image description here

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?

Matt
  • 1,368
  • 1
  • 26
  • 54
  • Have you seen the [issue on github](https://github.com/mobxjs/mobx/issues/3438)? – super May 31 '23 at 07:01
  • I hadn't found that, thank you for sharing. It looks like it was a bug in the older `mobx-react-lite` version I'm using. Feel free to post that answer and I will award you the bounty for being the first to find that issue – Matt May 31 '23 at 18:20

3 Answers3

2

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:

Edit https://stackoverflow.com/questions/76349390

Screenshot:

enter image description here

Danila
  • 15,606
  • 2
  • 35
  • 67
2

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.

super
  • 12,335
  • 2
  • 19
  • 29
-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';
Invulner
  • 842
  • 2
  • 11
  • I've read this solution on various threads but it doesn't work. See example [here](https://codesandbox.io/s/jolly-orla-d50ybh?file=/src/App.js) – Matt May 28 '23 at 20:15
  • I see the problem. You can wrap into observe a little bit later, like [here](https://codesandbox.io/s/competent-hermann-s7ie5n?file=/src/App.js) – Invulner May 29 '23 at 07:40
  • This also doesn't work unfortunately, if you pull up the console in your linked example you can see the same issue is happening. – Matt May 29 '23 at 22:18