chore: update trace-web example and rename it to opentelemetry-web (

#3145)

* chore: update trace-web metrics sample.

* update versions to 0.31.0.

* fix(changelog): add changelog entry.

* fix(changelog): move changlog entry.

* fix(opentelemetry-web): make stopMetrics() non-async.

CHANGELOG.md

@@ -18,6 +18,7 @@ All notable changes to this project will be documented in this file.
 
 ### :books: (Refine Doc)
 
+* chore: update trace-web example and rename it to opentelemetry-web [#3145](https://github.com/open-telemetry/opentelemetry-js/pull/3145) @pichlermarc
 * chore: update https example [#3152](https://github.com/open-telemetry/opentelemetry-js/pull/3152) @pichlermarc
 
 ### :house: (Internal)

examples/README.md

@@ -8,15 +8,15 @@ with OpenTelemetry JavaScript.
 Maintained Examples are expected to be updated with every OpenTelemetry JavaScript release, to
 use the latest and greatest features, and best practices.
 
-|Name | Description | Complexity Level |
-------------- | ------------- | ------------ |
-|[basic-tracer-node](basic-tracer-node/) | Basic use of Tracing in Node.js application | Beginner |
-|[tracer-web](tracer-web/) | Basic use of Tracing in Web application | Beginner |
-|[http](http/)   | HTTP Instrumentation to automatically collect trace data and export them to the backend of choice | Intermediate |
-|[https](https/) | HTTPS Instrumentation to automatically collect trace data and export them to the backend of choice | Intermediate |
-|[grpc](grpc/)   | gRPC Instrumentation to automatically collect trace data and export them to the backend of choice | Intermediate |
-|[otlp-exporter-node](otlp-exporter-node/) | This example shows how to use `@opentelemetry/exporter-otlp-http` to instrument a simple Node.js application | Intermediate |
-|[opentracing-shim](opentracing-shim/) | This is a simple example that demonstrates how existing OpenTracing instrumentation can be integrated with OpenTelemetry | Intermediate |
+| Name                                      | Description                                                                                                              | Complexity Level |
+|-------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|------------------|
+| [basic-tracer-node](basic-tracer-node/)   | Basic use of Tracing in Node.js application                                                                              | Beginner         |
+| [opentelemetry-web](opentelemetry-web/)          | Basic use of Tracing and Metrics in a Web application                                                                    | Beginner         |
+| [http](http/)                             | HTTP Instrumentation to automatically collect trace data and export them to the backend of choice                        | Intermediate     |
+| [https](https/)                           | HTTPS Instrumentation to automatically collect trace data and export them to the backend of choice                       | Intermediate     |
+| [grpc](grpc/)                             | gRPC Instrumentation to automatically collect trace data and export them to the backend of choice                        | Intermediate     |
+| [otlp-exporter-node](otlp-exporter-node/) | This example shows how to use `@opentelemetry/exporter-otlp-http` to instrument a simple Node.js application             | Intermediate     |
+| [opentracing-shim](opentracing-shim/)     | This is a simple example that demonstrates how existing OpenTracing instrumentation can be integrated with OpenTelemetry | Intermediate     |
 
 Examples of experimental packages can be found at [experimental/examples](../experimental/examples).
 

examples/opentelemetry-web/README.md

@@ -0,0 +1,131 @@
+# Overview
+
+This example shows how to
+use [@opentelemetry/sdk-trace-web](https://github.com/open-telemetry/opentelemetry-js/tree/main/packages/opentelemetry-sdk-trace-web)
+with different plugins and setup to instrument your JavaScript code running in the browser.
+
+## Installation
+
+```sh
+# from this directory
+npm install
+```
+
+## Run the Application
+
+```sh
+# from this directory
+npm start
+```
+
+By default, the application will run on port `8090`.
+
+Other options for running the application, this serves the same examples using different source file processing, so you
+can review the different effects on the resulting bundle sizes that are loaded via the browser.
+
+| Command                | Description                                               |
+|------------------------|-----------------------------------------------------------|
+| `npm start` (Default)  | Serve the raw development bundles compressed via GZip     |
+| `npm run start-nc`     | Serve the raw development bundles uncompressed            |
+| `npm run start-prod`   | Serve the minified production bundles compressed via GZip |
+| `npm run start-prodnc` | Serve the minified production bundles uncompressed        |
+
+The development modes includes source maps via the webpack devtool `eval-source-map` mode which substantially increases
+the size of the bundles.
+
+## Examples
+
+The examples include several variants so that you can see how to mix and match individual components and the impact this
+can have on the resulting bundle size.
+
+### XMLHttpRequest
+
+This example shows how to use the XMLHttpRequest Instrumentation with the OTLP (`http/json`) Trace exporter and with the
+B3 Propagator.
+
+Included Components
+
+- XMLHttpRequestInstrumentation
+- ZoneContextManager
+- OTLPTraceExporter
+- WebTracerProvider
+- B3Propagator
+
+To see the results, open the browser at <http://localhost:8090/xml-http-request/> and make sure you have the browser
+console open. The application is using the `ConsoleSpanExporter` and will post the created spans to the browser console.
+The screen will look as follows:
+
+![Screenshot of the running example](images/xml-http-request.png)
+
+### Fetch
+
+This example shows how to use the Fetch Instrumentation with the OTLP (`http/json`) Trace exporter and with the B3
+Propagator.
+
+Included Components
+
+- FetchInstrumentation
+- ZoneContextManager
+- OTLPTraceExporter
+- WebTracerProvider
+- B3Propagator
+
+To see the results, open the browser at <http://localhost:8090/fetch/> and make sure you have the browser console open.
+The application is using the `ConsoleSpanExporter` and will post the created spans to the browser console.
+
+### FetchXhr
+
+This example shows how to use both the XMLHttpRequest and Fetch Instrumentations with the OTLP (`http/json`) Trace
+exporter but without the B3 Propagator.
+
+Included Components
+
+- XMLHttpRequestInstrumentation
+- FetchInstrumentation
+- ZoneContextManager
+- OTLPTraceExporter
+- WebTracerProvider
+
+### FetchXhrB3
+
+This example shows how to use both the XMLHttpRequest and Fetch Instrumentations with the OTLP (`http/json`) Trace
+exporter and with the B3 Propagator
+
+Included Components
+
+- XMLHttpRequestInstrumentation
+- FetchInstrumentation
+- ZoneContextManager
+- OTLPTraceExporter
+- WebTracerProvider
+- B3Propagator
+
+### Metrics
+
+This example shows how to use the OTLP (`http/json`) Metric Exporter with the Metrics SDK.
+
+Included Components
+
+- OTLPMetricExporter
+- MeterProvider
+- Resource
+- SemanticResourceAttributes
+
+### Zipkin
+
+This example show a simple usage of the ZipKin Exporter with the Web Tracer Provider
+
+Included Components
+
+- WebTracerProvider
+- ZipkinExporter
+
+## Useful links
+
+- For more information on OpenTelemetry, visit: <https://opentelemetry.io/>
+- For more information on web tracing,
+  visit: <https://github.com/open-telemetry/opentelemetry-js/tree/main/packages/opentelemetry-sdk-trace-web>
+
+## LICENSE
+
+Apache License 2.0

examples/opentelemetry-web/docker/collector-config.yaml

@@ -0,0 +1,32 @@
+receivers:
+  otlp:
+    protocols:
+      grpc:
+      http:
+        cors:
+          allowed_origins:
+            - http://*
+            - https://*
+
+exporters:
+  zipkin:
+    endpoint: "http://zipkin-all-in-one:9411/api/v2/spans"
+  prometheus:
+    endpoint: "0.0.0.0:9464"
+
+processors:
+  batch:
+
+service:
+  telemetry:
+    logs:
+      level: "debug"
+  pipelines:
+    traces:
+      receivers: [otlp]
+      exporters: [zipkin]
+      processors: [batch]
+    metrics:
+      receivers: [otlp]
+      exporters: [prometheus]
+      processors: [batch]

examples/opentelemetry-web/docker/docker-compose.yaml

@@ -0,0 +1,30 @@
+version: "3"
+services:
+  # Collector
+  collector:
+    image: otel/opentelemetry-collector-contrib:0.53.0
+#    image: otel/opentelemetry-collector-contrib:latest
+    command: ["--config=/conf/collector-config.yaml"]
+    volumes:
+      - ./collector-config.yaml:/conf/collector-config.yaml
+    ports:
+      - "9464:9464"
+      - "4317:4317"
+      - "4318:4318"
+    depends_on:
+      - zipkin-all-in-one
+
+  # Zipkin
+  zipkin-all-in-one:
+    image: openzipkin/zipkin:latest
+    ports:
+      - "9411:9411"
+
+  # Prometheus
+  prometheus:
+    container_name: prometheus
+    image: prom/prometheus:latest
+    volumes:
+      - ./prometheus.yaml:/etc/prometheus/prometheus.yml
+    ports:
+      - "9090:9090"

examples/opentelemetry-web/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/tracer-web/examples/fetch/index.js → examples/opentelemetry-web/examples/fetch/index.js

@@ -1,11 +1,11 @@
-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';
+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();
 

examples/tracer-web/examples/fetchXhr/index.js → examples/opentelemetry-web/examples/fetchXhr/index.js

@@ -1,11 +1,11 @@
-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 { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
-import { ZoneContextManager } from '@opentelemetry/context-zone';
-import { registerInstrumentations } from '@opentelemetry/instrumentation';
+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 { XMLHttpRequestInstrumentation } = require('@opentelemetry/instrumentation-xml-http-request');
+const { ZoneContextManager } = require('@opentelemetry/context-zone');
+const { registerInstrumentations } = require('@opentelemetry/instrumentation');
 
 const provider = new WebTracerProvider();
 
@@ -68,7 +68,7 @@ const prepareClickEvent = () => {
   const element1 = document.getElementById('button1');
   const element2 = document.getElementById('button2');
 
-  const clickHandler = (fetchFn) => {
+  const clickHandler = (fetchFn) => () => {
     const singleSpan = webTracerWithZone.startSpan('files-series-info');
     context.with(trace.setSpan(context.active(), singleSpan), () => {
       fetchFn(url).then((_data) => {

examples/tracer-web/examples/fetchXhrB3/index.js → examples/opentelemetry-web/examples/fetchXhrB3/index.js

@@ -1,12 +1,12 @@
-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 { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
-import { ZoneContextManager } from '@opentelemetry/context-zone';
-import { B3Propagator } from '@opentelemetry/propagator-b3';
-import { registerInstrumentations } from '@opentelemetry/instrumentation';
+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 { XMLHttpRequestInstrumentation } = require( '@opentelemetry/instrumentation-xml-http-request');
+const { ZoneContextManager } = require( '@opentelemetry/context-zone');
+const { B3Propagator } = require( '@opentelemetry/propagator-b3');
+const { registerInstrumentations } = require( '@opentelemetry/instrumentation');
 
 const provider = new WebTracerProvider();
 
@@ -70,7 +70,7 @@ const prepareClickEvent = () => {
   const element1 = document.getElementById('button1');
   const element2 = document.getElementById('button2');
 
-  const clickHandler = (fetchFn) => {
+  const clickHandler = (fetchFn) => () => {
     const singleSpan = webTracerWithZone.startSpan('files-series-info');
     context.with(trace.setSpan(context.active(), singleSpan), () => {
       fetchFn(url).then((_data) => {

examples/tracer-web/examples/metrics/index.js → examples/opentelemetry-web/examples/metrics/index.js

@@ -1,32 +1,33 @@
 const { DiagConsoleLogger, DiagLogLevel, diag } = require('@opentelemetry/api');
+const { metrics } = require('@opentelemetry/api-metrics');
 const { OTLPMetricExporter } = require('@opentelemetry/exporter-metrics-otlp-http');
-const { MeterProvider } = require('@opentelemetry/sdk-metrics-base');
-const { Resource } = require('@opentelemetry/resources');
-const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
+const { MeterProvider, PeriodicExportingMetricReader } = require('@opentelemetry/sdk-metrics-base');
 
 // Optional and only needed to see the internal diagnostic logging (during development)
 diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.DEBUG);
 
-const metricExporter = new OTLPMetricExporter();
-
 let interval;
 let meter;
 
 function stopMetrics() {
   console.log('STOPPING METRICS');
   clearInterval(interval);
-  meter.shutdown();
+  metrics.getMeterProvider().shutdown()
+    .then(() => metrics.disable());
 }
 
 function startMetrics() {
   console.log('STARTING METRICS');
-  meter = new MeterProvider({
-    exporter: metricExporter,
-    interval: 1000,
-    resource: new Resource({
-      [SemanticResourceAttributes.SERVICE_NAME]: 'basic-metric-service',
-    }),
-  }).getMeter('example-exporter-collector');
+
+  const meterProvider = new MeterProvider();
+  metrics.setGlobalMeterProvider(meterProvider);
+
+  meterProvider.addMetricReader(new PeriodicExportingMetricReader({
+    exporter: new OTLPMetricExporter(),
+    exportIntervalMillis: 1000
+  }));
+
+  meter = meterProvider.getMeter('example-exporter-collector')
 
   const requestCounter = meter.createCounter('requests', {
     description: 'Example of a Counter',
@@ -36,11 +37,11 @@ function startMetrics() {
     description: 'Example of a UpDownCounter',
   });
 
-  const labels = { pid: process.pid, environment: 'staging' };
+  const attributes = { environment: 'staging' };
 
   interval = setInterval(() => {
-    requestCounter.add(1, labels);
-    upDownCounter.add(Math.random() > 0.5 ? 1 : -1, labels);
+    requestCounter.add(1, attributes);
+    upDownCounter.add(Math.random() > 0.5 ? 1 : -1, attributes);
   }, 1000);
 }