Custom breadcrumb message data based on DOM element

[swelham]

I can see this has been raised some time ago in these three issues (#577 #576 #783) which seem to indicate an implementation was being considered. I wasn't able to find anything in the docs about this though, other than creating my own implementation using the beforeBreadcrumb hook.

With css utility class frameworks becoming more popular, I would like to bring this issue up again for review. We're using tailwindcss and having the class names come through in the breadcrumb history provides almost no assistance in debugging or reproducing the error.

For example we will see things like this.

To remedy this I have had to implement our own custom code that inspects the target element and pulls some data from its attributes to get a more actionable log in sentry. I feel like having a standard data attribute (or being able to specify one) would provide a generic solution to this problem, falling back onto class names if the attribute doesn't exist.

[kamilogorek]

I like the idea of using a custom attribute for that as the "go-to" solution for understanding what element has been interacted with. As you already mentioned, it is already possible with a small snippet inside beforeBreadcrumb, but we should definitely rethink this and maybe try to add into the SDK itself in the future.

For anyone looking for this exact functionality:

// JS
Sentry.init({
  beforeBreadcrumb(breadcrumb, hint) {
    if (breadcrumb.category.startsWith('ui')) {
      const target = hint.event.target;
      const customName = target.dataset.sentry;
      const customMessage = `${target.tagName.toLowerCase()}[sentry="${customName}"]`;
      breadcrumb.message = customName ? customMessage : breadcrumb.message;
    }
    return breadcrumb;
  }
})

// HTML
<button data-sentry="very-important-button">Hi there!</button>

[swelham]

Yeah, it would be great to get this in the SDK at some point if possible.

Thanks for the example, it's reassuring to see that my implementation was almost the same 🙂

[baptisteArno]

Hey guys, I'd like to display the element inner text in breadcrumbs. Is this okay to do something like this:

beforeBreadcrumb(breadcrumb, hint) {
    if (!breadcrumb.category || !hint || breadcrumb.category.startsWith("ui")) {
      return breadcrumb;
    }
    const target = hint.event.target;
    const messageWithInnerText = `${target.tagName.toLowerCase()}${
      target.innerText
    }`;
    breadcrumb.message = messageWithInnerText;
    return breadcrumb;
  }

Any possible performance issue?

[kamilogorek]

@baptisteArno next version will have this feature built-in :)
see: #3620 (comment)

[baptisteArno]

hey @kamilogorek, It seems that it's only for custom HTML attributes. I need inner text 😃

[kamilogorek]

Ooooh. Then yes, your snippet is totally fine, although I'd use try/catch instead:

beforeBreadcrumb(breadcrumb, hint) {
  try {
    if (breadcrumb.category.startsWith("ui")) {
      breadcrumb.message = `${hint.event.target.tagName.toLowerCase()}: ${hint.event.target.innerText}`;
    }
  } catch (e) {}
  return breadcrumb;
}

(I think you meant !breadcrumb.category.startsWith("ui") in your example?)

[baptisteArno]

Looks perfect. Thank you @kamilogorek

[kamilogorek]

Closing the issue, as it seems like the original issue has been partially resolved or there is a working solution. I'd prefer someone to create a new issue with a fresh description if it's still an issue.
Please do not hesitate to ping me if it is still relevant, and I will happily reopen and work on it.
Cheers!