Honeybadger frontend integration in Neeto apps

At neeto, we integrated Honeybadger to track all errors in our applications at runtime. We also integrated Honeybadger with Github to automatically raise issues in the respective repositories when errors are caught. This blog is an in-depth guide on how we integrated Honeybadger on the frontend part of our web apps.

For our apps deployed on Heroku, we used the following command to get the latest commit hash as an environment variable in the Heroku server on each build:

heroku labs:enable runtime-dyno-metadata -a your-app-name

With NeetoDeploy, we didn't need this step since git is available in the console and we used git commands to set the latest commit hash as the Honeybadger revision. Honeybadger uses the revision to associate maps with the bundle when the bundle name doesn't change.

Steps to integrate Honeybadger:

1. Create a new project in the Honeybadger dashboard. We've made a video on setting it up following the React integration guide.

2. Set the environment variable HONEYBADGER_JS_API_KEY with the Honeybadger project's API key. The API key can be copied from Settings => API Keys.

In depth guides for Honeybadger integration & sourcemap upload:

• What is honeybadger
• Honeybadger integration basics
• Honeybadger integration in the Neeto ecosystem
• Sourcemaps explained
• Uploading sourcemap to honeybadger
• Sourcemaps in action within Honeybadger errors
• Handling CDN based application bundles

We've created a YouTube playlist of the above videos for easy access.