open-telemetry · Abinet18 · Sep 10, 2025 · Sep 10, 2025 · Sep 10, 2025
@@ -287,6 +287,10 @@ pkg:propagator-aws-xray-lambda:
   - changed-files:
       - any-glob-to-any-file:
           - packages/propagator-aws-xray-lambda/**
+pkg:instrumentation-page-view:
+    - changed-files:
+        - any-glob-to-any-file:
+            - packages/instrumentation-page-view/**
 pkg-status:unmaintained:
   - changed-files:
       - any-glob-to-any-file:

@@ -158,6 +158,9 @@ components:
     - obecny
   packages/plugin-react-load:
     - martinkuba
+  packages/instrumentation-page-view:
+        - Abinet18
+        - martinkuba
   packages/propagator-instana:
     - kirrg001
   packages/propagator-ot-trace: []
@@ -166,6 +169,5 @@ components:
     - jj22ee
   packages/propagator-aws-xray-lambda: [ ]
   # Unmaintained
-
 ignored-authors:
   - renovate-bot
@@ -65,5 +65,6 @@
   "packages/propagator-instana": "0.4.1",
   "packages/propagator-ot-trace": "0.28.1",
   "packages/propagator-aws-xray": "2.1.1",
-  "packages/propagator-aws-xray-lambda": "0.55.1"
+  "packages/propagator-aws-xray-lambda": "0.55.1",
+  "packages/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>
 

@@ -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,84 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { logs } from '@opentelemetry/api-logs';
+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())
+);
+logs.setGlobalLoggerProvider(loggerProvider);
+
+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);
@@ -7,9 +7,9 @@
   "scripts": {
     "lint": "eslint . --ext=ts,js,mjs",
     "lint:fix": "eslint . --ext=ts,js,mjs --fix",
-    "docker:start": "cd ./docker && docker compose down && docker compose up",
-    "docker:startd": "cd ./docker && docker compose down && docker compose up -d",
-    "start": "webpack-dev-server --progress --color --port 8090 --config ./webpack.config.js --hot --host 0.0.0.0"
+    "docker:start": "cd ./docker && docker-compose down && docker-compose up",
+    "docker:startd": "cd ./docker && docker-compose down && docker-compose up -d",
+    "start": "webpack serve --mode development --progress --port 8090 --config webpack.config.js --hot --host 0.0.0.0 --static examples"
   },
   "repository": {
     "type": "git",
@@ -32,23 +32,26 @@
     "@babel/core": "^7.21.8",
     "babel-loader": "^8.3.0",
     "ts-loader": "^6.2.2",
-    "webpack": "5.89.0",
-    "webpack-cli": "^5.0.0",
-    "webpack-dev-server": "^4.0.0",
-    "webpack-merge": "^4.2.2"
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.2.2",
+    "webpack-merge": "^6.0.1"
   },
   "dependencies": {
     "@opentelemetry/api": "^1.4.1",
+    "@opentelemetry/api-events": "^0.52.1",
     "@opentelemetry/auto-instrumentations-web": "^0.32.2",
     "@opentelemetry/context-zone": "^1.13.0",
     "@opentelemetry/core": "^1.13.0",
+    "@opentelemetry/exporter-logs-otlp-http": "^0.52.1",
     "@opentelemetry/exporter-trace-otlp-http": "^0.39.1",
     "@opentelemetry/instrumentation": "^0.39.1",
-    "@opentelemetry/instrumentation-document-load": "^0.32.2",
     "@opentelemetry/instrumentation-user-interaction": "^0.32.3",
     "@opentelemetry/instrumentation-xml-http-request": "^0.39.1",
     "@opentelemetry/propagator-b3": "^1.13.0",
     "@opentelemetry/resources": "^1.13.0",
+    "@opentelemetry/sdk-events": "^0.52.1",
+    "@opentelemetry/sdk-logs": "^0.52.1",
     "@opentelemetry/sdk-trace-base": "^1.13.0",
     "@opentelemetry/sdk-trace-web": "^1.13.0",
     "@opentelemetry/semantic-conventions": "^1.27.0"

@@ -17,17 +17,21 @@
 'use strict';
 
 const webpack = require('webpack');
-const webpackMerge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const path = require('path');
 
 const directory = path.resolve(__dirname);
 
 const common = {
   mode: 'development',
   entry: {
-    'document-load': 'examples/document-load/index.js',
-    meta: 'examples/meta/index.js',
-    'user-interaction': 'examples/user-interaction/index.js',
+    'document-load': path.resolve(__dirname, 'examples/document-load/index.js'),
+    meta: path.resolve(__dirname, 'examples/meta/index.js'),
+    'user-interaction': path.resolve(
+      __dirname,
+      'examples/user-interaction/index.js'
+    ),
+    'page-view': path.resolve(__dirname, 'examples/page-view/index.js'),
   },
   output: {
     path: path.resolve(__dirname, 'dist'),
@@ -38,15 +42,15 @@ const common = {
   module: {
     rules: [
       {
-        test: /\.js[x]?$/,
-        exclude: /(node_modules)/,
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
         },
       },
       {
         test: /\.ts$/,
-        exclude: /(node_modules)/,
+        exclude: /node_modules/,
         use: {
           loader: 'ts-loader',
         },
@@ -59,14 +63,22 @@ const common = {
   },
 };
 
-module.exports = webpackMerge(common, {
+const devConfig = {
   devtool: 'eval-source-map',
   devServer: {
-    static: path.resolve(path.join(__dirname, 'examples')),
+    static: {
+      directory: path.resolve(__dirname, 'examples'),
+    },
+    compress: true,
+    port: 8090,
+    hot: true,
+    host: '0.0.0.0',
   },
   plugins: [
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development'),
     }),
   ],
-});
+};
+
+module.exports = merge(common, devConfig);
@@ -23,10 +23,16 @@ module.exports = {
   output: {filename: 'bundle.js'},
   resolve: {
     extensions: ['.ts', '.js', '.tsx'],
+    alias: {
+      // Some ESM packages (e.g., sinon-esm) import 'process/browser' directly and require full path resolution
+      'process/browser': require.resolve('process/browser'),
+    },
     fallback: {
       // Enable the assert library polyfill because that is used in tests
       "assert": require.resolve('assert/'),
       "util": require.resolve('util/'),
+      // Polyfill Node's process for browser bundles
+      "process": require.resolve('process/browser'),
     },
   },
   devtool: 'eval-source-map',