skip to Main Content

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?

2

Answers


  1. 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';
    
    Login or Signup to reply.
  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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search