open-telemetry · Abinet18 · Aug 9, 2024 · Aug 16, 2024 · Aug 16, 2024 · Aug 16, 2024
@@ -60,5 +60,6 @@
   "plugins/web/opentelemetry-instrumentation-user-interaction": "0.39.0",
   "plugins/web/opentelemetry-plugin-react-load": "0.30.1",
   "propagators/opentelemetry-propagator-instana": "0.3.2",
-  "propagators/opentelemetry-propagator-ot-trace": "0.27.2"
+  "propagators/opentelemetry-propagator-ot-trace": "0.27.2",
+  "plugins/web/opentelemetry-instrumentation-page-view": "0.39.0"
 }
@@ -25,6 +25,14 @@
   <script type="text/javascript" src="document-load.js"></script>
   <br/>
   <button id="button1">Test WebTracer with ZoneContextManager - async</button>
+  <nav>
+    <a href="document-load/route1" data-link>Route 1</a>
+    <a href="document-load/route2" data-link>Route 2</a>
+  </nav>
+
+  <div id="content">
+    <!-- Content will be loaded here -->
+  </div>
 
 </body>
 

@@ -112,3 +112,4 @@ const prepareClickEvent = () => {
 };
 
 window.addEventListener('load', prepareClickEvent);
+
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Page View Plugin Example</title>
+  <base href="/">
+
+  <!--
+    https://www.w3.org/TR/trace-context/
+    Set the `traceparent` in the server's HTML template code. It should be
+    dynamically generated server side to have the server's request trace Id,
+    a parent span Id that was set on the server's request span, and the trace
+    flags to indicate the server's sampling decision
+    (01 = sampled, 00 = notsampled).
+    '{version}-{traceId}-{spanId}-{sampleDecision}'
+  -->
+<!--  <meta name="traceparent" content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01">-->
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  Example of using Web Tracer with document load plugin with console exporter and collector exporter
+  <script type="text/javascript" src="page-view.js"></script>
+  <br/>
+  <nav>
+    <a href="page-view/route1" data-link>Route 1</a>
+    <a href="page-view/route2" data-link>Route 2</a>
+  </nav>
+
+  <div id="content">
+    <!-- Content will be loaded here -->
+  </div>
+
+</body>
+
+</html>
@@ -0,0 +1,62 @@
+import { context, trace } from '@opentelemetry/api';
+import { events } from '@opentelemetry/api-events';
+import { EventLoggerProvider } from '@opentelemetry/sdk-events';
+import { LoggerProvider,SimpleLogRecordProcessor,ConsoleLogRecordExporter } from '@opentelemetry/sdk-logs';
+import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-http'
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { Resource } from '@opentelemetry/resources';
+import { SEMRESATTRS_SERVICE_NAME } from '@opentelemetry/semantic-conventions';
+import { PageViewInstrumentation } from "@opentelemetry/instrumentation-page-view";
+
+const loggerProvider = new LoggerProvider({resource: new Resource({[SEMRESATTRS_SERVICE_NAME]: 'web-service-dl'})});
+
+loggerProvider.addLogRecordProcessor(new SimpleLogRecordProcessor(new ConsoleLogRecordExporter()));
+loggerProvider.addLogRecordProcessor(new SimpleLogRecordProcessor(new OTLPLogExporter()));
+const eventLoggerProvider = new EventLoggerProvider(loggerProvider);
+events.setGlobalEventLoggerProvider(eventLoggerProvider);
+
+registerInstrumentations({
+  instrumentations: [
+    new PageViewInstrumentation({enabled:false})
+  ],
+});
+
+// Define routes and their content
+const routes = {
+  '/page-view/route1': '<h2>Welcome to Route 1</h2><p>This is the content for Route 1.</p>',
+  '/page-view/route2': '<h2>Welcome to Route 2</h2><p>This is the content for Route 2.</p>'
+};
+
+// Function to navigate to a route
+function navigateTo(url) {
+  console.log('Navigating to', url);
+  history.pushState(null, null, url);
+  handleRouteChange();
+}
+
+// Function to handle the route change
+function handleRouteChange() {
+  const path = window.location.pathname; // Get current path
+  const routeContent = routes[path] || `<h2>Not on Route </h2>`;
+  document.getElementById('content').innerHTML = routeContent;
+}
+
+// Attach event listeners to navigation links
+
+const attachEventListenersToLinks = () => {
+  document.querySelectorAll('a[data-link]').forEach(link => {
+    console.log('attach event listener to link', link.href)
+    link.addEventListener('click', (event) => {
+      console.log('Link clicked', event.target.href)
+      event.preventDefault();
+      navigateTo(event.target.href);
+    });
+  });
+}
+
+window.addEventListener('popstate', handleRouteChange);
+const loadTimeSetup = () => {
+  handleRouteChange();
+  attachEventListenersToLinks();
+}
+window.addEventListener('load', loadTimeSetup);