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/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/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/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/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);
 }
 

examples/opentelemetry-web/examples/xml-http-request/index.js

@@ -1,11 +1,11 @@
-import { context, trace } from '@opentelemetry/api';
-import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
-import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
-import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
-import { ZoneContextManager } from '@opentelemetry/context-zone';
-import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
-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 { WebTracerProvider } = require( '@opentelemetry/sdk-trace-web');
+const { XMLHttpRequestInstrumentation } = require( '@opentelemetry/instrumentation-xml-http-request');
+const { ZoneContextManager } = require( '@opentelemetry/context-zone');
+const { OTLPTraceExporter } = require( '@opentelemetry/exporter-trace-otlp-http');
+const { B3Propagator } = require( '@opentelemetry/propagator-b3');
+const { registerInstrumentations } = require( '@opentelemetry/instrumentation');
 
 const providerWithZone = new WebTracerProvider();
 

examples/opentelemetry-web/examples/zipkin/index.js

@@ -1,6 +1,6 @@
-import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
-import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
-import { ZipkinExporter } from '@opentelemetry/exporter-zipkin';
+const { ConsoleSpanExporter, SimpleSpanProcessor } = require('@opentelemetry/sdk-trace-base');
+const { WebTracerProvider } = require('@opentelemetry/sdk-trace-web');
+const { ZipkinExporter } = require('@opentelemetry/exporter-zipkin');
 
 const provider = new WebTracerProvider();
 provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));

examples/opentelemetry-web/package.json

@@ -1,14 +1,17 @@
 {
-  "name": "web-tracer-example",
+  "name": "web-opentelemetry-example",
   "private": true,
-  "version": "0.27.0",
-  "description": "Example of using @opentelemetry/sdk-trace-web in browser",
+  "version": "0.31.0",
+  "description": "Example of using @opentelemetry/sdk-trace-web and @opentelemetry/sdk-metrics-base in browser",
   "main": "index.js",
   "scripts": {
     "start": "webpack serve --progress --color --port 8090 --config webpack.dev.config.js --hot --host 0.0.0.0 --compress",
     "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"
+    "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"
   },
   "repository": {
     "type": "git",
@@ -17,6 +20,7 @@
   "keywords": [
     "opentelemetry",
     "tracing",
+    "metrics",
     "web"
   ],
   "engines": {
@@ -39,20 +43,20 @@
   },
   "dependencies": {
     "@opentelemetry/api": "^1.0.2",
+    "@opentelemetry/api-metrics": "0.31.0",
     "@opentelemetry/context-zone": "^1.0.1",
     "@opentelemetry/core": "^1.0.1",
+    "@opentelemetry/exporter-metrics-otlp-http": "0.31.0",
+    "@opentelemetry/exporter-trace-otlp-http": "0.31.0",
+    "@opentelemetry/exporter-zipkin": "^1.0.1",
+    "@opentelemetry/instrumentation": "0.31.0",
+    "@opentelemetry/instrumentation-fetch": "0.31.0",
+    "@opentelemetry/instrumentation-xml-http-request": "0.31.0",
+    "@opentelemetry/propagator-b3": "^1.0.1",
+    "@opentelemetry/sdk-metrics-base": "0.31.0",
     "@opentelemetry/sdk-trace-base": "^1.0.1",
     "@opentelemetry/sdk-trace-web": "^1.0.1",
-    "@opentelemetry/exporter-zipkin": "^1.0.1",
-    "@opentelemetry/semantic-conventions": "^1.0.1",
-    "@opentelemetry/propagator-b3": "^1.0.1",
-    "@opentelemetry/resources": "^1.0.1",
-    "@opentelemetry/instrumentation": "0.27.0",
-    "@opentelemetry/instrumentation-fetch": "0.27.0",
-    "@opentelemetry/instrumentation-xml-http-request": "0.27.0",
-    "@opentelemetry/exporter-trace-otlp-http": "0.27.0",
-    "@opentelemetry/exporter-metrics-otlp-http": "0.27.0",
-    "@opentelemetry/sdk-metrics-base": "0.27.0"
+    "@opentelemetry/semantic-conventions": "^1.0.1"
   },
   "homepage": "https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/tracer-web"
 }

examples/tracer-web/README.md

@@ -1,119 +0,0 @@
-# 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 includes 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 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 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 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 Trace exporter and with the B3 Propagator
-
-Included Components
-
-- XMLHttpRequestInstrumentation
-- FetchInstrumentation
-- ZoneContextManager
-- OTLPTraceExporter
-- WebTracerProvider
-- B3Propagator
-
-### Metrics
-
-This example shows how to use the OTLP Metric Exporter, it does not include the Trace Exporter. Does not include traces
-
-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

lerna.json

@@ -8,6 +8,7 @@
     "integration-tests/*",
     "selenium-tests",
     "examples/otlp-exporter-node",
+    "examples/opentelemetry-web",
     "examples/https"
   ]
 }