feat: Collector Metric Exporter for the Web

examples/collector-exporter-node/README.md

@@ -20,16 +20,32 @@ npm install
     npm run docker:start
     ```
 
-2. Run app
+2. Run tracing app
 
     ```shell script
     # from this directory
-    npm start
+    npm start:tracing
     ```
 
-3. Open page at <http://localhost:9411/zipkin/> -  you should be able to see the spans in zipkin
+3. Run metrics app
+
+    ```shell script
+    # from this directory
+    npm start:metrics
+    ```
+
+4. Open page at <http://localhost:9411/zipkin/> -  you should be able to see the spans in zipkin
 ![Screenshot of the running example](images/spans.png)
 
+### Prometheus UI
+
+The prometheus client will be available at <http://localhost:9090>.
+
+Note: It may take some time for the application metrics to appear on the Prometheus dashboard.
+
+<p align="center"><img src="../prometheus/images/prom-counter.png?raw=true"/></p>
+<p align="center"><img src="../prometheus/images/prom-updowncounter.png?raw=true"/></p>
+
 ## Useful links
 
 - For more information on OpenTelemetry, visit: <https://opentelemetry.io/>

examples/collector-exporter-node/docker/collector-config.yaml

@@ -10,6 +10,8 @@ receivers:
 exporters:
   zipkin:
     endpoint: "http://zipkin-all-in-one:9411/api/v2/spans"
+  prometheus:
+    endpoint: "0.0.0.0:9464"
 
 processors:
   batch:
@@ -21,3 +23,7 @@ service:
       receivers: [otlp]
       exporters: [zipkin]
       processors: [batch, queued_retry]
+    metrics:
+      receivers: [otlp]
+      exporters: [prometheus]
+      processors: [batch, queued_retry]

examples/collector-exporter-node/docker/docker-compose.yaml

@@ -5,11 +5,10 @@ services:
     image: otel/opentelemetry-collector:latest
 #    image: otel/opentelemetry-collector:0.6.0
     command: ["--config=/conf/collector-config.yaml", "--log-level=DEBUG"]
-    networks:
-      - otelcol
     volumes:
       - ./collector-config.yaml:/conf/collector-config.yaml
     ports:
+      - "9464:9464"
       - "55680:55680"
       - "55681:55681"
     depends_on:
@@ -18,10 +17,14 @@ services:
   # Zipkin
   zipkin-all-in-one:
     image: openzipkin/zipkin:latest
-    networks:
-      - otelcol
     ports:
       - "9411:9411"
 
-networks:
-  otelcol:
+  # Prometheus
+  prometheus:
+    container_name: prometheus
+    image: prom/prometheus:latest
+    volumes:
+      - ./prometheus.yaml:/etc/prometheus/prometheus.yml
+    ports:
+      - "9090:9090"

examples/collector-exporter-node/docker/prometheus.yaml

@@ -0,0 +1,9 @@
+global:
+  scrape_interval: 15s # Default is every 1 minute.
+
+scrape_configs:
+  - job_name: 'collector'
+    # metrics_path defaults to '/metrics'
+    # scheme defaults to 'http'.
+    static_configs:
+      - targets: ['collector:9464']

examples/collector-exporter-node/metrics.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const { CollectorMetricExporter } = require('@opentelemetry/exporter-collector');
+const { MeterProvider } = require('@opentelemetry/metrics');
+
+const metricExporter = new CollectorMetricExporter({
+  serviceName: 'basic-metric-service',
+  // logger: new ConsoleLogger(LogLevel.DEBUG),
+});
+
+const meter = new MeterProvider({
+  exporter: metricExporter,
+  interval: 1000,
+}).getMeter('example-prometheus');
+
+const requestCounter = meter.createCounter('requests', {
+  description: 'Example of a Counter',
+});
+
+const upDownCounter = meter.createUpDownCounter('test_up_down_counter', {
+  description: 'Example of a UpDownCounter',
+});
+
+const labels = { pid: process.pid, environment: 'staging' };
+
+setInterval(() => {
+  requestCounter.bind(labels).add(1);
+  upDownCounter.bind(labels).add(Math.random() > 0.5 ? 1 : -1);
+}, 1000);

examples/collector-exporter-node/package.json

@@ -5,7 +5,8 @@
   "description": "Example of using @opentelemetry/collector-exporter in Node.js",
   "main": "index.js",
   "scripts": {
-    "start": "node ./start.js",
+    "start:tracing": "node tracing.js",
+    "start:metrics": "node metrics.js",
     "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"
@@ -30,6 +31,7 @@
     "@opentelemetry/api": "^0.10.2",
     "@opentelemetry/core": "^0.10.2",
     "@opentelemetry/exporter-collector": "^0.10.2",
+    "@opentelemetry/metrics": "^0.10.2",
     "@opentelemetry/tracing": "^0.10.2"
   },
   "homepage": "https://github.com/open-telemetry/opentelemetry-js#readme"

packages/opentelemetry-exporter-collector/README.md

@@ -14,7 +14,7 @@ This module provides exporter for web and node to be used with [opentelemetry-co
 npm install --save @opentelemetry/exporter-collector
 ```
 
-## Usage in Web
+## Traces in Web
 
 The CollectorTraceExporter in Web expects the endpoint to end in `/v1/trace`.
 
@@ -36,7 +36,32 @@ provider.register();
 
 ```
 
-## Usage in Node - GRPC
+## Metrics in Web
+
+The CollectorMetricExporter in Web expects the endpoint to end in `/v1/metrics`.
+
+```js
+import { MetricProvider } from '@opentelemetry/metrics';
+import { CollectorMetricExporter } from '@opentelemetry/exporter-collector';
+const collectorOptions = {
+  url: '<opentelemetry-collector-url>', // url is optional and can be omitted - default is http://localhost:55681/v1/metrics
+  headers: {}, //an optional object containing custom headers to be sent with each request
+};
+const exporter = new CollectorMetricExporter(collectorOptions);
+
+// Register the exporter
+const meter = new MeterProvider({
+  exporter,
+  interval: 60000,
+}).getMeter('example-meter');
+
+// Now, start recording data
+const counter = meter.createCounter('metric_name');
+counter.add(10, { 'key': 'value' });
+
+```
+
+## Traces in Node - GRPC
 
 The CollectorTraceExporter in Node expects the URL to only be the hostname. It will not work with `/v1/trace`.
 
@@ -109,7 +134,7 @@ provider.register();
 
 Note, that this will only work if TLS is also configured on the server.
 
-## Usage in Node - JSON over http
+## Traces in Node - JSON over http
 
 ```js
 const { BasicTracerProvider, SimpleSpanProcessor } = require('@opentelemetry/tracing');
@@ -132,7 +157,7 @@ provider.register();
 
 ```
 
-## Usage in Node - PROTO over http
+## Traces in Node - PROTO over http
 
 ```js
 const { BasicTracerProvider, SimpleSpanProcessor } = require('@opentelemetry/tracing');
@@ -155,26 +180,28 @@ provider.register();
 
 ```
 
-## Usage in Node - PROTO over http
+## Metrics in Node
 
-```js
-const { BasicTracerProvider, SimpleSpanProcessor } = require('@opentelemetry/tracing');
-const { CollectorExporter, CollectorTransportNode } =  require('@opentelemetry/exporter-collector');
+The CollectorTraceExporter in Node expects the URL to only be the hostname. It will not work with `/v1/metrics`. All options that work with trace also work with metrics.
 
+```js
+const { MeterProvider } = require('@opentelemetry/metrics');
+const { CollectorMetricExporter } =  require('@opentelemetry/exporter-collector');
 const collectorOptions = {
-  protocolNode: CollectorTransportNode.HTTP_PROTO,
   serviceName: 'basic-service',
-  url: '<opentelemetry-collector-url>', // url is optional and can be omitted - default is http://localhost:55680/v1/trace
-  headers: {
-    foo: 'bar'
-  }, //an optional object containing custom headers to be sent with each request will only work with json over http
+  url: '<opentelemetry-collector-url>', // url is optional and can be omitted - default is localhost:55681
 };
+const exporter = new CollectorMetricExporter(collectorOptions);
 
-const provider = new BasicTracerProvider();
-const exporter = new CollectorExporter(collectorOptions);
-provider.addSpanProcessor(new SimpleSpanProcessor(exporter));
+// Register the exporter
+const meter = new MeterProvider({
+  exporter,
+  interval: 60000,
+}).getMeter('example-meter');
 
-provider.register();
+// Now, start recording data
+const counter = meter.createCounter('metric_name');
+counter.add(10, { 'key': 'value' });
 
 ```
 

packages/opentelemetry-exporter-collector/src/platform/browser/CollectorExporterBrowserBase.ts

@@ -0,0 +1,80 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CollectorExporterBase } from '../../CollectorExporterBase';
+import { CollectorExporterConfigBrowser } from './types';
+import * as collectorTypes from '../../types';
+import { parseHeaders } from '../../util';
+import { sendWithBeacon, sendWithXhr } from './util';
+
+/**
+ * Collector Metric Exporter abstract base class
+ */
+export abstract class CollectorExporterBrowserBase<
+  ExportItem,
+  ServiceRequest
+> extends CollectorExporterBase<
+  CollectorExporterConfigBrowser,
+  ExportItem,
+  ServiceRequest
+> {
+  private _headers: Record<string, string>;
+  private _useXHR: boolean = false;
+
+  /**
+   * @param config
+   */
+  constructor(config: CollectorExporterConfigBrowser = {}) {
+    super(config);
+    this._useXHR =
+      !!config.headers || typeof navigator.sendBeacon !== 'function';
+    if (this._useXHR) {
+      this._headers = parseHeaders(config.headers, this.logger);
+    } else {
+      this._headers = {};
+    }
+  }
+
+  onInit(): void {
+    window.addEventListener('unload', this.shutdown);
+  }
+
+  onShutdown(): void {
+    window.removeEventListener('unload', this.shutdown);
+  }
+
+  send(
+    items: ExportItem[],
+    onSuccess: () => void,
+    onError: (error: collectorTypes.CollectorExporterError) => void
+  ) {
+    const serviceRequest = this.convert(items);
+    const body = JSON.stringify(serviceRequest);
+
+    if (this._useXHR) {
+      sendWithXhr(
+        body,
+        this.url,
+        this._headers,
+        this.logger,
+        onSuccess,
+        onError
+      );
+    } else {
+      sendWithBeacon(body, this.url, this.logger, onSuccess, onError);
+    }
+  }
+}

packages/opentelemetry-exporter-collector/src/platform/browser/CollectorMetricExporter.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { MetricRecord, MetricExporter } from '@opentelemetry/metrics';
+import * as collectorTypes from '../../types';
+import { CollectorExporterBrowserBase } from './CollectorExporterBrowserBase';
+import { toCollectorExportMetricServiceRequest } from '../../transformMetrics';
+import { CollectorExporterConfigBrowser } from './types';
+
+const DEFAULT_COLLECTOR_URL = 'http://localhost:55680/v1/metrics';
+const DEFAULT_SERVICE_NAME = 'collector-metric-exporter';
+
+/**
+ * Collector Metric Exporter for Web
+ */
+export class CollectorMetricExporter
+  extends CollectorExporterBrowserBase<
+    MetricRecord,
+    collectorTypes.opentelemetryProto.collector.metrics.v1.ExportMetricsServiceRequest
+  >
+  implements MetricExporter {
+  // Converts time to nanoseconds
+  private readonly _startTime = new Date().getTime() * 1000000;
+
+  convert(
+    metrics: MetricRecord[]
+  ): collectorTypes.opentelemetryProto.collector.metrics.v1.ExportMetricsServiceRequest {
+    return toCollectorExportMetricServiceRequest(
+      metrics,
+      this._startTime,
+      this
+    );
+  }
+
+  getDefaultUrl(config: CollectorExporterConfigBrowser): string {
+    return config.url || DEFAULT_COLLECTOR_URL;
+  }
+
+  getDefaultServiceName(config: CollectorExporterConfigBrowser): string {
+    return config.serviceName || DEFAULT_SERVICE_NAME;
+  }
+}