try out honeycomb frontend monitoring

Author: jamesdabbs

packages/viewer/package.json

@@ -17,6 +17,8 @@
     "validate": "svelte-check"
   },
   "dependencies": {
+    "@honeycombio/opentelemetry-web": "^0.15.0",
+    "@opentelemetry/auto-instrumentations-web": "^0.46.0",
     "@pi-base/core": "workspace:*",
     "@sentry/browser": "^7.93.0",
     "bootstrap": "^4.6.2",

packages/viewer/src/routes/+layout.ts

@@ -3,10 +3,34 @@ import { defaultHost } from '@/constants'
 import * as errors from '@/errors'
 import { sync } from '@/gateway'
 import type { LayoutLoad } from './$types'
+import { browser } from '$app/environment'
+
+import { HoneycombWebSDK } from '@honeycombio/opentelemetry-web'
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'
 
 export const load: LayoutLoad = async ({ fetch, url: { host } }) => {
   const dev = host.match(/(dev(elopment)?[.-]|localhost)/) !== null
 
+  if (browser) {
+    const configDefaults = {
+      ignoreNetworkEvents: true,
+    }
+
+    const sdk = new HoneycombWebSDK({
+      debug: dev,
+      apiKey: 'Sx608N12wwH9ZJ6qmHMVnA',
+      serviceName: 'π-base web',
+      instrumentations: [
+        getWebAutoInstrumentations({
+          '@opentelemetry/instrumentation-xml-http-request': configDefaults,
+          '@opentelemetry/instrumentation-fetch': configDefaults,
+          '@opentelemetry/instrumentation-document-load': configDefaults,
+        }),
+      ],
+    })
+    sdk.start()
+  }
+
   const errorHandler = dev
     ? errors.log()
     : errors.sentry({ environment: errorEnv(host) })