Legible click breadcrumb selectors for JavaScript

By default, Honeybadger's ui.click breadcrumbs build a CSS selector from each element's tag, ID, and classes.

In apps built with utility-CSS frameworks like Tailwind, this produces a wall of unreadable text:

body > div#root > main > div.flex.min-h-screen.flex-col.font-sans.antialiased > ...

Now you can tag clickable elements you care about with a data-hb-name attribute and get a legible, meaningful selector instead — like deal-card > h3.text-left.font-semibold.

How it works:

Add data-hb-name to any element:

<div data-hb-name="deal-card">
<h3 class="text-left font-semibold">Acme Corp</h3>
</div>

Clicking the heading now records the selector deal-card > h3.text-left.font-semibold instead of the full ancestor chain from <body>. When a clicked element (or any of its ancestors) carries the hb attribute, the attribute replaces that element's selector segment, and the nearest named ancestor anchors the selector, dropping everything above it.

Already have identifying attributes? Reuse them via breadcrumbsSelectorAttributes.

Honeybadger.configure({
breadcrumbsSelectorAttributes: ["data-hb-n]
});

Just remember: the first named attribute in a list wins. You can set it to [] instead to disable the behavior entirely.

Read more about configuring your selectors in the JavaScript documentation library.

Try Honeybadger for FREE