How to improve ui Sentry.io breadcrumbs?

Question

I was wondering if there is a good practice on how to write your HTML code in order to get better Sentry.io breadcrumbs inside of the issues.

It's not possible to identify the elements that the user has interacted and I think using CSS class or IDs for it is not the ideal - although we can customize the breadcrumbs, looks like it's not a good practice to get the text inside the tag as per some issues found on Sentry Github repository.

I was thinking about aria-label, does anyone has any advices on it?

Right now is very hard to understand the user steps when reading the breadcrumbs.

Answer 1

This can be solved using the beforeBreadcrumb hook / filtering events.

Simply add

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

... to your Sentry.init() configuration.

Sentry.init({
 dsn:...

Resulting in something like this:

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

More about this here: sentry.io filtering events documentation