fe-tracing

Author: tomer-friedman

src/frontend/utils/telemetry/Instrumentation.js

@@ -13,6 +13,7 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter: new OTLPTraceExporter(),
   instrumentations: [
     getNodeAutoInstrumentations({
+      '@opentelemetry/instrumentation-http': httpInstrumentationConfig,
       '@opentelemetry/instrumentation-fs': {
         enabled: false,
       },

src/frontend/utils/telemetry/otel-custom/constants.js

@@ -0,0 +1,11 @@
+const HttpExtendedAttribute = {
+    HTTP_REQUEST_HEADERS: 'http.request.headers',
+    HTTP_REQUEST_BODY:  'http.request.body',
+    HTTP_RESPONSE_HEADERS: 'http.response.headers',
+    HTTP_RESPONSE_BODY: 'http.response.body',
+    HTTP_PATH: 'http.path',
+}
+
+module.exports = {
+    HttpExtendedAttribute,
+};

src/frontend/utils/telemetry/otel-custom/http.js

@@ -0,0 +1,101 @@
+const { IncomingMessage, ClientRequest } = require('http');
+const { HttpExtendedAttribute } = require('./constants');
+const { shouldCaptureBodyByMimeType } = require('./mime-type');
+const { StreamChunks } = require('./stream-chunks');
+
+const streamChunksKey = Symbol('opentelemetry.instrumentation.http.StreamChunks');
+
+const httpCustomAttributes = (
+    span,
+    request,
+    response
+) => {
+    if (request instanceof ClientRequest) {
+        const reqPath = request.path.split('?')[0];
+        span.setAttribute(HttpExtendedAttribute.HTTP_PATH, reqPath);
+        span.setAttribute(
+            HttpExtendedAttribute.HTTP_REQUEST_HEADERS,
+            JSON.stringify((request).getHeaders())
+        );
+    }
+    if (response instanceof IncomingMessage) {
+        span.setAttribute(
+            HttpExtendedAttribute.HTTP_RESPONSE_HEADERS,
+            JSON.stringify((response).headers)
+        );
+    }
+
+    const requestBody = request[streamChunksKey];
+    if (requestBody) {
+        span.setAttribute(HttpExtendedAttribute.HTTP_REQUEST_BODY, requestBody.getBody());
+    }
+
+    const responseBody = response[streamChunksKey];
+    if (responseBody) {
+        span.setAttribute(HttpExtendedAttribute.HTTP_RESPONSE_BODY, responseBody.getBody());
+    }
+};
+
+const httpCustomAttributesOnRequest = (span, request) => {
+    if (request instanceof ClientRequest) {
+        const requestMimeType = request.getHeader('content-type');
+        if (!shouldCaptureBodyByMimeType(requestMimeType)) {
+            span.setAttribute(
+                HttpExtendedAttribute.HTTP_REQUEST_BODY,
+                `Request body not collected due to unsupported mime type: ${requestMimeType}`
+            );
+            return;
+        }
+
+        let oldWrite = request.write;
+        request[streamChunksKey] = new StreamChunks();
+        request.write = function (data) {
+            const expectDevData = request[streamChunksKey];
+            expectDevData?.addChunk(data);
+            return oldWrite.call(request, data);
+        };
+    }
+};
+
+const httpCustomAttributesOnResponse = (span, response) => {
+    if (response instanceof IncomingMessage) {
+        const responseMimeType = response.headers?.['content-type'];
+        if (!shouldCaptureBodyByMimeType(responseMimeType)) {
+            span.setAttribute(
+                HttpExtendedAttribute.HTTP_RESPONSE_BODY,
+                `Response body not collected due to unsupported mime type: ${responseMimeType}`
+            );
+            return;
+        }
+
+        response[streamChunksKey] = new StreamChunks();
+        const origPush = response.push;
+        response.push = function (chunk) {
+            if (chunk) {
+                const expectDevData = response[streamChunksKey];
+                expectDevData?.addChunk(chunk);
+            }
+            return origPush.apply(this, arguments);
+        };
+    }
+};
+
+const httpInstrumentationConfig = {
+    applyCustomAttributesOnSpan: httpCustomAttributes,
+    requestHook: httpCustomAttributesOnRequest,
+    responseHook: httpCustomAttributesOnResponse,
+    headersToSpanAttributes: {
+        client: {
+            requestHeaders: ['traceloop_id'],
+            responseHeaders: ['traceloop_id'],
+        },
+        server: {
+            requestHeaders: ['traceloop_id'],
+            responseHeaders: ['traceloop_id'],
+        },
+    },
+};
+
+module.exports = {
+    httpInstrumentationConfig
+};

src/frontend/utils/telemetry/otel-custom/mime-type.js

@@ -0,0 +1,22 @@
+const allowedMimeTypePrefix = [
+    'text',
+    'multipart/form-data',
+    'application/json',
+    'application/ld+json',
+    'application/rtf',
+    'application/x-www-form-urlencoded',
+    'application/xml',
+    'application/xhtml',
+];
+
+const shouldCaptureBodyByMimeType = (mimeType) => {
+    try {
+        return !mimeType || allowedMimeTypePrefix.some((prefix) => mimeType.startsWith(prefix));
+    } catch {
+        return true;
+    }
+};
+
+module.exports = {
+    shouldCaptureBodyByMimeType,
+};

src/frontend/utils/telemetry/otel-custom/stream-chunks.js

@@ -0,0 +1,33 @@
+// for body with at most this length, full body will be captured.
+// for large body with more than this amount of bytes, we will
+// collect at least this amount of bytes, but might truncate after it
+const MIN_COLLECTED_BODY_LENGTH = 524288;
+
+class StreamChunks {
+    chunks;
+    length;
+
+    constructor() {
+        this.chunks = [];
+        this.length = 0;
+    }
+
+    addChunk(chunk) {
+        if (this.length >= MIN_COLLECTED_BODY_LENGTH) return;
+
+        const chunkLength = chunk?.length;
+        if (!chunkLength) return;
+
+        this.chunks.push(chunk);
+        this.length += chunkLength;
+    }
+
+    getBody() {
+        return this.chunks.join('');
+    }
+}
+
+module.exports = {
+    StreamChunks,
+    MIN_COLLECTED_BODY_LENGTH,
+};