英文:
MobX observable component names hidden in stack trace
问题
这是一个组件，有意引发错误：
App 组件在堆栈跟踪中标记为 observerComponent。然而，如果我们移除围绕组件的 observer 包装器（将第11行替换为第12行），组件名称将显示在堆栈跟踪中。
MobX 对组件名称的混淆使调试变得困难。
如何在保持组件作为 MobX 观察者的同时保留组件名称在堆栈跟踪中？
英文:
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?
答案1
得分: 2
我认为这是一个错误（或者说在 React 17 到 18 的过渡期间出现了问题），已经在一段时间前修复了（也许是在这个 PR 中），所以你只需要更新到最新版本的 MobX 和 mobx-react。
查看 Codesandbox：
截图：
英文:
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:
答案2
得分: 2
这个问题是由于React在堆栈跟踪中处理组件的name和displayName方式发生了一些变化而创建的。
在mobx的GitHub页面上有一个开放问题，并且已经实施了一个解决方法。
您只需要更新您的mobx-react-lite版本。
英文:
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.
答案3
得分: -2
您可以在组件上设置`displayName`属性以在堆栈跟踪中保留组件名称：
const MyComponent = observer((props) => {
...
});
MyComponent.displayName = 'MyComponent';
<details>
<summary>英文:</summary>
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';
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论