feat(opentelemetry-web-example): add example for metrics protobuf exp…

…orter
open-telemetry · Feb 1, 2024 · e9f90ca · e9f90ca
1 parent 62aa91c
commit e9f90ca
Show file tree

Hide file tree

Showing 8 changed files with 2,948 additions and 1,887 deletions.
diff --git a/examples/opentelemetry-web/docker/collector-config.yaml b/examples/opentelemetry-web/docker/collector-config.yaml
@@ -7,12 +7,18 @@ receivers:
           allowed_origins:
             - http://*
             - https://*
+          allowed_headers: ["*"]
 
 exporters:
   zipkin:
     endpoint: "http://zipkin-all-in-one:9411/api/v2/spans"
   prometheus:
     endpoint: "0.0.0.0:9464"
+  debug:
+    verbosity: detailed
+    sampling_initial: 1
+    sampling_thereafter: 1
+
 
 processors:
   batch:
@@ -28,5 +34,5 @@ service:
       processors: [batch]
     metrics:
       receivers: [otlp]
-      exporters: [prometheus]
+      exporters: [prometheus, debug]
       processors: [batch]
diff --git a/examples/opentelemetry-web/docker/docker-compose.yaml b/examples/opentelemetry-web/docker/docker-compose.yaml
@@ -2,7 +2,7 @@ version: "3"
 services:
   # Collector
   collector:
-    image: otel/opentelemetry-collector-contrib:0.53.0
+    image: otel/opentelemetry-collector:0.91.0
 #    image: otel/opentelemetry-collector-contrib:latest
     command: ["--config=/conf/collector-config.yaml"]
     volumes:

diff --git a/examples/opentelemetry-web/examples/metrics-proto/index.html b/examples/opentelemetry-web/examples/metrics-proto/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Metrics Example</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  Example of using metrics with Collector Exporter
+  <script type="text/javascript" src="metrics-proto.js"></script>
+  <br/>
+  <button id="startBtn">Start metrics</button>
+  <button id="stopBtn">Stop metrics</button>
+  <br/>
+
+If you run the collector from this example, you should see metrics at: <br/>
+<a href="http://localhost:9090/graph?g0.range_input=1m&g0.expr=requests&g0.tab=0/" target="_blank">http://localhost:9090/</a>
+
+</body>
+
+</html>
diff --git a/examples/opentelemetry-web/examples/metrics-proto/index.js b/examples/opentelemetry-web/examples/metrics-proto/index.js
@@ -0,0 +1,56 @@
+const { DiagConsoleLogger, DiagLogLevel, diag, metrics } = require('@opentelemetry/api');
+const { createMetricsExporter } = require('@opentelemetry/exporter-metrics-otlp-proto');
+const { MeterProvider, PeriodicExportingMetricReader } = require('@opentelemetry/sdk-metrics');
+
+// Optional and only needed to see the internal diagnostic logging (during development)
+diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.DEBUG);
+
+let interval;
+let meter;
+
+function stopMetrics() {
+  console.log('STOPPING METRICS proto');
+  clearInterval(interval);
+  metrics.getMeterProvider().shutdown()
+    .then(() => metrics.disable());
+}
+
+function startMetrics() {
+  console.log('STARTING METRICS');
+
+  const meterProvider = new MeterProvider();
+
+  meterProvider.addMetricReader(new PeriodicExportingMetricReader({
+    exporter: createMetricsExporter({}),
+    exportIntervalMillis: 1000
+  }));
+
+  metrics.setGlobalMeterProvider(meterProvider);
+
+  meter = metrics.getMeter('example-exporter-collector')
+
+  const requestCounter = meter.createCounter('requests', {
+    description: 'Example of a Counter',
+  });
+
+  const upDownCounter = meter.createUpDownCounter('test_up_down_counter', {
+    description: 'Example of a UpDownCounter',
+  });
+
+  const attributes = { environment: 'staging' };
+
+  interval = setInterval(() => {
+    requestCounter.add(1, attributes);
+    upDownCounter.add(Math.random() > 0.5 ? 1 : -1, attributes);
+  }, 1000);
+}
+
+const addClickEvents = () => {
+  const startBtn = document.getElementById('startBtn');
+
+  const stopBtn = document.getElementById('stopBtn');
+  startBtn.addEventListener('click', startMetrics);
+  stopBtn.addEventListener('click', stopMetrics);
+};
+
+window.addEventListener('load', addClickEvents);
diff --git a/examples/opentelemetry-web/package.json b/examples/opentelemetry-web/package.json
@@ -9,9 +9,9 @@
     "start-nc": "webpack serve --progress --color --port 8090 --config webpack.dev.config.js --hot --host 0.0.0.0 --no-compress",
     "start-prod": "webpack serve --progress --color --port 8090 --config webpack.prod.config.js --hot --host 0.0.0.0 --compress",
     "start-prodnc": "webpack serve --progress --color --port 8090 --config webpack.prod.config.js --hot --host 0.0.0.0 --no-compress",
-    "docker:start": "cd ./docker && docker-compose down && docker-compose up",
-    "docker:startd": "cd ./docker && docker-compose down && docker-compose up -d",
-    "docker:stop": "cd ./docker && docker-compose down"
+    "docker:start": "cd ./docker && docker compose down && docker compose up",
+    "docker:startd": "cd ./docker && docker compose down && docker compose up -d",
+    "docker:stop": "cd ./docker && docker compose down"
   },
   "repository": {
     "type": "git",
@@ -47,6 +47,7 @@
     "@opentelemetry/context-zone": "1.21.0",
     "@opentelemetry/core": "1.21.0",
     "@opentelemetry/exporter-metrics-otlp-http": "0.48.0",
+    "@opentelemetry/exporter-metrics-otlp-proto": "0.48.0",
     "@opentelemetry/exporter-trace-otlp-http": "0.48.0",
     "@opentelemetry/exporter-trace-otlp-proto": "0.48.0",
     "@opentelemetry/exporter-zipkin": "1.21.0",

diff --git a/examples/opentelemetry-web/webpack.dev.config.js b/examples/opentelemetry-web/webpack.dev.config.js
@@ -8,6 +8,7 @@ const common = {
   mode: 'development',
   entry: {
     metrics: 'examples/metrics/index.js',
+    'metrics-proto': 'examples/metrics-proto/index.js',
     fetch: 'examples/fetch/index.js',
     'xml-http-request': 'examples/xml-http-request/index.js',
     fetchXhr: 'examples/fetchXhr/index.js',

diff --git a/examples/opentelemetry-web/webpack.prod.config.js b/examples/opentelemetry-web/webpack.prod.config.js
@@ -8,6 +8,7 @@ const common = {
   mode: 'production',
   entry: {
     metrics: 'examples/metrics/index.js',
+    'metrics-proto': 'examples/metrics-proto/index.js',
     fetch: 'examples/fetch/index.js',
     'xml-http-request': 'examples/xml-http-request/index.js',
     fetchXhr: 'examples/fetchXhr/index.js',