try out honeycomb frontend monitoring (#217)

* try out honeycomb frontend monitoring

* refactor: extract environment handling

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/environment.ts

@@ -0,0 +1,13 @@
+export type Environment = 'production' | 'deploy-preview' | 'dev'
+
+export function forHost(host: string): Environment {
+  if (['topology.pi-base.org', 'topology.pages.dev'].includes(host)) {
+    return 'production'
+  }
+
+  if (host.includes('pages.dev')) {
+    return 'deploy-preview'
+  }
+
+  return 'dev'
+}

packages/viewer/src/errors.ts

@@ -1,12 +1,11 @@
 import * as Sentry from '@sentry/browser'
 import { build, sentryIngest } from '@/constants'
+import type { Environment } from './environment'
 
 type Meta = Record<string, unknown>
 
 export type Handler = (error: Error, meta?: Meta) => void
 
-export type Environment = 'production' | 'deploy-preview' | 'dev'
-
 export function log(): Handler {
   return function handle(error: Error, meta: Meta = {}) {
     console.error(error, meta)
@@ -15,14 +14,14 @@ export function log(): Handler {
 
 export function sentry({
   dsn = sentryIngest,
-  environment,
+  env,
 }: {
   dsn?: string
-  environment: Environment
+  env: Environment
 }): Handler {
   const release = `pi-base@${build.version}`
 
-  Sentry.init({ dsn, release, environment })
+  Sentry.init({ dsn, release, environment: env })
 
   return function handle(error: Error, meta: Meta = {}) {
     Sentry.withScope(scope => {

packages/viewer/src/honeycomb.ts

@@ -0,0 +1,38 @@
+import { HoneycombWebSDK } from '@honeycombio/opentelemetry-web'
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web'
+import type { Environment } from '@/environment'
+
+// These are frontend-embedded ingest-only keys that are safe to expose
+const apiKeys: Record<Environment, string | null> = {
+  'deploy-preview':
+    'hcaik_01jqmng6xbp8wnh1fg2srx4cbpmbyk4kb7kq8ngm8stx5ynv4t1c4x0qm9',
+  production:
+    'hcaik_01jqmnfmeqprbx9x3vyr0rgj5sads64hnctxqkqcbp4bfhjf56s56dsszs',
+  dev: null,
+}
+
+const configDefaults = {
+  ignoreNetworkEvents: true,
+}
+
+export function initializeHoneycomb({ env }: { env: Environment }) {
+  const apiKey = apiKeys[env]
+  if (!apiKey) {
+    return
+  }
+
+  const sdk = new HoneycombWebSDK({
+    serviceName: 'π-base web',
+    apiKey,
+    debug: env !== 'production',
+    instrumentations: [
+      getWebAutoInstrumentations({
+        '@opentelemetry/instrumentation-xml-http-request': configDefaults,
+        '@opentelemetry/instrumentation-fetch': configDefaults,
+        '@opentelemetry/instrumentation-document-load': configDefaults,
+      }),
+    ],
+  })
+
+  sdk.start()
+}

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

@@ -3,13 +3,19 @@ import { defaultHost } from '@/constants'
 import * as errors from '@/errors'
 import { sync } from '@/gateway'
 import type { LayoutLoad } from './$types'
+import { browser } from '$app/environment'
+import { initializeHoneycomb } from '@/honeycomb'
+import { forHost } from '@/environment'
 
 export const load: LayoutLoad = async ({ fetch, url: { host } }) => {
-  const dev = host.match(/(dev(elopment)?[.-]|localhost)/) !== null
+  const env = forHost(host)
+  const dev = env === 'dev'
 
-  const errorHandler = dev
-    ? errors.log()
-    : errors.sentry({ environment: errorEnv(host) })
+  if (browser) {
+    initializeHoneycomb({ env })
+  }
+
+  const errorHandler = dev ? errors.log() : errors.sentry({ env })
 
   const context = initialize({
     showDev: dev,
@@ -24,15 +30,3 @@ export const load: LayoutLoad = async ({ fetch, url: { host } }) => {
 
   return context
 }
-
-function errorEnv(host: string): errors.Environment {
-  if (['topology.pi-base.org', 'topology.pages.dev'].includes(host)) {
-    return 'production'
-  }
-
-  if (host.includes('pages.dev')) {
-    return 'deploy-preview'
-  }
-
-  return 'dev'
-}