Breadcrumbs for JavaScript

Breadcrumbs can help you debug client-side JavaScript applications, and are available to all Honeybadger customers as of today.

One of the things that makes fixing JavaScript errors so difficult is that everything happens on the client-side. When an obscure error happens in a callback, you often lack the context to reproduce it. If the error is critical, you may even resort to deploying debug code to get more information about the events leading up to it.

We added a feature to help, and it's called Breadcrumbs.

A Breadcrumb is a client-side event that happened before an error. Breadcrumbs are collected in realtime as users interact with your client-side application. When an error happens, the breadcrumbs leading up to it are included, filling in the missing context.

Since launching breadcrumbs for Ruby and Elixir last year, our customers have been fixing errors faster and with more confidence. Today we're excited to announce that breadcrumbs are available for JavaScript!

How Can You Use It?

Breadcrumbs are available as of honeybadger-js version 2.1, but disabled by default. To capture breadcrumbs, you must explicitly enable them. We plan to enable breadcrumbs by default in version 3.0.

To enable breadcrumbs in your project:

  1. Update your honeybadger-js package to the latest 2.x version (2.1.1 at the time of this post)
  2. Enable breadcrumbs in your honeybadger-js configuration:
    // ...
    breadcrumbsEnabled: true

Automatic Breadcrumbs

Honeybadger captures the following breadcrumbs automatically by instrumenting browser features:

  • Clicks
  • Console logs
  • Errors
  • History/location changes
  • Network requests (XHR and fetch)

Sending Custom Breadcrumbs

No one knows your app better than you. In addition to the default events, you can report custom breadcrumbs to Honeybadger:

Honeybadger.addBreadcrumb('Loading User', {
  metadata: { user_name: userName }

When an error is subsequently reported, you should see it in the Breadcrumb stack:

You can also customize the category of custom events that are displayed. For more information, check out the guide in the Honeybadger docs.

Let us know how it goes!

We hope that Breadcrumbs will be a helpful addition your JavaScript toolbox. Try it out, and give us a shout if there is anything you would like to see added.

What to do next:
  1. Try Honeybadger for FREE
    Honeybadger helps you find and fix errors before your users can even report them. Get set up in minutes and check monitoring off your to-do list.
    Start free trial
    Easy 5-minute setup — No credit card required
  2. Get the Honeybadger newsletter
    Each month we share news, best practices, and stories from the DevOps & monitoring community—exclusively for developers like you.
    author photo

    Joshua Wood

    Josh started hacking on IRC scripts in the late nineties and has been hacking on computers (and businesses) ever since. As a co-founder of Honeybadger he works on the product, leads marketing and developer relations, and is involved in many open-source projects.

    More articles by Joshua Wood
    Stop wasting time manually checking logs for errors!

    Try the only application health monitoring tool that allows you to track application errors, uptime, and cron jobs in one simple platform.

    • Know when critical errors occur, and which customers are affected.
    • Respond instantly when your systems go down.
    • Improve the health of your systems over time.
    • Fix problems before your customers can report them!

    As developers ourselves, we hated wasting time tracking down errors—so we built the system we always wanted.

    Honeybadger tracks everything you need and nothing you don't, creating one simple solution to keep your application running and error free so you can do what you do best—release new code. Try it free and see for yourself.

    Start free trial
    Simple 5-minute setup — No credit card required

    Learn more

    "We've looked at a lot of error management systems. Honeybadger is head and shoulders above the rest and somehow gets better with every new release."
    — Michael Smith, Cofounder & CTO of YvesBlue

    Honeybadger is trusted by top companies like: