open-telemetry · martinkuba · Aug 4, 2023 · Aug 4, 2023 · Aug 4, 2023 · Aug 7, 2023
@@ -0,0 +1,19 @@
+const { logs } = require('@opentelemetry/api-logs');
+const {
+  LoggerProvider,
+  SimpleLogRecordProcessor,
+  ConsoleLogRecordExporter,
+} = require('@opentelemetry/sdk-logs');
+const { 
+  GlobalAttributesLogRecordProcessor,
+  ContextAttributesLogRecordProcessor
+} = require('@opentelemetry/shared-attributes');
+
+const loggerProvider = new LoggerProvider();
+loggerProvider.addLogRecordProcessor(new GlobalAttributesLogRecordProcessor());
+loggerProvider.addLogRecordProcessor(new ContextAttributesLogRecordProcessor());
+loggerProvider.addLogRecordProcessor(
+  new SimpleLogRecordProcessor(new ConsoleLogRecordExporter())
+);
+
+logs.setGlobalLoggerProvider(loggerProvider);
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Shared attributes example</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  <p>
+  This example shows the usage of shared attributes. There are two types of attributes - global and trace-context-based.
+  Global attributes are applied to all spans and logs, which means that spans in different traces will receive the same global attributes.
+  Examples of global attributes are session ID or the current URL.
+  </p>
+
+  <p>
+  Trace-context attributes are applied to spans and logs that belong to the same trace. An example of such attribute would be
+  an identifier of the user interaction that started the trace.
+  </p>
+
+  <p>
+  The `session.id` attribute is set at the beginning when the app initializes, and the value is included on all spans and logs.
+  </p>
+
+  <p>
+  The `page.url` attribute is set at the beginning, and can also be changed by clicking the `Change URL` button.
+  </p>
+
+  <p>
+  Clicking the Test button will generate a single event (log record) and a trace with two spans. All these three signals will have
+  the same session.id, pageUrl and element attributes added to them.
+  </p>
+
+  <script type="text/javascript" src="shared-attributes.js"></script>
+  <br/>
+  <button id="button1">Test</button>
+  <button id="button2">Change URL</button>
+
+</body>
+
+</html>
@@ -0,0 +1,58 @@
+require('./tracing');
+require('./events');
+const { context, trace } = require('@opentelemetry/api');
+const { setGlobalAttribute, setContextAttribute } = require('@opentelemetry/shared-attributes');
+const { logs } = require('@opentelemetry/api-logs');
+
+setGlobalAttribute('session.id', 'abcd1234');
+setGlobalAttribute('pageUrl', location.href);
+
+const logger = logs.getLogger('test');
+const tracer = trace.getTracer('test');
+
+window.addEventListener('load', bootstrapApp);
+
+// example of keeping track of context between async operations
+function bootstrapApp() {
+  const element = document.getElementById('button1');
+  element.addEventListener('click', startTrace);
+
+  const element2 = document.getElementById('button2');
+  element2.addEventListener('click', changeUrl);
+
+  window.addEventListener('popstate', () => {
+    setGlobalAttribute('pageUrl', location.href);
+  });
+};
+
+function startTrace() {
+  const url = 'https://httpbin.org/get';
+
+  const traceContext = setContextAttribute(context.active(), 'element', event.srcElement.id);
+  const rootSpan = tracer.startSpan('click', undefined, traceContext);
+  context.with(trace.setSpan(traceContext, rootSpan), () => {
+    logger.emit({
+      url: url
+    });
+
+    fetch(url, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      }
+    })
+    .then(() => {
+      rootSpan.end();
+    });
+  });
+};
+
+function changeUrl() {
+  const url = new URL(location);
+  url.searchParams.set("foo", Math.round(Math.random() * 10));
+  history.pushState({}, "", url);
+
+  // update global attribute
+  setGlobalAttribute('pageUrl', location.href);
+}
@@ -0,0 +1,36 @@
+const { ConsoleSpanExporter, SimpleSpanProcessor } = require( '@opentelemetry/sdk-trace-base');
+const { WebTracerProvider } = require( '@opentelemetry/sdk-trace-web');
+const { FetchInstrumentation } = require( '@opentelemetry/instrumentation-fetch');
+const { ZoneContextManager } = require( '@opentelemetry/context-zone');
+const { B3Propagator } = require( '@opentelemetry/propagator-b3');
+const { registerInstrumentations } = require( '@opentelemetry/instrumentation');
+const { 
+  GlobalAttributesSpanProcessor,
+  ContextAttributesSpanProcessor
+} = require('@opentelemetry/shared-attributes');
+
+const provider = new WebTracerProvider();
+
+// 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
+// exporter without delay
+provider.addSpanProcessor(new GlobalAttributesSpanProcessor());
+provider.addSpanProcessor(new ContextAttributesSpanProcessor());
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+provider.register({
+  contextManager: new ZoneContextManager(),
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    new FetchInstrumentation({
+      ignoreUrls: [/localhost:8090\/sockjs-node/],
+      propagateTraceHeaderCorsUrls: [
+        'https://cors-test.appspot.com/test',
+        'https://httpbin.org/get',
+      ],
+      clearTimingResources: true,
+    }),
+  ],
+});
@@ -56,7 +56,8 @@
     "@opentelemetry/sdk-metrics": "1.15.1",
     "@opentelemetry/sdk-trace-base": "1.15.1",
     "@opentelemetry/sdk-trace-web": "1.15.1",
-    "@opentelemetry/semantic-conventions": "1.15.1"
+    "@opentelemetry/semantic-conventions": "1.15.1",
+    "@opentelemetry/shared-attributes": "*"
   },
   "homepage": "https://github.com/open-telemetry/opentelemetry-js/tree/main/examples/tracer-web"
 }
@@ -14,6 +14,7 @@ const common = {
     fetchXhrB3: 'examples/fetchXhrB3/index.js',
     'fetch-proto': 'examples/fetch-proto/index.js',
     zipkin: 'examples/zipkin/index.js',
+    'shared-attributes': 'examples/shared-attributes/index.js',
   },
   output: {
     path: path.resolve(__dirname, 'dist'),

@@ -14,6 +14,7 @@ const common = {
     fetchXhrB3: 'examples/fetchXhrB3/index.js',
     "fetch-proto": "examples/fetch-proto/index.js",
     zipkin: 'examples/zipkin/index.js',
+    'shared-attributes': 'examples/shared-attributes/index.js',
   },
   output: {
     path: path.resolve(__dirname, 'dist'),

@@ -0,0 +1 @@
+build
@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    mocha: true,
+    node: true,
+  },
+  ...require('../../../eslint.base.js'),
+};
@@ -0,0 +1,4 @@
+/bin
+/coverage
+/doc
+/test