feature(frontend): adding synthetic attribute flag to FE instrumentat…

…ion (open-telemetry#631) * feature(frontend): adding synthetic attribute flag to FE instrumentation * feature(frontend): adding frontend documentation
jmichalak9 · Jan 2, 2023 · 55336dd · 55336dd
1 parent 664498a
commit 55336dd
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/docs/services/frontend.md b/docs/services/frontend.md
@@ -118,6 +118,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';
@@ -155,6 +160,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/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
@@ -1,15 +1,15 @@
-const opentelemetry = require("@opentelemetry/sdk-node")
-const { getNodeAutoInstrumentations } = require("@opentelemetry/auto-instrumentations-node")
-const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-grpc')
-const { alibabaCloudEcsDetector } = require('@opentelemetry/resource-detector-alibaba-cloud')
-const { awsEc2Detector, awsEksDetector } = require('@opentelemetry/resource-detector-aws')
-const { containerDetector } = require('@opentelemetry/resource-detector-container')
-const { gcpDetector } = require('@opentelemetry/resource-detector-gcp')
-const { envDetector, hostDetector, osDetector, processDetector } = require('@opentelemetry/resources')
+const opentelemetry = require('@opentelemetry/sdk-node');
+const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
+const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-grpc');
+const { alibabaCloudEcsDetector } = require('@opentelemetry/resource-detector-alibaba-cloud');
+const { awsEc2Detector, awsEksDetector } = require('@opentelemetry/resource-detector-aws');
+const { containerDetector } = require('@opentelemetry/resource-detector-container');
+const { gcpDetector } = require('@opentelemetry/resource-detector-gcp');
+const { envDetector, hostDetector, osDetector, processDetector } = require('@opentelemetry/resources');
 
 const sdk = new opentelemetry.NodeSDK({
   traceExporter: new OTLPTraceExporter(),
-  instrumentations: [ getNodeAutoInstrumentations() ],
+  instrumentations: [getNodeAutoInstrumentations()],
   resourceDetectors: [
     containerDetector,
     envDetector,
@@ -19,8 +19,8 @@ const sdk = new opentelemetry.NodeSDK({
     alibabaCloudEcsDetector,
     awsEksDetector,
     awsEc2Detector,
-    gcpDetector
-  ]
-})
+    gcpDetector,
+  ],
+});
 
-sdk.start()
+sdk.start();