A static-site wrapper for the Honeycomb Web SDK

If you have a static web site, you can wrap the Honeycomb Web SDK in a script to include in your site. This repository is an example of that.

Using it

Fork or clone this repo, build it, and then copy the output to your static site.

git clone https://github.com/jessitron/hny-web-static-site.git
cd hny-web-static-site
npm install
npm run build

Now copy it to your static site. This beats downloading mine from the CDN; make it yours.

cp dist/hny-web-static-site.js /path/to/your/site/source/hny-web-static-site.js`

Now, in your site's HTML, include this script and initialize it with your Honeycomb API key:

<script src="hny-web-static-site.js"></script>
<script>
  window.Honeycomb = window.Honeycomb || { init() {} };
  Honeycomb.init({
    apiKey: "your honeycomb api key",
    serviceName: "name of your website",
  });
</script>

Upgrading dependencies

Use the latest version:

npm install @honeycombio/opentelemetry-web@latest @opentelemetry/auto-instrumentations-web@latest

Building

npm run build

Output is dist/hny-web-static-site.js

Testing

Get a Honeycomb API key and set it as an environment variable:

export HONEYCOMB_API_KEY=your-api-key

Now serve the test page:

npm run test

That should pop open a browser. Look at the console to see whether it looks happy, and click the link there to look at events in Honeycomb.