open-telemetry · legendecas · Aug 9, 2022 · Jun 3, 2022 · Aug 5, 2022 · Aug 5, 2022
@@ -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:/open-telemetry/opentelemetry-js/pull/3145) @pichlermarc
 * chore: update https example [#3152](https:/open-telemetry/opentelemetry-js/pull/3152) @pichlermarc
 
 ### :house: (Internal)

@@ -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).
 

@@ -0,0 +1,131 @@
+# Overview
+
+This example shows how to
+use [@opentelemetry/sdk-trace-web](https:/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:/open-telemetry/opentelemetry-js/tree/main/packages/opentelemetry-sdk-trace-web>
+
+## LICENSE
+
+Apache License 2.0
@@ -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]
@@ -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"
@@ -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']
@@ -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();
 

@@ -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) => {

@@ -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) => {

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