fix(examples): fix React Load plugin example (open-telemetry#800)

Co-authored-by: Daniel Dyla <dyladan@users.noreply.github.com>
Co-authored-by: Valentin Marchaud <contact@vmarchaud.fr>

examples/react-load/react/README.md

@@ -29,7 +29,7 @@ npm run build
 npm start
 ```
 
-By default, the application runs on port 5000.
+By default, the application runs on port 3000.
 
 Open Zipkin page at <http://localhost:9411/zipkin/> - you should be able to see the spans in zipkin
 
@@ -39,7 +39,7 @@ Take note of the parent-child relationships.
 
 ### First load
 
-Upon loading, <http://localhost:5000> mounting spans will be exported
+Upon loading, <http://localhost:3000> mounting spans will be exported
 <p align="center"><img src="./images/mounting.png?raw=true"/></p>
 <p align="center"><img src="./images/zipkin-mounting.png?raw=true"/></p>
 

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

@@ -1,18 +1,20 @@
 receivers:
   otlp:
-    endpoint: 0.0.0.0:55678
+    protocols:
+      http:
+        endpoint: 0.0.0.0:55678
+        cors_allowed_origins: http://localhost:3000
 
 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]

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

@@ -3,8 +3,8 @@ 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.40.0
+    command: ["--config=/conf/collector-config.yaml"]
     volumes:
       - ./collector-config.yaml:/conf/collector-config.yaml
     ports:

examples/react-load/react/package.json

@@ -36,6 +36,7 @@
     "ts-loader": "^6.0.4"
   },
   "dependencies": {
+    "@opentelemetry/api": "^1.0.4",
     "@opentelemetry/context-zone": "^0.25.0",
     "@opentelemetry/core": "^0.25.0",
     "@opentelemetry/exporter-collector": "^0.25.0",
@@ -46,7 +47,8 @@
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.1",
-    "reactstrap": "^8.5.1"
+    "reactstrap": "^8.5.1",
+    "serve": "^13.0.2"
   },
   "browserslist": {
     "production": [

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

@@ -4,9 +4,15 @@ import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load';
 import { ZoneContextManager } from '@opentelemetry/context-zone';
 import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
 import { diag, DiagConsoleLogger } from '@opentelemetry/api';
+import { Resource } from '@opentelemetry/resources';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'
 
 export default (serviceName) => {
-  const provider = new WebTracerProvider();
+  const provider = new WebTracerProvider({
+    resource: new Resource({
+        [SemanticResourceAttributes.SERVICE_NAME]: "react-load-example"
+    }),
+  });
 
   const exporter = new CollectorTraceExporter({
     url: 'http://localhost:55678/v1/trace',