html - 如何改进 ui Sentry.io 面包屑？

Question

我想知道是否有关于如何编写 HTML 代码的好习惯，以便在问题中获得更好的 Sentry.io 面包屑。

无法识别用户交互的元素，我认为使用 CSS 类或 ID 并不是理想的选择 - 尽管我们可以自定义面包屑，但看起来根据标签获取文本并不是一个好习惯在 Sentry Github 存储库中发现了一些问题。

我在想aria-label ，有人对此有什么建议吗？

现在在阅读面包屑时很难理解用户的步骤。

Answer 1

这可以使用 beforeBreadcrumb Hook /过滤事件来解决。

只需添加

beforeBreadcrumb(breadcrumb, hint) {
 if (breadcrumb.category === 'ui.click') {
   const { target } = hint.event;
   if (target.ariaLabel) {
     breadcrumb.message = target.ariaLabel;
   }
 }
 return breadcrumb;
}

...到您的 Sentry.init() 配置。

Sentry.init({
 dsn:...

导致这样的事情:

Sentry.init({
  dsn: '....',
  beforeBreadcrumb(breadcrumb, hint) {
    if (breadcrumb.category === 'ui.click') {
      const { target } = hint.event;
      if (target.ariaLabel) {
        breadcrumb.message = target.ariaLabel;
      }
    }
    return breadcrumb;
  }
});

更多信息在这里: sentry.io filtering events documentation