---
title: "Honeybadger frontend integration in Neeto apps"
description: "Honeybadger frontend integration in web apps"
canonical_url: "https://www.bigbinary.com/blog/honeybadger-frontend-integration-in-neeto-apps"
markdown_url: "https://www.bigbinary.com/blog/honeybadger-frontend-integration-in-neeto-apps.md"
---

# Honeybadger frontend integration in Neeto apps

Honeybadger frontend integration in web apps

- Author: Calvin Chiramal
- Published: December 12, 2023
- Categories: Misc

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:

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

With NeetoDeploy, we [didn't need this step](https://youtu.be/r4g-a6k5SYY?t=176)
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](https://docs.honeybadger.io/lib/javascript/guides/using-source-maps/#versioning-your-project)
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](https://youtu.be/h5svJ15Vg5Q) on setting it up following the
   [React integration guide](https://docs.honeybadger.io/lib/javascript/integration/react/).

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](https://youtu.be/h5svJ15Vg5Q)
- [Honeybadger integration basics](https://youtu.be/vtIk6g-NekA)
- [Honeybadger integration in the Neeto ecosystem](https://youtu.be/yRrKBnN00Yc)
- [Sourcemaps explained](https://youtu.be/qZD9pus_9ro)
- [Uploading sourcemap to honeybadger](https://youtu.be/r4g-a6k5SYY)
- [Sourcemaps in action within Honeybadger errors](https://youtu.be/tmnxx7HZ5bw)
- [Handling CDN based application bundles](https://youtu.be/AZZWDMRuuY8)

We've created a YouTube
[playlist](https://www.youtube.com/playlist?list=PLRpdquznQk7E6UPRx7yyAAJrPYwxXqPS4)
of the above videos for easy access.

## Links

- [Human page](https://www.bigbinary.com/blog/honeybadger-frontend-integration-in-neeto-apps)