Skip to content

Commit

Permalink
feature(frontend): adding synthetic attribute flag to FE instrumentat…
Browse files Browse the repository at this point in the history
…ion (#631)

* feature(frontend): adding synthetic attribute flag to FE instrumentation

* feature(frontend): adding frontend documentation
  • Loading branch information
xoscar authored Jan 2, 2023
1 parent 85fb701 commit 40f9f61
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 13 deletions.
8 changes: 8 additions & 0 deletions docs/services/frontend.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -155,6 +160,9 @@ const FrontendTracer = async () => {
'@opentelemetry/instrumentation-fetch': {
propagateTraceHeaderCorsUrls: /.*/,
clearTimingResources: true,
applyCustomAttributesOnSpan(span) {
span.setAttribute('app.synthetic_request', 'false');
},
},
}),
],
Expand Down
3 changes: 3 additions & 0 deletions src/frontend/utils/telemetry/FrontendTracer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ const FrontendTracer = async (collectorString: string) => {
'@opentelemetry/instrumentation-fetch': {
propagateTraceHeaderCorsUrls: /.*/,
clearTimingResources: true,
applyCustomAttributesOnSpan(span) {
span.setAttribute('app.synthetic_request', 'false');
},
},
}),
],
Expand Down
26 changes: 13 additions & 13 deletions src/frontend/utils/telemetry/Instrumentation.js
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -19,8 +19,8 @@ const sdk = new opentelemetry.NodeSDK({
alibabaCloudEcsDetector,
awsEksDetector,
awsEc2Detector,
gcpDetector
]
})
gcpDetector,
],
});

sdk.start()
sdk.start();

0 comments on commit 40f9f61

Please sign in to comment.