Sentry-javascript: 向面包屑 ui.click 中的元素添加文本

所以，这是我想做的事情，但我担心我们的 DOM 序列化函数会膨胀到它开始给点击处理程序增加明显的开销。

但是，我会探索。

一种简单的选择可能是做

target = elem.outerHTML;

这将完全按原样输出单击的元素。 您将失去树状结构 - 但根据我的个人经验，这并没有像看到我习惯在我的代码中一直看到的完整的实际元素那样有帮助，因此可以更快地识别出来。

这也将解决https://github.com/getsentry/raven-js/issues/576

@soroushhakami – 我们首先从outerHTML开始，但在此实用程序方法中不推荐使用它。

我们不使用outerHTML （正如@mitsuhiko评论的那样）：

• CSS 选择器格式可以用更少的字符显示更多信息
• outerHTML可以包含嘈杂的临时数据，例如
  
  
  
  • 长data-reactid字符串（在 React 0.14 及更早版本中）
  
  
  • 用于工具提示的动态生成的title属性
  
  
• 我们会得到很多空元素，具体取决于addEventListener目标的配置方式
• 我们有具有相同类/内容的按钮，这些按钮仅通过祖先信息进行上下文化

基本上，当您展示一堆看起来不错的假设示例时， outerHTML看起来不错，但是我们将它运行几个星期的经验是它是不够的。

啊，我明白了，有道理，谢谢你的解释！ 👍

我已经为我的所有按钮添加了 ID 标签。 很惊讶他们没有出现在面包屑中。 即使它是自定义标签，我也会很高兴。 但由于其独特性，ID 标签似乎是理想的。

@nblasgen – 如果你能提供一个失败的测试用例，我很乐意看看发生了什么。

但是现在代码应该捕获 ID ，并且有一个测试可以验证这一点。

+1 用于显示 ID，或自定义标签，如data-sentry-id="Some text here"

我现在将关闭这个，因为我们知道这个缺失的部分，我们将重新审视这个东西在下一个主要版本中是如何工作的。

参考： https :
参考： https :

只是想添加 - 我正在使用 react & styled-components 所以我的类名是自动生成的，如果有更多的上下文会很棒（无需手动captureBreadcrumb ）：

@kamilogorek 对此有何更新？

是否有可能微调点击“消息”？

也许，可以将更多数据传递到breadcrumbCallback以便人们选择他们需要的内容，而无需默认将其发送给哨兵？ 甚至可能是整个 dom 元素？

@TuxujPes可能会在下一个主要版本中，但不会在这个版本中，因为它需要一些我们只能在主要版本中引入的公共 API 更改。

@kamilogorek听起来很棒。 对主要发布日期有任何估计吗？

接近第三季度末的某个时候（请原谅我这么长的响应时间，是在度假）。

+1 用于显示 ID，或自定义标签，如data-sentry-id="Some text here"

他们可以分析是否有这些信息并随身携带。 如果存在，请为选择器留下一个按钮以获取更多信息。

@hiagodotme @TuxujPes @adamreisnz此功能已在新 SDK 中提供 - https://docs.sentry.io/learn/filtering/?platform=javascript#before -breadcrumb

仅供参考：只是不要忘记使用新的 SDK 会为您带来 +50Kb 的捆绑包大小 #1552

@1999与 raven-js 相比，它增加了 12.7kB，不要使用非压缩大小进行比较，因为它不相关。
v5 (https://github.com/getsentry/sentry-javascript/pull/1919) 也将小于 15kB，因此您不必担心负载增加。

@kamilogorek我有点害怕拥有超过 200 个更改文件的 PR，这似乎更像是一个全新的 SDK，而不是一个新版本。 另外，它的ETA发布日期是什么时候？