Add session ID attribute to frontend spans (open-telemetry#795)

CHANGELOG.md

@@ -11,6 +11,8 @@ release.
 ([#787](https://github.com/open-telemetry/opentelemetry-demo/pull/787))
 * [cart] use 60m TTL for cart entries in redis
 ([#779](https://github.com/open-telemetry/opentelemetry-demo/pull/779))
+* Added app.session.id attribute to frontend spans
+([#795](https://github.com/open-telemetry/opentelemetry-demo/pull/795))
 
 ## v0.1.0
 

src/frontend/utils/enums/AttributeNames.ts

@@ -0,0 +1,17 @@
+// Copyright The OpenTelemetry Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export enum AttributeNames {
+    SESSION_ID = 'app.session.id'
+}

src/frontend/utils/telemetry/FrontendTracer.ts

@@ -20,6 +20,7 @@ import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations
 import { Resource, detectResources, browserDetector } from '@opentelemetry/resources';
 import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
 import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { SessionIdProcessor } from './SessionIdProcessor';
 
 const { NEXT_PUBLIC_OTEL_SERVICE_NAME = '', NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = '' } =
   typeof window !== 'undefined' ? window.ENV : {};
@@ -37,6 +38,8 @@ const FrontendTracer = async (collectorString: string) => {
     resource
   });
 
+  provider.addSpanProcessor(new SessionIdProcessor());
+
   provider.addSpanProcessor(
     new SimpleSpanProcessor(
       new OTLPTraceExporter({

src/frontend/utils/telemetry/InstrumentationMiddleware.ts

@@ -16,6 +16,7 @@ import { NextApiHandler } from 'next';
 import { context, Exception, propagation, Span, SpanKind, SpanStatusCode, trace } from '@opentelemetry/api';
 import { SemanticAttributes } from '@opentelemetry/semantic-conventions';
 import { metrics } from '@opentelemetry/api';
+import { AttributeNames } from '../enums/AttributeNames';
 
 const meter = metrics.getMeter('frontend');
 const requestCounter = meter.createCounter('app.frontend.requests');
@@ -51,6 +52,10 @@ const InstrumentationMiddleware = (handler: NextApiHandler): NextApiHandler => {
       span = trace.getSpan(context.active()) as Span;
     }
 
+    if (request.query['sessionId'] != null) {
+      span.setAttribute(AttributeNames.SESSION_ID, request.query['sessionId']);
+    }
+
     try {
       await runWithSpan(span, async () => handler(request, response));
     } catch (error) {

src/frontend/utils/telemetry/SessionIdProcessor.ts

@@ -0,0 +1,38 @@
+// Copyright The OpenTelemetry Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Context } from "@opentelemetry/api";
+import { ReadableSpan, Span, SpanProcessor } from "@opentelemetry/sdk-trace-web";
+import SessionGateway from "../../gateways/Session.gateway";
+import { AttributeNames } from "../enums/AttributeNames";
+
+const { userId } = SessionGateway.getSession();
+
+export class SessionIdProcessor implements SpanProcessor {
+    forceFlush(): Promise<void> {
+        return Promise.resolve();
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onStart(span: Span, parentContext: Context): void {
+        span.setAttribute(AttributeNames.SESSION_ID, userId);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    onEnd(span: ReadableSpan): void {}
+
+    shutdown(): Promise<void> {
+        return Promise.resolve();
+    }
+}