Skip to content

feat: Browser Navigation Instrumentation #3148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat: Browser Navigation Instrumentation #3148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6851398
feat: add browser navigation instrumentation after rebase
Abinet18 Nov 14, 2025
68d5314
package fixes
Abinet18 Nov 14, 2025
cfc7e92
fix failing tests
Abinet18 Nov 14, 2025
f9a6d14
fix examples
Abinet18 Nov 14, 2025
fc9b539
file import in package.json until package gets published
Abinet18 Nov 14, 2025
0cbee2d
add todo to changedependecy when published
Abinet18 Nov 17, 2025
67d4173
try compile before lint , fix for package version
Abinet18 Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .github/component-label-map.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,10 @@ pkg:propagator-aws-xray-lambda:
- changed-files:
- any-glob-to-any-file:
- packages/propagator-aws-xray-lambda/**
pkg:instrumentation-browser-navigation:
- changed-files:
- any-glob-to-any-file:
- packages/instrumentation-browser-navigation/**
pkg-status:unmaintained:
- changed-files:
- any-glob-to-any-file:
Expand Down
4 changes: 3 additions & 1 deletion .github/component_owners.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,9 @@ components:
- wolfgangcodes
packages/plugin-react-load:
- martinkuba
packages/instrumentation-browser-navigation:
- Abinet18
- martinkuba
packages/propagator-instana:
- kirrg001
packages/propagator-ot-trace: []
Expand All @@ -174,6 +177,5 @@ components:
- jj22ee
packages/propagator-aws-xray-lambda: [ ]
# Unmaintained

ignored-authors:
- renovate-bot
2 changes: 2 additions & 0 deletions .github/workflows/lint.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ jobs:
node-version: 18
cache: npm
- run: npm ci --ignore-scripts
- name: Compile
run: npm run compile
- name: Lint
run: |
npm run lint
3 changes: 2 additions & 1 deletion .release-please-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,5 +68,6 @@
"packages/propagator-instana": "0.4.3",
"packages/propagator-ot-trace": "0.28.3",
"packages/propagator-aws-xray": "2.1.3",
"packages/propagator-aws-xray-lambda": "0.55.3"
"packages/propagator-aws-xray-lambda": "0.55.3",
"packages/instrumentation-browser-navigation": "0.54.0"
}
7 changes: 7 additions & 0 deletions examples/web/DEPENDENCIES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Dependencies Notes

## Local Development Dependencies

- `@opentelemetry/instrumentation-browser-navigation`: Currently using `file:../../packages/instrumentation-browser-navigation`
- **TODO**: Change to npm version (e.g., `"^0.54.0"`) when package is published to npm registry
- This is a temporary local file reference for development and testing
38 changes: 22 additions & 16 deletions examples/web/examples/document-load/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Load Plugin Example</title>
<base href="/" />

<head>
<meta charset="utf-8">
<title>Document Load 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,
Expand All @@ -15,17 +14,24 @@
(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>
<!-- <meta name="traceparent" content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01">-->

<body>
Example of using Web Tracer with document load plugin with console exporter and collector exporter
<script type="text/javascript" src="document-load.js"></script>
<br/>
<button id="button1">Test WebTracer with ZoneContextManager - async</button>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

</body>
<body>
Example of using Web Tracer with document load plugin with console exporter
and collector exporter
<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>
</html>
4 changes: 2 additions & 2 deletions examples/web/examples/document-load/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ import {
W3CTraceContextPropagator,
} from '@opentelemetry/core';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { Resource } from '@opentelemetry/resources';
import { resourceFromAttributes } from '@opentelemetry/resources';
import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions';

const provider = new WebTracerProvider({
resource: new Resource({
resource: resourceFromAttributes({
[ATTR_SERVICE_NAME]: 'web-service-dl',
}),
spanProcessors: [
Expand Down
44 changes: 44 additions & 0 deletions examples/web/examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenTelemetry Web Examples</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
}
h1 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
}
a {
text-decoration: none;
color: #0066cc;
font-size: 18px;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>OpenTelemetry Web Examples</h1>
<p>Choose an example to explore:</p>
<ul>
<li><a href="/document-load/">📄 Document Load Instrumentation</a></li>
<li><a href="/navigation/">🧭 Navigation Instrumentation</a></li>
<li>
<a href="/user-interaction/">👆 User Interaction Instrumentation</a>
</li>
<li><a href="/meta/">🏷️ Meta Instrumentation</a></li>
</ul>
</body>
</html>
48 changes: 23 additions & 25 deletions examples/web/examples/meta/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>User Interaction Example</title>
<base href="/" />

<head>
<meta charset="utf-8">
<title>User Interaction 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,
Expand All @@ -15,25 +14,24 @@
(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 meta package and with console exporter and collector exporter
<script type="text/javascript" src="meta.js"></script>
<br/>
<button id="btnAdd" class="btnAddClass">Add button</button>
<div>
<div></div>
<div></div>
<div></div>
<div id="buttons"></div>
<div></div>
</div>
<br/>
<!-- <meta name="traceparent" content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01">-->

</body>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
Example of using Web Tracer with meta package and with console exporter and
collector exporter
<script type="text/javascript" src="meta.js"></script>
<br />
<button id="btnAdd" class="btnAddClass">Add button</button>
<div>
<div></div>
<div></div>
<div></div>
<div id="buttons"></div>
<div></div>
</div>
<br />
</body>
</html>
4 changes: 2 additions & 2 deletions examples/web/examples/meta/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
import { B3Propagator } from '@opentelemetry/propagator-b3';
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { Resource } from '@opentelemetry/resources';
import { resourceFromAttributes } from '@opentelemetry/resources';
import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions';

const providerWithZone = new WebTracerProvider({
resource: new Resource({
resource: resourceFromAttributes({
[ATTR_SERVICE_NAME]: 'web-service-meta',
}),
spanProcessors: [
Expand Down
Loading
Loading