From 97e3f29db73135c3543e663b5a1782e29d186915 Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Mon, 12 Dec 2022 12:06:16 -0600
Subject: [PATCH 1/2] feature(frontend): adding synthetic attribute flag to FE
 instrumentation

---
 src/frontend/Dockerfile                        |  2 +-
 src/frontend/utils/telemetry/FrontendTracer.ts |  3 +++
 .../utils/telemetry/Instrumentation.js         | 18 ++++++++++++------
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile
index 51fdaa743b..f7db0a331c 100644
--- a/src/frontend/Dockerfile
+++ b/src/frontend/Dockerfile
@@ -18,7 +18,7 @@ RUN npm run build
 
 FROM node:18-alpine AS runner
 WORKDIR /app
-RUN apk add --no-cache protoc
+RUN apk add --no-cache protobuf-dev protoc
 
 ENV NODE_ENV=production
 
diff --git a/src/frontend/utils/telemetry/FrontendTracer.ts b/src/frontend/utils/telemetry/FrontendTracer.ts
index 8ad93a9489..e8bf0090a2 100644
--- a/src/frontend/utils/telemetry/FrontendTracer.ts
+++ b/src/frontend/utils/telemetry/FrontendTracer.ts
@@ -43,6 +43,9 @@ const FrontendTracer = async (collectorString: string) => {
         '@opentelemetry/instrumentation-fetch': {
           propagateTraceHeaderCorsUrls: /.*/,
           clearTimingResources: true,
+          applyCustomAttributesOnSpan(span) {
+            span.setAttribute('app.synthetic_request', 'false');
+          },
         },
       }),
     ],
diff --git a/src/frontend/utils/telemetry/Instrumentation.js b/src/frontend/utils/telemetry/Instrumentation.js
index 63b2a2329f..afcab87623 100644
--- a/src/frontend/utils/telemetry/Instrumentation.js
+++ b/src/frontend/utils/telemetry/Instrumentation.js
@@ -1,10 +1,16 @@
-const opentelemetry = require("@opentelemetry/sdk-node")
-const { getNodeAutoInstrumentations } = require("@opentelemetry/auto-instrumentations-node")
-const { OTLPTraceExporter } =  require('@opentelemetry/exporter-trace-otlp-grpc')
+const opentelemetry = require('@opentelemetry/sdk-node');
+const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
+const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-grpc');
 
 const sdk = new opentelemetry.NodeSDK({
   traceExporter: new OTLPTraceExporter(),
-  instrumentations: [ getNodeAutoInstrumentations() ]
-})
+  instrumentations: [
+    getNodeAutoInstrumentations({
+      '@opentelemetry/instrumentation-fs': {
+        enabled: false,
+      },
+    }),
+  ],
+});
 
-sdk.start()
+sdk.start();

From a047ece1ca55d709e38d358178169d11cd70b881 Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Mon, 19 Dec 2022 13:26:23 -0600
Subject: [PATCH 2/2] feature(frontend): adding frontend documentation

---
 docs/services/frontend.md                       | 8 ++++++++
 src/frontend/utils/telemetry/Instrumentation.js | 6 +-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/services/frontend.md b/docs/services/frontend.md
index 5dcca34b67..dd3f3b98c3 100644
--- a/docs/services/frontend.md
+++ b/docs/services/frontend.md
@@ -102,6 +102,11 @@ and register web specific auto-instrumentation libraries. Since the browser
 will send data to an OpenTelemetry collector that will likely be on a separate
 domain, CORS headers are also setup accordingly.
 
+As part of the changes to carry over the `synthetic_request` attribute flag for
+the backend services, the `applyCustomAttributesOnSpan` configuration function
+has been added to the `instrumentation-fetch` library custom span attributes logic
+that way every browser-side span will include it.
+
 ```typescript
 import { CompositePropagator, W3CBaggagePropagator, W3CTraceContextPropagator } from '@opentelemetry/core';
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
@@ -139,6 +144,9 @@ const FrontendTracer = async () => {
         '@opentelemetry/instrumentation-fetch': {
           propagateTraceHeaderCorsUrls: /.*/,
           clearTimingResources: true,
+          applyCustomAttributesOnSpan(span) {
+             span.setAttribute('app.synthetic_request', 'false');
+          },
         },
       }),
     ],
diff --git a/src/frontend/utils/telemetry/Instrumentation.js b/src/frontend/utils/telemetry/Instrumentation.js
index afcab87623..59b2d31e46 100644
--- a/src/frontend/utils/telemetry/Instrumentation.js
+++ b/src/frontend/utils/telemetry/Instrumentation.js
@@ -5,11 +5,7 @@ const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-grpc')
 const sdk = new opentelemetry.NodeSDK({
   traceExporter: new OTLPTraceExporter(),
   instrumentations: [
-    getNodeAutoInstrumentations({
-      '@opentelemetry/instrumentation-fs': {
-        enabled: false,
-      },
-    }),
+    getNodeAutoInstrumentations(),
   ],
 });