概述
在React Native中，我们正在为错误和警告开发一个名为LogBox的新RedBox体验。在LogBox中，我们将组件堆栈跟踪与调用堆栈分开，并以类似的方式显示它们。
我们希望能够点击这些组件并打开它们(就像我们可以对调用堆栈做那样)。
解决方案
在React中，我们有完整的文件路径上下文，但当我们构建组件堆栈跟踪时，我们会去除完整路径，只显示文件名。
有两种方法可以实现这一点：
- 对于React Native,不要在这里去除完整路径。这将导致每个帧都包含完整路径的更长的组件堆栈消息。
- 保持消息不变，而是添加结构化的组件堆栈帧信息，包括完整文件路径。
4条答案
按热度按时间hl0ma9xz1#
对DevTools fork of
describeComponentFrame的任何更改都不会影响来自shared/describeComponentFrame的内置React警告。这似乎可能是一个无法克服的问题。我们可以改变两者(也许使用特定的渲染器构建标志？),但那将产生更广泛的影响，我们可能需要多加考虑。
保持消息不变，而是添加结构化组件堆栈帧信息，包括完整文件路径。
您对这个选项有什么想法？
lymgl2op2#
可能我链接到了错误的
describeComponentFrame,我们可以更新其中一个，以便React Native获得完整路径。cc @motiz88关于结构化堆栈的想法
eqqqjvef3#
结构化的堆栈跟踪的具体解决方案仍需设计，但在我看来，这主要归结为以下几点：RN的
LogBox和ReactFiberErrorDialog都需要访问一个Fiber引用(或者是一个ReactElement数组或其他中间投影),而不是组件堆栈的预格式化字符串。对于
ReactFiberErrorDialog路径，这相当于重新设计React内部接口和渲染器之间的内部接口。对于
LogBox路径，我们可能需要重新思考如何 Package 和转发console.error和console.warn。例如，我们可以只 Package 一次方法，在LogBox中，并直接使用相同的私有API来获取当前纤维。zysjyyx44#
可能我链接到了错误的
describeComponentFrame,我们可以更新其中一个，让 React Native 获得完整路径吗？澄清一下，我上面提到的限制是警告可以从两个地方记录：
我可以添加一个标志来改变 DevTools 中的行为(这将影响自动附加到自定义/第三方警告的堆栈),但 React 核心中的行为(例如缺少
keyprop)不会受到影响。由于这种行为在react核心包中，我不确定如何在每个渲染器级别解决这个问题。我们可能会在某个地方添加一个扩展属性，以便传递未修剪的路径，但这感觉相当 hacky-而且根据上面的评论来自 @motiz88,似乎我们三个人在这方面可能没有完全一致的看法。也许我们应该三个人都聊一聊(也许如果 Sebastian 对这个感兴趣的话，也可以让他参与进来)。
对于
LogBox路径，我们可能需要重新考虑如何 Package 和转发console.error和console.warn。例如，也许我们可以只 Package 一次方法，在LogBox中，并直接消费与 React DevTools 用于获取当前 fiber 相同的私有 API。这对第三方警告(DevTools 目前通过自动附加组件堆栈“支持”的东西)有影响。理想情况下，无论我们选择哪种解决方案，都应该支持内置警告和第三方警告。