From 6d30b3b783a4b8dbb432814cf81b911493fd9a53 Mon Sep 17 00:00:00 2001 From: "marc.pichler" Date: Fri, 3 Jun 2022 10:57:35 +0200 Subject: [PATCH 1/5] chore: update trace-web metrics sample. --- examples/README.md | 18 +-- .../.eslintrc.js | 0 examples/opentelemetry-web/README.md | 131 ++++++++++++++++++ .../docker/collector-config.yaml | 32 +++++ .../docker/docker-compose.yaml | 30 ++++ .../opentelemetry-web/docker/prometheus.yaml | 9 ++ .../examples/fetch/index.html | 0 .../examples/fetch/index.js | 16 +-- .../examples/fetchXhr/index.html | 0 .../examples/fetchXhr/index.js | 18 +-- .../examples/fetchXhrB3/index.html | 0 .../examples/fetchXhrB3/index.js | 20 +-- .../examples/metrics/index.html | 0 .../examples/metrics/index.js | 35 ++--- .../examples/xml-http-request/index.html | 0 .../examples/xml-http-request/index.js | 16 +-- .../examples/zipkin/index.html | 0 .../examples/zipkin/index.js | 6 +- .../images/xml-http-request.png | Bin .../package.json | 32 +++-- .../webpack.dev.config.js | 0 .../webpack.prod.config.js | 0 examples/tracer-web/README.md | 119 ---------------- lerna.json | 3 +- 24 files changed, 287 insertions(+), 198 deletions(-) rename examples/{tracer-web => opentelemetry-web}/.eslintrc.js (100%) create mode 100644 examples/opentelemetry-web/README.md create mode 100644 examples/opentelemetry-web/docker/collector-config.yaml create mode 100644 examples/opentelemetry-web/docker/docker-compose.yaml create mode 100644 examples/opentelemetry-web/docker/prometheus.yaml rename examples/{tracer-web => opentelemetry-web}/examples/fetch/index.html (100%) rename examples/{tracer-web => opentelemetry-web}/examples/fetch/index.js (76%) rename examples/{tracer-web => opentelemetry-web}/examples/fetchXhr/index.html (100%) rename examples/{tracer-web => opentelemetry-web}/examples/fetchXhr/index.js (79%) rename examples/{tracer-web => opentelemetry-web}/examples/fetchXhrB3/index.html (100%) rename examples/{tracer-web => opentelemetry-web}/examples/fetchXhrB3/index.js (77%) rename examples/{tracer-web => opentelemetry-web}/examples/metrics/index.html (100%) rename examples/{tracer-web => opentelemetry-web}/examples/metrics/index.js (59%) rename examples/{tracer-web => opentelemetry-web}/examples/xml-http-request/index.html (100%) rename examples/{tracer-web => opentelemetry-web}/examples/xml-http-request/index.js (76%) rename examples/{tracer-web => opentelemetry-web}/examples/zipkin/index.html (100%) rename examples/{tracer-web => opentelemetry-web}/examples/zipkin/index.js (74%) rename examples/{tracer-web => opentelemetry-web}/images/xml-http-request.png (100%) rename examples/{tracer-web => opentelemetry-web}/package.json (68%) rename examples/{tracer-web => opentelemetry-web}/webpack.dev.config.js (100%) rename examples/{tracer-web => opentelemetry-web}/webpack.prod.config.js (100%) delete mode 100644 examples/tracer-web/README.md diff --git a/examples/README.md b/examples/README.md index d8861e7e018..c594e5f4427 100644 --- a/examples/README.md +++ b/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). diff --git a/examples/tracer-web/.eslintrc.js b/examples/opentelemetry-web/.eslintrc.js similarity index 100% rename from examples/tracer-web/.eslintrc.js rename to examples/opentelemetry-web/.eslintrc.js diff --git a/examples/opentelemetry-web/README.md b/examples/opentelemetry-web/README.md new file mode 100644 index 00000000000..f3668d8e356 --- /dev/null +++ b/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 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 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: +- For more information on web tracing, + visit: + +## LICENSE + +Apache License 2.0 diff --git a/examples/opentelemetry-web/docker/collector-config.yaml b/examples/opentelemetry-web/docker/collector-config.yaml new file mode 100644 index 00000000000..61025e4382d --- /dev/null +++ b/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] diff --git a/examples/opentelemetry-web/docker/docker-compose.yaml b/examples/opentelemetry-web/docker/docker-compose.yaml new file mode 100644 index 00000000000..68910b7ba4f --- /dev/null +++ b/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" diff --git a/examples/opentelemetry-web/docker/prometheus.yaml b/examples/opentelemetry-web/docker/prometheus.yaml new file mode 100644 index 00000000000..b027daf9a0b --- /dev/null +++ b/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'] diff --git a/examples/tracer-web/examples/fetch/index.html b/examples/opentelemetry-web/examples/fetch/index.html similarity index 100% rename from examples/tracer-web/examples/fetch/index.html rename to examples/opentelemetry-web/examples/fetch/index.html diff --git a/examples/tracer-web/examples/fetch/index.js b/examples/opentelemetry-web/examples/fetch/index.js similarity index 76% rename from examples/tracer-web/examples/fetch/index.js rename to examples/opentelemetry-web/examples/fetch/index.js index 2871c98cd24..f2632b2e4c3 100644 --- a/examples/tracer-web/examples/fetch/index.js +++ b/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(); diff --git a/examples/tracer-web/examples/fetchXhr/index.html b/examples/opentelemetry-web/examples/fetchXhr/index.html similarity index 100% rename from examples/tracer-web/examples/fetchXhr/index.html rename to examples/opentelemetry-web/examples/fetchXhr/index.html diff --git a/examples/tracer-web/examples/fetchXhr/index.js b/examples/opentelemetry-web/examples/fetchXhr/index.js similarity index 79% rename from examples/tracer-web/examples/fetchXhr/index.js rename to examples/opentelemetry-web/examples/fetchXhr/index.js index 009de72f623..8e266f78a7b 100644 --- a/examples/tracer-web/examples/fetchXhr/index.js +++ b/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) => { diff --git a/examples/tracer-web/examples/fetchXhrB3/index.html b/examples/opentelemetry-web/examples/fetchXhrB3/index.html similarity index 100% rename from examples/tracer-web/examples/fetchXhrB3/index.html rename to examples/opentelemetry-web/examples/fetchXhrB3/index.html diff --git a/examples/tracer-web/examples/fetchXhrB3/index.js b/examples/opentelemetry-web/examples/fetchXhrB3/index.js similarity index 77% rename from examples/tracer-web/examples/fetchXhrB3/index.js rename to examples/opentelemetry-web/examples/fetchXhrB3/index.js index d37bfb7d6ff..64afe58d48a 100644 --- a/examples/tracer-web/examples/fetchXhrB3/index.js +++ b/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) => { diff --git a/examples/tracer-web/examples/metrics/index.html b/examples/opentelemetry-web/examples/metrics/index.html similarity index 100% rename from examples/tracer-web/examples/metrics/index.html rename to examples/opentelemetry-web/examples/metrics/index.html diff --git a/examples/tracer-web/examples/metrics/index.js b/examples/opentelemetry-web/examples/metrics/index.js similarity index 59% rename from examples/tracer-web/examples/metrics/index.js rename to examples/opentelemetry-web/examples/metrics/index.js index e4b84b6589b..4c4d43aabb0 100644 --- a/examples/tracer-web/examples/metrics/index.js +++ b/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() { +async function stopMetrics() { console.log('STOPPING METRICS'); clearInterval(interval); - meter.shutdown(); + await metrics.getMeterProvider().shutdown(); + 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); } diff --git a/examples/tracer-web/examples/xml-http-request/index.html b/examples/opentelemetry-web/examples/xml-http-request/index.html similarity index 100% rename from examples/tracer-web/examples/xml-http-request/index.html rename to examples/opentelemetry-web/examples/xml-http-request/index.html diff --git a/examples/tracer-web/examples/xml-http-request/index.js b/examples/opentelemetry-web/examples/xml-http-request/index.js similarity index 76% rename from examples/tracer-web/examples/xml-http-request/index.js rename to examples/opentelemetry-web/examples/xml-http-request/index.js index 3fcee528448..ff2b173bcfc 100644 --- a/examples/tracer-web/examples/xml-http-request/index.js +++ b/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(); diff --git a/examples/tracer-web/examples/zipkin/index.html b/examples/opentelemetry-web/examples/zipkin/index.html similarity index 100% rename from examples/tracer-web/examples/zipkin/index.html rename to examples/opentelemetry-web/examples/zipkin/index.html diff --git a/examples/tracer-web/examples/zipkin/index.js b/examples/opentelemetry-web/examples/zipkin/index.js similarity index 74% rename from examples/tracer-web/examples/zipkin/index.js rename to examples/opentelemetry-web/examples/zipkin/index.js index 71c2208fed1..aa01c595c9d 100644 --- a/examples/tracer-web/examples/zipkin/index.js +++ b/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())); diff --git a/examples/tracer-web/images/xml-http-request.png b/examples/opentelemetry-web/images/xml-http-request.png similarity index 100% rename from examples/tracer-web/images/xml-http-request.png rename to examples/opentelemetry-web/images/xml-http-request.png diff --git a/examples/tracer-web/package.json b/examples/opentelemetry-web/package.json similarity index 68% rename from examples/tracer-web/package.json rename to examples/opentelemetry-web/package.json index cf8e660c226..b4f11d860d7 100644 --- a/examples/tracer-web/package.json +++ b/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.30.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.30.0", "@opentelemetry/context-zone": "^1.0.1", "@opentelemetry/core": "^1.0.1", - "@opentelemetry/sdk-trace-base": "^1.0.1", - "@opentelemetry/sdk-trace-web": "^1.0.1", + "@opentelemetry/exporter-metrics-otlp-http": "0.30.0", + "@opentelemetry/exporter-trace-otlp-http": "0.30.0", "@opentelemetry/exporter-zipkin": "^1.0.1", - "@opentelemetry/semantic-conventions": "^1.0.1", + "@opentelemetry/instrumentation": "0.30.0", + "@opentelemetry/instrumentation-fetch": "0.30.0", + "@opentelemetry/instrumentation-xml-http-request": "0.30.0", "@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/sdk-metrics-base": "0.30.0", + "@opentelemetry/sdk-trace-base": "^1.0.1", + "@opentelemetry/sdk-trace-web": "^1.0.1", + "@opentelemetry/semantic-conventions": "^1.0.1" }, "homepage": "https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/tracer-web" } diff --git a/examples/tracer-web/webpack.dev.config.js b/examples/opentelemetry-web/webpack.dev.config.js similarity index 100% rename from examples/tracer-web/webpack.dev.config.js rename to examples/opentelemetry-web/webpack.dev.config.js diff --git a/examples/tracer-web/webpack.prod.config.js b/examples/opentelemetry-web/webpack.prod.config.js similarity index 100% rename from examples/tracer-web/webpack.prod.config.js rename to examples/opentelemetry-web/webpack.prod.config.js diff --git a/examples/tracer-web/README.md b/examples/tracer-web/README.md deleted file mode 100644 index e7947d135d1..00000000000 --- a/examples/tracer-web/README.md +++ /dev/null @@ -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 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 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: -- For more information on web tracing, visit: - -## LICENSE - -Apache License 2.0 diff --git a/lerna.json b/lerna.json index 98304af8972..de116796e5e 100644 --- a/lerna.json +++ b/lerna.json @@ -7,6 +7,7 @@ "experimental/backwards-compatability/*", "integration-tests/*", "selenium-tests", - "examples/otlp-exporter-node" + "examples/otlp-exporter-node", + "examples/opentelemetry-web" ] } From b420eedaf8b598b48b6630011ec4c871a37eba4b Mon Sep 17 00:00:00 2001 From: "marc.pichler" Date: Fri, 5 Aug 2022 11:55:59 +0200 Subject: [PATCH 2/5] update versions to 0.31.0. --- examples/opentelemetry-web/package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/opentelemetry-web/package.json b/examples/opentelemetry-web/package.json index b4f11d860d7..7b5ebf5d3ce 100644 --- a/examples/opentelemetry-web/package.json +++ b/examples/opentelemetry-web/package.json @@ -1,7 +1,7 @@ { "name": "web-opentelemetry-example", "private": true, - "version": "0.30.0", + "version": "0.31.0", "description": "Example of using @opentelemetry/sdk-trace-web and @opentelemetry/sdk-metrics-base in browser", "main": "index.js", "scripts": { @@ -43,17 +43,17 @@ }, "dependencies": { "@opentelemetry/api": "^1.0.2", - "@opentelemetry/api-metrics": "0.30.0", + "@opentelemetry/api-metrics": "0.31.0", "@opentelemetry/context-zone": "^1.0.1", "@opentelemetry/core": "^1.0.1", - "@opentelemetry/exporter-metrics-otlp-http": "0.30.0", - "@opentelemetry/exporter-trace-otlp-http": "0.30.0", + "@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.30.0", - "@opentelemetry/instrumentation-fetch": "0.30.0", - "@opentelemetry/instrumentation-xml-http-request": "0.30.0", + "@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.30.0", + "@opentelemetry/sdk-metrics-base": "0.31.0", "@opentelemetry/sdk-trace-base": "^1.0.1", "@opentelemetry/sdk-trace-web": "^1.0.1", "@opentelemetry/semantic-conventions": "^1.0.1" From 84e66495d03d7911b680f33d3c8ef4ac0ebff735 Mon Sep 17 00:00:00 2001 From: "marc.pichler" Date: Fri, 5 Aug 2022 12:14:02 +0200 Subject: [PATCH 3/5] fix(changelog): add changelog entry. --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c972ad4724b..083f7c2beb7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ All notable changes to this project will be documented in this file. * feat(sdk-trace-base): move Sampler declaration into sdk-trace-base [#3088](https://github.com/open-telemetry/opentelemetry-js/pull/3088) @legendecas * fix(grpc-instrumentation): added grpc attributes in instrumentation [#3127](https://github.com/open-telemetry/opentelemetry-js/pull/3127) @andrewzenkov +* chore: update trace-web example and rename it to opentelemetry-web [#3145](https://github.com/open-telemetry/opentelemetry-js/pull/3145) @pichlermarc ### :bug: (Bug Fix) From e72e276cf0506e21a61c731d50101aa9004d3126 Mon Sep 17 00:00:00 2001 From: "marc.pichler" Date: Mon, 8 Aug 2022 17:11:03 +0200 Subject: [PATCH 4/5] fix(changelog): move changlog entry. --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 083f7c2beb7..6ac411824fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,7 +10,6 @@ All notable changes to this project will be documented in this file. * feat(sdk-trace-base): move Sampler declaration into sdk-trace-base [#3088](https://github.com/open-telemetry/opentelemetry-js/pull/3088) @legendecas * fix(grpc-instrumentation): added grpc attributes in instrumentation [#3127](https://github.com/open-telemetry/opentelemetry-js/pull/3127) @andrewzenkov -* chore: update trace-web example and rename it to opentelemetry-web [#3145](https://github.com/open-telemetry/opentelemetry-js/pull/3145) @pichlermarc ### :bug: (Bug Fix) @@ -19,6 +18,8 @@ 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 + ### :house: (Internal) ## 1.5.0 From 118c38d7fd657d66a61da20b5fd7011a9951c168 Mon Sep 17 00:00:00 2001 From: "marc.pichler" Date: Tue, 9 Aug 2022 11:14:30 +0200 Subject: [PATCH 5/5] fix(opentelemetry-web): make stopMetrics() non-async. --- examples/opentelemetry-web/examples/metrics/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/opentelemetry-web/examples/metrics/index.js b/examples/opentelemetry-web/examples/metrics/index.js index 4c4d43aabb0..a63adfb4b4f 100644 --- a/examples/opentelemetry-web/examples/metrics/index.js +++ b/examples/opentelemetry-web/examples/metrics/index.js @@ -9,11 +9,11 @@ diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.DEBUG); let interval; let meter; -async function stopMetrics() { +function stopMetrics() { console.log('STOPPING METRICS'); clearInterval(interval); - await metrics.getMeterProvider().shutdown(); - metrics.disable(); + metrics.getMeterProvider().shutdown() + .then(() => metrics.disable()); } function startMetrics() {