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

Question

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

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

我在想aria-label，有没有人有什么建议？

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

Answer 1

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

只需添加

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 过滤事件文档