updating web examples to latest (open-telemetry#731)

Co-authored-by: Naseem <[email protected]> Co-authored-by: Valentin Marchaud <[email protected]>
dynatrace-oss-contrib · Jan 15, 2022 · b231412 · b231412
1 parent 89f5044
commit b231412
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 27 deletions.
diff --git a/examples/web/docker/collector-config.yaml b/examples/web/docker/collector-config.yaml
@@ -0,0 +1,24 @@
+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:
+  pipelines:
+    traces:
+      receivers: [otlp]
+      exporters: [zipkin]
+      processors: [batch]
diff --git a/examples/web/docker/docker-compose.yaml b/examples/web/docker/docker-compose.yaml
@@ -0,0 +1,21 @@
+version: "3"
+services:
+  # Collector
+  collector:
+    image: otel/opentelemetry-collector:0.38.0
+    command: ["--config=/conf/collector-config.yaml"]
+    volumes:
+      - ./collector-config.yaml:/conf/collector-config.yaml
+    ports:
+      - "9464:9464"
+      - "4317:4317"
+      - "4318:4318"
+      - "55681:55681"
+    depends_on:
+      - zipkin-all-in-one
+
+  # Zipkin
+  zipkin-all-in-one:
+    image: openzipkin/zipkin:latest
+    ports:
+      - "9411:9411"
diff --git a/examples/web/examples/document-load/index.html b/examples/web/examples/document-load/index.html
@@ -15,7 +15,7 @@
     (01 = sampled, 00 = notsampled).
     '{version}-{traceId}-{spanId}-{sampleDecision}'
   -->
-  <meta name="traceparent" content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01">
+<!--  <meta name="traceparent" content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01">-->
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>

diff --git a/examples/web/examples/document-load/index.js b/examples/web/examples/document-load/index.js
@@ -4,21 +4,28 @@ import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
 import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
 import { ZoneContextManager } from '@opentelemetry/context-zone';
-import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-otlp-http';
 import { B3Propagator } from '@opentelemetry/propagator-b3';
-import { CompositePropagator, HttpTraceContextPropagator } from '@opentelemetry/core';
+import { CompositePropagator, W3CTraceContextPropagator } from '@opentelemetry/core';
 import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { Resource } from '@opentelemetry/resources';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const provider = new WebTracerProvider({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'web-service-dl',
+  }),
+});
 
-const provider = new WebTracerProvider();
 provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
-provider.addSpanProcessor(new SimpleSpanProcessor(new CollectorTraceExporter()));
+provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter()));
 
 provider.register({
   contextManager: new ZoneContextManager(),
   propagator: new CompositePropagator({
     propagators: [
       new B3Propagator(),
-      new HttpTraceContextPropagator(),
+      new W3CTraceContextPropagator(),
     ],
   }),
 });
@@ -55,8 +62,8 @@ const getData = (url) => new Promise((resolve, reject) => {
 
 // example of keeping track of context between async operations
 const prepareClickEvent = () => {
-  const url1 = 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/master/package.json';
-  const url2 = 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/master/packages/opentelemetry-web/package.json';
+  const url1 = 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/main/package.json';
+  const url2 = 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/main/packages/opentelemetry-sdk-trace-web/package.json';
 
   const element = document.getElementById('button1');
 

diff --git a/examples/web/examples/meta/index.js b/examples/web/examples/meta/index.js
@@ -1,15 +1,21 @@
 import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import { ZoneContextManager } from '@opentelemetry/context-zone';
-import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-otlp-http';
 import { B3Propagator } from '@opentelemetry/propagator-b3';
 import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
 import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { Resource } from '@opentelemetry/resources';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
 
-const providerWithZone = new WebTracerProvider();
+const providerWithZone = new WebTracerProvider({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'web-service-meta',
+  }),
+});
 
 providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
-providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new CollectorTraceExporter()));
+providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter()));
 
 providerWithZone.register({
   contextManager: new ZoneContextManager(),

diff --git a/examples/web/examples/user-interaction/index.js b/examples/web/examples/user-interaction/index.js
@@ -2,15 +2,21 @@ import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-tra
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
 import { ZoneContextManager } from '@opentelemetry/context-zone';
-import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-otlp-http';
 import { B3Propagator } from '@opentelemetry/propagator-b3';
 import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
 import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { Resource } from '@opentelemetry/resources';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
 
-const providerWithZone = new WebTracerProvider();
+const providerWithZone = new WebTracerProvider({
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'web-service-ui',
+  }),
+});
 
 providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
-providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new CollectorTraceExporter()));
+providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter()));
 
 providerWithZone.register({
   contextManager: new ZoneContextManager(),

diff --git a/examples/web/package.json b/examples/web/package.json
@@ -1,10 +1,12 @@
 {
   "name": "web-examples",
   "private": true,
-  "version": "0.23.0",
+  "version": "0.26.0",
   "description": "Example of using web plugins in browser",
   "main": "index.js",
   "scripts": {
+    "docker:start": "cd ./docker && docker-compose down && docker-compose up",
+    "docker:startd": "cd ./docker && docker-compose down && docker-compose up -d",
     "start": "webpack-dev-server -d --progress --colors --port 8090 --config webpack.config.js --hot --inline --host 0.0.0.0 --content-base examples"
   },
   "repository": {
@@ -34,18 +36,20 @@
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "@opentelemetry/api": "^1.0.2",
-    "@opentelemetry/auto-instrumentations-web": "^0.24.0",
-    "@opentelemetry/context-zone": "^0.25.0",
-    "@opentelemetry/core": "^0.25.0",
-    "@opentelemetry/exporter-collector": "^0.25.0",
-    "@opentelemetry/instrumentation": "^0.25.0",
-    "@opentelemetry/instrumentation-document-load": "^0.23.0",
-    "@opentelemetry/instrumentation-user-interaction": "^0.23.0",
-    "@opentelemetry/instrumentation-xml-http-request": "^0.25.0",
-    "@opentelemetry/propagator-b3": "^0.25.0",
-    "@opentelemetry/sdk-trace-base": "^0.25.0",
-    "@opentelemetry/sdk-trace-web": "^0.25.0"
+    "@opentelemetry/api": "^1.0.3",
+    "@opentelemetry/auto-instrumentations-web": "~0.26.0",
+    "@opentelemetry/context-zone": "~1.0.0",
+    "@opentelemetry/core": "~1.0.0",
+    "@opentelemetry/exporter-otlp-http": "~0.26.0",
+    "@opentelemetry/instrumentation": "~0.26.0",
+    "@opentelemetry/instrumentation-document-load": "~0.26.0",
+    "@opentelemetry/instrumentation-user-interaction": "~0.26.0",
+    "@opentelemetry/instrumentation-xml-http-request": "~0.26.0",
+    "@opentelemetry/propagator-b3": "~1.0.0",
+    "@opentelemetry/resources": "~1.0.0",
+    "@opentelemetry/sdk-trace-base": "~1.0.0",
+    "@opentelemetry/sdk-trace-web": "~1.0.0",
+    "@opentelemetry/semantic-conventions": "~1.0.0"
   },
   "homepage": "https://github.com/open-telemetry/opentelemetry-js-contrib#readme"
 }