diff --git a/examples/web/docker/collector-config.yaml b/examples/web/docker/collector-config.yaml new file mode 100644 index 00000000000..c4c7b0c49f5 --- /dev/null +++ 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 new file mode 100644 index 00000000000..2064e55499f --- /dev/null +++ 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 index 8df377cc522..b0362bc4497 100644 --- 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}' --> - + diff --git a/examples/web/examples/document-load/index.js b/examples/web/examples/document-load/index.js index 8f354a8c8e3..f000d7a8687 100644 --- 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 index fde51e48a65..aabd3099156 100644 --- 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 index df9634dbe20..751804471fb 100644 --- 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 index 2e41242e47f..1e083db6b3a 100644 --- 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" }