How to Track Errors in Your Chrome Extension

Building a Chrome extension? Here’s a way to track and report errors using Honeybadger. In this post, Sam Smith of Sigstr shares how he set up Honeybadger to track errors, using CommonJS examples in our document library.

Looking to integrate Honeybadger in your Chrome Extension? Take a look at our Chrome Extension Integration Guide!

Releasing a new feature or product is always a harrowing adventure.

I’ve used Honeybadger for various projects over the last few years, and naturally, my team set it up when I came to build Sigstr. We love the ability to see what our customers are experiencing. It lets us be hyper-reactive to problems, helps our product team prioritize tasks, and provides deeper insights to our customer service team.

When my team started building Sigstr’s Chrome Extension to support our new Dynamic Campaign feature, we quickly realized the need to gain awareness into application behaviors encountered by users who installed the extension.

So I wondered how we could use Honeybadger to report errors for our Chrome extension. Here’s what we did.

Create a New Project in Honeybadger

We created a new project in our Honeybadger account so we could track the errors separately from our other projects. A new project gives us a new Honeybadger API key to use in the steps below.

Set up Honeybadger in the Code

Using the “CommonJS” examples from the Honeybadger install docs, we went about setting up the requirements needed to report notifications back to Honeybadger.

First, we added the latest honeybadger.min.js source to the root of our extension’s project. At time of build, that was

Next, we made sure that Honeybadger is listed as an accessible resource in our manifest.json file. We also made sure that manifest.json listed the content.js file, which we used to include the Honeybadger source.

"content_scripts": [
        "js": ["content.js"]
"web_accessible_resources": [

Then, inside of content.js, we loaded the Honeybadger source into the DOM.

var s = document.createElement('script');
s.src = chrome.extension.getURL('honeybadger.min.js');
(document.head || document.documentElement).appendChild(s);

Sending Notifications to Honeybadger

Now, we’re able to use the Honeybadger library within our extension and start reporting notifications and errors back to the new project we created.

Within our main.js file for the extension, we set up a new Honeybadger configuration. We also added in context data so we can get a better handle on which users are associated with each notification.

    api_key: your_api_key_here
Honeybadger.setContext({ user_email: user_email_here });

Sending a Notification

With Honeybadger all set up, we created a simple test call in main.js to send a notification to our new project.

try {
} catch(error) {

Chrome extension project

After packaging the above code into a new test version, we installed the test extension in Chrome. Executing the new tracking code results in a notification being reported to Honeybadger!

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

    Sam Smith

    Sam Smith is VP of Product for He has a passion for problem solving and leveraging technology to improve lives. Outside of Sigstr he can be found biking throughout and enjoying the vibrant culture of Indianapolis.

    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: