add instrumentation & set key env

src/frontend/utils/telemetry/HoneycombFrontendTracer.ts

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
-import { HoneycombWebSDK } from '@honeycombio/opentelemetry-web';
+import { HoneycombWebSDK, WebVitalsInstrumentation } from '@honeycombio/opentelemetry-web';
+// ^ on github we use this, in the docs we omit WebVitals and do it piecemeal. IMO this should be explained if they're going to stay different.
 import {SessionIdProcessor} from "./SessionIdProcessor";
 
 
@@ -12,9 +13,11 @@ const { NEXT_PUBLIC_OTEL_SERVICE_NAME = '', NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACE
 const FrontendTracer = async () => {
   const sdk = new HoneycombWebSDK({
     skipOptionsValidation: true, // because we are not including apiKey
+                                 // but WHY aren't we? It's because we're not direct sending to api, we're using the collector
     serviceName: NEXT_PUBLIC_OTEL_SERVICE_NAME,
     spanProcessor: new SessionIdProcessor(),
     endpoint: NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT || 'http://localhost:4318/v1/traces',
+    // this will be updated to the CA collector once instrumentation is expanded and this is moved to k8s
     instrumentations: [getWebAutoInstrumentations({
       '@opentelemetry/instrumentation-fetch': {
         propagateTraceHeaderCorsUrls: /.*/,
@@ -23,7 +26,8 @@ const FrontendTracer = async () => {
           span.setAttribute('app.synthetic_request', IS_SYNTHETIC_REQUEST);
         },
       },
-    })], // add automatic instrumentation
+    }), new WebVitalsInstrumentation()], // add automatic instrumentation
+                                         // ^ update docs to explain what this means, it's supposed to mean that more instrumentation (like webvitals) should be added there, but it isn't clear imo.
   });
   sdk.start();
 };

src/otelcollector/otelcol-config-extras.yml

@@ -3,12 +3,18 @@
 
 # extra settings to be merged into OpenTelemetry Collector configuration
 # do not delete this file
-
+extraEnvs:
+  - name: HONEYCOMB_API_KEY
+    valueFrom:
+      secretKeyRef:
+        name: honeycomb
+        key: api-key
+
 exporters:
   otlp/honeycomb:
     endpoint: "api.honeycomb.io:443"
     headers:
-      "x-honeycomb-team": "<HONEYCOMB_API_KEY>"
+      "x-honeycomb-team": "${HONEYCOMB_API_KEY}"
       "x-honeycomb-dataset": "webstore-metrics"
 
 service: