refactor(examples/opentelemetry-web): use new exported string constants for semconv (#4764)

* refactor(examples/opentelemetry-web): use new exported string constants for semconv

* added changelog entry

* deleted changelog extra line

---------

Co-authored-by: Marc Pichler <[email protected]>

Author: Zen-cronic

CHANGELOG.md

@@ -16,6 +16,8 @@ For experimental package changes, see the [experimental CHANGELOG](experimental/
 
 ### :books: (Refine Doc)
 
+* refactor(examples): added usage of @opentelemetry/semantic-conventions and @opentelemetry/resources to the examples in examples/opentelemetry-web for maintaining consistency across all examples. [#4764](https://github.com/open-telemetry/opentelemetry-js/pull/4764) @Zen-cronic
+
 ### :house: (Internal)
 
 * refactor(context-zone-peer-dep): use explicit exports [#4785](https://github.com/open-telemetry/opentelemetry-js/pull/4787) @pichlermarc

examples/opentelemetry-web/examples/fetch-proto/index.js

@@ -6,8 +6,14 @@ const { ZoneContextManager } = require("@opentelemetry/context-zone");
 const { B3Propagator } = require("@opentelemetry/propagator-b3");
 const { registerInstrumentations } = require("@opentelemetry/instrumentation");
 const { OTLPTraceExporter: OTLPTraceExporterProto } = require("@opentelemetry/exporter-trace-otlp-proto");
+const { Resource } = require("@opentelemetry/resources");
+const { SEMRESATTRS_SERVICE_NAME } = require("@opentelemetry/semantic-conventions");
 
-const provider = new WebTracerProvider();
+const provider = new WebTracerProvider({
+  resource: new Resource({
+    [SEMRESATTRS_SERVICE_NAME]: 'fetch-proto-web-service'
+  })
+});
 
 // Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests
 // to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the

examples/opentelemetry-web/examples/fetch/index.js

@@ -6,8 +6,14 @@ const { FetchInstrumentation } = require( '@opentelemetry/instrumentation-fetch'
 const { ZoneContextManager } = require( '@opentelemetry/context-zone');
 const { B3Propagator } = require( '@opentelemetry/propagator-b3');
 const { registerInstrumentations } = require( '@opentelemetry/instrumentation');
+const { Resource } = require('@opentelemetry/resources');
+const { SEMRESATTRS_SERVICE_NAME } = require('@opentelemetry/semantic-conventions');
 
-const provider = new WebTracerProvider();
+const provider = new WebTracerProvider({
+  resource: new Resource({
+    [SEMRESATTRS_SERVICE_NAME]: 'fetch-web-service'
+  })
+});
 
 // Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests
 // to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the

examples/opentelemetry-web/examples/fetchXhr/index.js

@@ -6,8 +6,14 @@ 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 { Resource } = require('@opentelemetry/resources');
+const { SEMRESATTRS_SERVICE_NAME } = require('@opentelemetry/semantic-conventions');
 
-const provider = new WebTracerProvider();
+const provider = new WebTracerProvider({
+  resource: new Resource({
+    [SEMRESATTRS_SERVICE_NAME]: 'fetch-xhr-web-service'
+  })
+});
 
 // Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests
 // to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the

examples/opentelemetry-web/examples/fetchXhrB3/index.js

@@ -7,8 +7,14 @@ const { XMLHttpRequestInstrumentation } = require( '@opentelemetry/instrumentati
 const { ZoneContextManager } = require( '@opentelemetry/context-zone');
 const { B3Propagator } = require( '@opentelemetry/propagator-b3');
 const { registerInstrumentations } = require( '@opentelemetry/instrumentation');
+const { Resource } = require('@opentelemetry/resources');
+const { SEMRESATTRS_SERVICE_NAME } = require('@opentelemetry/semantic-conventions');
 
-const provider = new WebTracerProvider();
+const provider = new WebTracerProvider({
+  resource: new Resource({
+    [SEMRESATTRS_SERVICE_NAME]: 'fetch-xhr-b3-web-service'
+  })
+});
 
 // Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests
 // to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the

examples/opentelemetry-web/examples/xml-http-request/index.js

@@ -6,8 +6,14 @@ 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 { Resource } = require('@opentelemetry/resources');
+const { SEMRESATTRS_SERVICE_NAME } = require('@opentelemetry/semantic-conventions');
 
-const providerWithZone = new WebTracerProvider();
+const providerWithZone = new WebTracerProvider({
+  resource: new Resource({
+    [SEMRESATTRS_SERVICE_NAME]: 'xml-http-web-service'
+  })
+});
 
 // Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests
 // to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the

examples/opentelemetry-web/examples/zipkin/index.js

@@ -1,8 +1,15 @@
 const { ConsoleSpanExporter, SimpleSpanProcessor } = require('@opentelemetry/sdk-trace-base');
 const { WebTracerProvider } = require('@opentelemetry/sdk-trace-web');
 const { ZipkinExporter } = require('@opentelemetry/exporter-zipkin');
+const { Resource } = require('@opentelemetry/resources');
+const { SEMRESATTRS_SERVICE_NAME } = require('@opentelemetry/semantic-conventions');
+
+const provider = new WebTracerProvider({
+  resource: new Resource({
+    [SEMRESATTRS_SERVICE_NAME]: 'zipkin-web-service'
+  })
+});
 
-const provider = new WebTracerProvider();
 provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
 provider.addSpanProcessor(new SimpleSpanProcessor(new ZipkinExporter({
   // testing interceptor