fix(preact-example): update example to use latest otelcol/js-core (open-telemetry#1458)

Author: pichlermarc

examples/react-load/preact/docker/collector-config.yaml

@@ -1,18 +1,25 @@
 receivers:
   otlp:
-    endpoint: 0.0.0.0:55678
+    protocols:
+      http:
+        cors:
+          allowed_origins:
+            - http://*
+            - https://*
 
 exporters:
   zipkin:
-    url: "http://zipkin-all-in-one:9411/api/v2/spans"
+    endpoint: "http://zipkin-all-in-one:9411/api/v2/spans"
 
 processors:
   batch:
-  queued_retry:
 
 service:
   pipelines:
     traces:
       receivers: [otlp]
       exporters: [zipkin]
-      processors: [batch, queued_retry]
+      processors: [batch]
+  telemetry:
+    logs:
+      level: "debug"

examples/react-load/preact/docker/docker-compose.yaml

@@ -3,12 +3,12 @@ services:
 
   # Collector
   collector:
-    image: omnition/opentelemetry-collector-contrib:0.2.8
-    command: ["--config=/conf/collector-config.yaml", "--log-level=DEBUG"]
+    image: otel/opentelemetry-collector-contrib:0.75.0
+    command: ["--config=/conf/collector-config.yaml"]
     volumes:
       - ./collector-config.yaml:/conf/collector-config.yaml
     ports:
-      - "55678:55678"
+      - "4318:4318"
     depends_on:
       - zipkin-all-in-one
 

examples/react-load/preact/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-load-preact-example",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Example of using @opentelemetry/plugin-react-load in browser with Preact",
   "main": "index.js",
   "scripts": {
@@ -23,7 +23,7 @@
     "tracing"
   ],
   "engines": {
-    "node": ">=8"
+    "node": ">=14"
   },
   "author": "OpenTelemetry Authors",
   "license": "Apache-2.0",
@@ -33,15 +33,14 @@
   "devDependencies": {
     "identity-obj-proxy": "^3.0.0",
     "preact-cli": "^3.0.0",
-    "preact-render-spy": "^1.2.1",
     "sirv-cli": "1.0.3"
   },
   "dependencies": {
-    "@opentelemetry/context-zone": "^0.25.0",
-    "@opentelemetry/exporter-collector": "^0.25.0",
-    "@opentelemetry/plugin-react-load": "^0.23.0",
-    "@opentelemetry/sdk-trace-base": "^0.25.0",
-    "@opentelemetry/sdk-trace-web": "^0.25.0",
+    "@opentelemetry/context-zone": "^1.11.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.37.0",
+    "@opentelemetry/plugin-react-load": "^0.28.1",
+    "@opentelemetry/sdk-trace-base": "^1.11.0",
+    "@opentelemetry/sdk-trace-web": "^1.11.0",
     "preact": "^10.3.2",
     "preact-render-to-string": "^5.1.4",
     "preact-router": "^3.2.1"

examples/react-load/preact/src/web-tracer.js

@@ -1,14 +1,15 @@
 import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import { diag, DiagConsoleLogger, DiagLogLevel } from '@opentelemetry/api';
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load';
 import { ZoneContextManager } from '@opentelemetry/context-zone';
-import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
 
 export default (serviceName) => {
+  diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.DEBUG);
   const provider = new WebTracerProvider();
-
-  const exporter = new CollectorTraceExporter({
-    url: 'http://localhost:55678/v1/trace',
+  const exporter = new OTLPTraceExporter({
+    url: 'http://localhost:4318/v1/traces',
   });
 
   provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
@@ -21,7 +22,6 @@ export default (serviceName) => {
   const tracer = provider.getTracer(serviceName);
 
   BaseOpenTelemetryComponent.setTracer(serviceName)
-  BaseOpenTelemetryComponent.setLogger(provider.logger)
 
   return tracer;
 }