Feature Request: Add event to breadcrumb for interaction breadcrumbs

[kylemellander]

Summary

This is a request to add the event or element to an onBreadcrumb hook for user interaction.

Reasoning

The improvements made in version 7 to add hooks to handle breadcrumbs is a great feature. It allows users to filter out breadcrumbs that they do not want logged. This is especially useful for filtering out PII from the logs, which is important for companies seeking for PII compliance.

However, it is difficult to determine what user clicks should be filtered because the breadcrumb that is provided to hook does not contain the event or element that was clicked. With static elements that do not change on the click, you can use the selector, but on dynamic buttons/etc that change on the click, the element is often changed from the selector that was provided.

If the event was added to the hook, then it would allow the developer to look for attributes on the elements or parent elements to see if it should be scrubbed from the logging.

Potential ways of solving

There are a few ways that I have seen that this could be added.

1. Add the event to the metadata of a "user" breadcrumb
2. Send the event into leaveBreadcrumb call for a user breadcrumb and then send that through as a second argument of the onBreadcrumb callback.
3. Create an attribute that can be added to elements that can automatically obscure text within that element.

Ways that this would be useful for end users

I envision that the markup for obscuring data would look something like this:

<div>
  <div>Will Show Breadcrumb Text</div>
  <div data-pii>
     <div>
        Will be hidden when clicked
        <div>Even further nested data is hidden</div>
     </div>
  </div>
</div>

For scenario 1, user code to obscure PII could look like this:

// setup
Bugsnag.start({
  apiKey: apiKey,
  onBreadcrumb: function(breadcrumb) {
    const event = breadcrumb.metadata.event
    if(event && event.target.closest("[data-pii]") {
      breadcrumb.metadata.targetText = "[FILTERED]"
    }
  }
})

For scenario 2, user code to obscure PII could look like this:

// setup
Bugsnag.start({
  apiKey: apiKey,
  onBreadcrumb: function(breadcrumb, event) {
    if(event && event.target.closest("[data-pii]") {
      breadcrumb.metadata.targetText = "[FILTERED]"
    }
  }
})

This is just an example, as you would most likely want to filter some of the children as well.

[mattdyoung]

Hi @kylemellander

Thanks for the suggestion! We really like the idea of this. We'll need to discuss internally what the best interface is and see what we can come up with.