chore: (not working) experiment with otel-web

apps/pay/package.json

@@ -14,6 +14,18 @@
   "dependencies": {
     "@apollo/client": "^3.7.12",
     "@galoymoney/client": "^0.2.2",
+    "@opentelemetry/api": "^1.7.0",
+    "@opentelemetry/context-zone": "^1.21.0",
+    "@opentelemetry/core": "^1.21.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.48.0",
+    "@opentelemetry/instrumentation": "^0.47.0",
+    "@opentelemetry/instrumentation-fetch": "^0.48.0",
+    "@opentelemetry/instrumentation-xml-http-request": "^0.48.0",
+    "@opentelemetry/propagator-b3": "^1.21.0",
+    "@opentelemetry/sdk-metrics": "^1.21.0",
+    "@opentelemetry/sdk-trace-base": "^1.20.0",
+    "@opentelemetry/sdk-trace-web": "^1.21.0",
+    "@opentelemetry/semantic-conventions": "^1.21.0",
     "@t3-oss/env-nextjs": "^0.6.1",
     "bech32": "^2.0.0",
     "bitcoinjs-lib": "5.0.5",

apps/pay/pages/index.tsx

@@ -12,6 +12,8 @@ import { useRouter } from "next/router"
 import CurrencyDropdown from "../components/Currency/currency-dropdown"
 import { getClientSideGqlConfig } from "../config/config"
 
+import initializeTelemetry from "./otel"
+
 const GET_NODE_STATS = gql`
   query nodeIds {
     globals {
@@ -29,6 +31,8 @@ function Home() {
     localStorage.getItem("display") ?? "USD",
   )
 
+  initializeTelemetry()
+
   const router = useRouter()
   const [username, setUsername] = React.useState<string>("")
 
@@ -68,8 +72,8 @@ function Home() {
                             {error
                               ? "Unavailable"
                               : loading
-                                ? "Loading..."
-                                : data.globals.nodesIds[0]}
+                              ? "Loading..."
+                              : data.globals.nodesIds[0]}
                           </p>
                         </ListGroup.Item>
                         <ListGroup.Item>

apps/pay/pages/otel.ts

@@ -0,0 +1,43 @@
+// Importing necessary modules from OpenTelemetry packages
+import { context, trace } from "@opentelemetry/api"
+import { ConsoleSpanExporter, SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base"
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http"
+import { WebTracerProvider } from "@opentelemetry/sdk-trace-web"
+import { FetchInstrumentation } from "@opentelemetry/instrumentation-fetch"
+import { ZoneContextManager } from "@opentelemetry/context-zone"
+import { B3Propagator } from "@opentelemetry/propagator-b3"
+import { registerInstrumentations } from "@opentelemetry/instrumentation"
+
+// Define the initialization function
+export default function initializeTelemetry() {
+  const provider = new WebTracerProvider()
+
+  provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter()))
+  provider.register({
+    contextManager: new ZoneContextManager(),
+    propagator: new B3Propagator(),
+  })
+
+  registerInstrumentations({
+    instrumentations: [
+      new FetchInstrumentation({
+        ignoreUrls: [/localhost:8090\/sockjs-node/],
+        propagateTraceHeaderCorsUrls: [
+          "https://cors-test.appspot.com/test",
+          "https://httpbin.org/get",
+        ],
+        clearTimingResources: true,
+      }),
+    ],
+  })
+
+  // Example of how you might use the provider to create a tracer
+  // This example function doesn't do anything by itself but is here to show how you might use it
+  const webTracerWithZone = provider.getTracer("example-tracer-web")
+
+  // Placeholder for any setup logic you might have
+  console.log("OpenTelemetry initialized")
+}
+
+// Note: This file does not include the event listener setup from the original otel.js example,
+// as those are typically handled within the components or pages themselves in a React application.

apps/pay/public/otel.js

@@ -0,0 +1,72 @@
+const { context, trace } = require( '@opentelemetry/api');
+const { ConsoleSpanExporter, SimpleSpanProcessor } = require( '@opentelemetry/sdk-trace-base');
+const { OTLPTraceExporter } = require( '@opentelemetry/exporter-trace-otlp-http');
+const { WebTracerProvider } = require( '@opentelemetry/sdk-trace-web');
+const { FetchInstrumentation } = require( '@opentelemetry/instrumentation-fetch');
+const { ZoneContextManager } = require( '@opentelemetry/context-zone');
+const { B3Propagator } = require( '@opentelemetry/propagator-b3');
+const { registerInstrumentations } = require( '@opentelemetry/instrumentation');
+
+const provider = new WebTracerProvider();
+
+// Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests
+// to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the
+// exporter without delay
+// provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter()));
+provider.register({
+  contextManager: new ZoneContextManager(),
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    new FetchInstrumentation({
+      ignoreUrls: [/localhost:8090\/sockjs-node/],
+      propagateTraceHeaderCorsUrls: [
+        'https://cors-test.appspot.com/test',
+        'https://httpbin.org/get',
+      ],
+      clearTimingResources: true,
+    }),
+  ],
+});
+
+const webTracerWithZone = provider.getTracer('example-tracer-web');
+
+const getData = (url) => fetch(url, {
+  method: 'GET',
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
+});
+
+// example of keeping track of context between async operations
+const prepareClickEvent = () => {
+  const url = 'https://httpbin.org/get';
+
+  const element = document.getElementById('button1');
+
+  const onClick = () => {
+    const singleSpan = webTracerWithZone.startSpan('files-series-info');
+    context.with(trace.setSpan(context.active(), singleSpan), () => {
+      getData(url).then((_data) => {
+        trace.getSpan(context.active()).addEvent('fetching-single-span-completed');
+        singleSpan.end();
+      });
+    });
+    for (let i = 0, j = 5; i < j; i += 1) {
+      const span = webTracerWithZone.startSpan(`files-series-info-${i}`);
+      context.with(trace.setSpan(context.active(), span), () => {
+        getData(url).then((_data) => {
+          trace.getSpan(context.active()).addEvent(`fetching-span-${i}-completed`);
+          span.end();
+        });
+      });
+    }
+  };
+  element.addEventListener('click', onClick);
+};
+
+window.addEventListener('load', prepareClickEvent);

core/api/dev/otel-agent-config.yaml

@@ -9,6 +9,10 @@ receivers:
         endpoint: 0.0.0.0:4317
       http:
         endpoint: 0.0.0.0:4318
+        cors:
+          allowed_origins:
+            - http://*
+            - https://*
 
 processors:
   filter/ottl:

dev/config/otel-agent-config.yaml

@@ -9,6 +9,10 @@ receivers:
         endpoint: 0.0.0.0:4317
       http:
         endpoint: 0.0.0.0:4318
+        cors:
+          allowed_origins:
+            - http://*
+            - https://*
 
 processors:
   filter/ottl: