WebブラウザにおけるOpenTelemetryの自動計装PoC: Trace via Service Worker

"@opentelemetry/api": "^1.9.0",
"@opentelemetry/core": "^1.25.1",
"@opentelemetry/exporter-trace-otlp-http": "^0.52.1",
"@opentelemetry/otlp-transformer": "^0.52.1",
"@opentelemetry/resources": "^1.25.1",
"@opentelemetry/sdk-trace-base": "^1.25.1",
"@opentelemetry/sdk-trace-web": "^1.25.1",
"@opentelemetry/semantic-conventions": "^1.25.1",

import {
  OTLPExporterBrowserBase,
  OTLPExporterConfigBase,
  OTLPExporterError,
} from "@opentelemetry/otlp-exporter-base";
import {
  IExportTraceServiceResponse,
  JsonTraceSerializer,
} from "@opentelemetry/otlp-transformer";
import { ReadableSpan } from "@opentelemetry/sdk-trace-base";

/**
 * Custom OTLPTraceExporter implementation for Fetch API
 */
export class FetchTraceExporter extends OTLPExporterBrowserBase<
  ReadableSpan,
  IExportTraceServiceResponse
> {
  constructor(config: OTLPExporterConfigBase) {
    // same as OTLPTraceExporter in @opentelemetry/exporter-trace-otlp-http
    super(config, JsonTraceSerializer, "application/json");
  }

  override send(
    items: ReadableSpan[],
    onSuccess: () => void,
    onError: (error: OTLPExporterError) => void
  ): void {
    const body =
      JsonTraceSerializer.serializeRequest(items) ?? new Uint8Array();
    const request = new Request(this.url, {
      method: "POST",
      body,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        ...this._headers,
      },
    });
    const promise = fetch(request).then(onSuccess).catch(onError);
    // for managing the sending promises concurrency
    this._sendingPromises.push(promise);
    promise.finally(() => {
      const index = this._sendingPromises.indexOf(promise);
      this._sendingPromises.splice(index, 1);
    });
  }

  override getDefaultUrl(config: OTLPExporterConfigBase): string {
    if (typeof config.url !== "string") {
      throw new OTLPExporterError("config.url is not a string");
    }
    return config.url;
  }
}

/**
 * SpanProcessor is the interface Tracer SDK uses to allow synchronous hooks
 * for when a {@link Span} is started or when a {@link Span} is ended.
 */
export interface SpanProcessor {
  /**
   * Forces to export all finished spans
   */
  forceFlush(): Promise<void>;

  /**
   * Called when a {@link Span} is started, if the `span.isRecording()`
   * returns true.
   * @param span the Span that just started.
   */
  onStart(span: Span, parentContext: Context): void;

  /**
   * Called when a {@link ReadableSpan} is ended, if the `span.isRecording()`
   * returns true.
   * @param span the Span that just ended.
   */
  onEnd(span: ReadableSpan): void;

  /**
   * Shuts down the processor. Called when SDK is shut down. This is an
   * opportunity for processor to do any cleanup required.
   */
  shutdown(): Promise<void>;
}

/**
 * An implementation of the {@link SpanProcessor} that converts the {@link Span}
 * to {@link ReadableSpan} and passes it to the configured exporter.
 *
 * Only spans that are sampled are converted.
 *
 * NOTE: This {@link SpanProcessor} exports every ended span individually instead of batching spans together, which causes significant performance overhead with most exporters. For production use, please consider using the {@link BatchSpanProcessor} instead.
 */
export class SimpleSpanProcessor implements SpanProcessor {

  constructor(private readonly _exporter: SpanExporter) {
		...
	}
	...
}

/**
 * An interface that allows different tracing services to export recorded data
 * for sampled spans in their own format.
 *
 * To export data this MUST be register to the Tracer SDK using a optional
 * config.
 */
export interface SpanExporter {
  /**
   * Called to export sampled {@link ReadableSpan}s.
   * @param spans the list of sampled Spans to be exported.
   */
  export(
    spans: ReadableSpan[],
    resultCallback: (result: ExportResult) => void
  ): void;

  /** Stops the exporter. */
  shutdown(): Promise<void>;

  /** Immediately export all spans */
  forceFlush?(): Promise<void>;
}

export class OTLPTraceExporter
  extends OTLPExporterBrowserBase<ReadableSpan, IExportTraceServiceResponse>
  implements SpanExporter
{
  constructor(config: OTLPExporterConfigBase = {}) {
    super(config, JsonTraceSerializer, 'application/json');
    //...
  }
  /// ...
}

/**
 * Collector Metric Exporter abstract base class
 */
export abstract class OTLPExporterBrowserBase<ExportItem, ServiceResponse> 
  extends OTLPExporterBase<OTLPExporterConfigBase, ExportItem> {
  //...
  constructor(
    config: OTLPExporterConfigBase = {},
    serializer: ISerializer<ExportItem[], ServiceResponse>,
    contentType: string
  ) {
    super(config);
    this._serializer = serializer;
    this._contentType = contentType;
    this._useXHR =
      !!config.headers || typeof navigator.sendBeacon !== 'function';
    if (this._useXHR) {
      this._headers = Object.assign(
        {},
        parseHeaders(config.headers),
        baggageUtils.parseKeyPairsIntoRecord(
          getEnv().OTEL_EXPORTER_OTLP_HEADERS
        )
      );
    } else {
      this._headers = {};
    }
  }

  //...

  send(
    items: ExportItem[],
    onSuccess: () => void,
    onError: (error: otlpTypes.OTLPExporterError) => void
  ): void {
    //...
    const body = this._serializer.serializeRequest(items) ?? new Uint8Array();

    const promise = new Promise<void>((resolve, reject) => {
      if (this._useXHR) {
        sendWithXhr(
          body,
          this.url,
          {
            ...this._headers,
            'Content-Type': this._contentType,
          },
          this.timeoutMillis,
          resolve,
          reject
        );
      } else {
        sendWithBeacon(
          body,
          this.url,
          { type: this._contentType },
          resolve,
          reject
        );
      }
    }).then(onSuccess, onError);

    this._sendingPromises.push(promise);
    const popPromise = () => {
      const index = this._sendingPromises.indexOf(promise);
      this._sendingPromises.splice(index, 1);
    };
    promise.then(popPromise, popPromise);
  }
}

import {
  OTLPExporterBrowserBase,
  OTLPExporterConfigBase,
  OTLPExporterError,
} from "@opentelemetry/otlp-exporter-base";
import {
  IExportTraceServiceResponse,
  JsonTraceSerializer,
} from "@opentelemetry/otlp-transformer";
import { ReadableSpan } from "@opentelemetry/sdk-trace-base";

/**
 * Custom OTLPTraceExporter implementation for Fetch API
 */
export class FetchTraceExporter extends OTLPExporterBrowserBase<
  ReadableSpan,
  IExportTraceServiceResponse
> {
  constructor(config: OTLPExporterConfigBase) {
    // same as OTLPTraceExporter in @opentelemetry/exporter-trace-otlp-http
    super(config, JsonTraceSerializer, "application/json");
  }

  override send(
    items: ReadableSpan[],
    onSuccess: () => void,
    onError: (error: OTLPExporterError) => void
  ): void {
    const body =
      JsonTraceSerializer.serializeRequest(items) ?? new Uint8Array();
    const request = new Request(this.url, {
      method: "POST",
      body,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        ...this._headers,
      },
    });
    const promise = fetch(request).then(onSuccess).catch(onError);
    // for managing the sending promises concurrency
    this._sendingPromises.push(promise);
    promise.finally(() => {
      const index = this._sendingPromises.indexOf(promise);
      this._sendingPromises.splice(index, 1);
    });
  }

  override getDefaultUrl(config: OTLPExporterConfigBase): string {
    if (typeof config.url !== "string") {
      throw new OTLPExporterError("config.url is not a string");
    }
    return config.url;
  }
}

import { W3CTraceContextPropagator } from "@opentelemetry/core";
import { Resource } from "@opentelemetry/resources";
import {
  BasicTracerProvider,
  SimpleSpanProcessor,
} from "@opentelemetry/sdk-trace-base";
import { StackContextManager } from "@opentelemetry/sdk-trace-web";
import { SEMRESATTRS_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
import { FetchTraceExporter } from "./exporter";

const honeycombExporter = new FetchTraceExporter({
  url: "https://api.honeycomb.io/v1/traces",
  headers: {
    "X-Honeycomb-Team": "...",
  },
});

export function registerTraceProvider(serviceName: string) {
  const provider = new BasicTracerProvider({
    resource: new Resource({
      [SEMRESATTRS_SERVICE_NAME]: serviceName,
    }),
  });
  // export traces to honeycomb.io
  provider.addSpanProcessor(new SimpleSpanProcessor(honeycombExporter));
  // extract|inject w3c trace context
  provider.register({
    propagator: new W3CTraceContextPropagator(),
    contextManager: new StackContextManager(),
  });
  return provider;
}

/// <reference lib="WebWorker" />
import {
  SpanKind,
  SpanOptions,
  context,
  propagation,
  trace,
} from "@opentelemetry/api";

import * as SemanticAttributes from "@opentelemetry/semantic-conventions";
import { registerTraceProvider } from "../opentelemetry/trace-provider";

declare const self: ServiceWorkerGlobalScope;

/**
 * Setup Otel tracer for fetch events
 */
function setupTracer() {
  registerTraceProvider("browser-service-worker");
}

function getRequestSpanOptions(request: Request): SpanOptions {
  return {
    attributes: {
      [SemanticAttributes.SEMATTRS_HTTP_URL]: request.url,
      [SemanticAttributes.SEMATTRS_HTTP_METHOD]: request.method.toUpperCase(),
    },
    kind: SpanKind.CLIENT,
  };
}

// setup tracer on activate
self.addEventListener("activate", (event) => {
  console.log("Service worker activated");
  setupTracer();
});

self.addEventListener("fetch", (event) => {
  const { request } = event;
  // trace only requests from the same origin APIs
  const reqURL = new URL(request.url);
  const isApiRequest =
    reqURL.origin === self.location.origin &&
    reqURL.pathname.startsWith("/api");
  if (!isApiRequest) {
    return;
  }

  // extract context from main thread
  const traceContext = propagation.extract<Headers>(
    context.active(),
    request.headers,
    {
      keys: (carrier) => Object.keys(carrier),
      get: (carrier, key) => carrier.get(key) ?? undefined,
    }
  );

  // start fetch span
  const tracer = trace.getTracer("sw-fetch");
  const spanOptions = getRequestSpanOptions(request);
  const promise = tracer.startActiveSpan(
    "fetch",
    spanOptions,
    traceContext,
    async (span) => {
      // propagate trace context to the server
      const headers = new Headers(request.headers);
      propagation.inject<Headers>(context.active(), headers, {
        set: (carrier, key, value) => carrier.set(key, value),
      });

      return fetch(new Request(request, { headers }))
        .then((resp) => {
          span.setAttribute(
            SemanticAttributes.SEMATTRS_HTTP_STATUS_CODE,
            resp.status
          );
          return resp;
        })
        .finally(() => {
          span.end();
        });
    }
  );
  event.respondWith(promise);
});

  const traceContext = propagation.extract<Headers>(
    context.active(),
    request.headers,
    {
      keys: (carrier) => Object.keys(carrier),
      get: (carrier, key) => carrier.get(key) ?? undefined,
    }
  );

provider.register({
  propagator: new W3CTraceContextPropagator(),
});

const promise = tracer.startActiveSpan(
  "fetch",
  spanOptions,
  traceContext,
  async (span) => {
    // propagate trace context to the server
    const headers = new Headers(request.headers);
    propagation.inject<Headers>(context.active(), headers, {
      set: (carrier, key, value) => carrier.set(key, value),
    });

    return fetch(new Request(request, { headers }))
      .then((resp) => {
        span.setAttribute(
          SemanticAttributes.SEMATTRS_HTTP_STATUS_CODE,
          resp.status
        );
        return resp;
      })
      .finally(() => {
        span.end();
      });
  }
);
event.respondWith(promise);

import {
  SpanKind,
  SpanOptions,
  context,
  propagation,
  trace,
} from "@opentelemetry/api";
import * as SemanticAttributes from "@opentelemetry/semantic-conventions";
import { registerTraceProvider } from "../../opentelemetry/trace-provider";

/**
 * Setup Otel tracer for fetch events
 */
function setupTracer() {
  registerTraceProvider("worker-api");
}

function getTracer() {
  return trace.getTracer("worker-api");
}

function getRequestSpanOptions(request: Request): SpanOptions {
  return {
    attributes: {
      [SemanticAttributes.SEMATTRS_HTTP_URL]: request.url,
      [SemanticAttributes.SEMATTRS_HTTP_METHOD]: request.method,
    },
    kind: SpanKind.SERVER,
  };
}

/**
 * Echo handler: returns the request body
 */
export const onRequest: PagesFunction = async (event) => {
  setupTracer();

  const { request } = event;
  console.log("headers", request.headers);
  // extract context from client
  const traceContext = propagation.extract<Headers>(
    context.active(),
    request.headers,
    {
      keys: (carrier) => Array.from(carrier.keys()),
      get: (carrier, key) => carrier.get(key) ?? undefined,
    }
  );

  // start onRequest span
  const tracer = trace.getTracer("worker-api");
  const spanOptions = getRequestSpanOptions(request);
  return tracer.startActiveSpan(
    "onRequest",
    spanOptions,
    traceContext,
    async (span) => {
      try {
        const message = await generateMessage();
        const respBody = { message };
        span.setAttribute(SemanticAttributes.SEMATTRS_HTTP_STATUS_CODE, 200);
        return new Response(JSON.stringify(respBody), {
          headers: { "content-type": "application/json" },
        });
      } catch (error) {
        span.setAttribute(SemanticAttributes.SEMATTRS_HTTP_STATUS_CODE, 500);
        return new Response("Internal Server Error", { status: 500 });
      } finally {
        span.end();
      }
    }
  );
};

async function generateMessage(): Promise<string> {
  return getTracer().startActiveSpan("generateMessage", (span) => {
    // simulate async operation
    return new Promise<string>((resolve) => {
      setTimeout(() => {
        resolve("Hello, world!");
        span.end();
      }, 100);
    });
  });
}