如何改进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 filtering events documentation