✨ add Vue Router v4 view tracking by mormubis · Pull Request #4328 · DataDog/browser-sdk

mormubis · 2026-03-13T14:35:41Z

Motivation

Third of five PRs. #4325 and #4327 are already merged. After this, navigating between routes automatically creates RUM views with parameterized names instead of raw URLs.

Changes

Exports a wrapped createRouter from @datadog/browser-rum-vue/vue-router-v4 as a drop-in for the standard vue-router import:

import { createRouter } from '@datadog/browser-rum-vue/vue-router-v4'

On each navigation, afterEach calls startView() with the parameterized route name (/users/:id rather than /users/42). There is one non-obvious bit: afterEach also fires for navigations that get blocked by a guard, so we filter those out. Details in a comment on the diff.

Requires vuePlugin({ router: true }) alongside this import. That sets trackViewsManually: true at init so the SDK's built-in URL tracking does not race with the router integration.

Test instructions

yarn test:unit --spec packages/rum-vue/src/domain/router/startVueRouterView.spec.ts
yarn test:unit --spec packages/rum-vue/src/domain/router/vueRouter.spec.ts

Checklist

mormubis · 2026-03-13T14:35:50Z

packages/rum-vue/src/domain/router/vueRouter.ts

+  // afterEach fires for the initial navigation when the app is mounted via app.use(router).
+  // In tests without mounting, an explicit router.push() is needed to trigger the hook.
+  router.afterEach((to, _from, failure) => {
+    if (failure && !isNavigationFailure(failure, NavigationFailureType.duplicated)) {


Vue Router's afterEach fires even for navigations blocked by a guard, not just successful ones. The failure parameter tells you why. We skip cancelled (preempted by another navigation) and aborted (guard explicitly blocked it). duplicated (same route you're already on) we let through - that's not really a failure, the URL just didn't change because it was already there.

cit-pr-commenter-54b7da · 2026-03-16T15:36:28Z

Bundles Sizes Evolution

📦 Bundle Name	Base Size	Local Size	𝚫%	Status
Rum	175.02 KiB	175.02 KiB	0.00%	✅
Rum Profiler	6.16 KiB	6.16 KiB	0.00%	✅
Rum Recorder	27.46 KiB	27.46 KiB	0.00%	✅
Logs	56.80 KiB	56.80 KiB	0.00%	✅
Rum Slim	130.66 KiB	130.66 KiB	0.00%	✅
Worker	23.63 KiB	23.63 KiB	0.00%	✅

🚀 CPU Performance

Action Name	Base CPU Time (ms)	Local CPU Time (ms)	𝚫%
RUM - add global context	0.0038	0.0057	+50.00%
RUM - add action	0.0125	0.0211	+68.80%
RUM - add error	0.0122	0.02	+63.93%
RUM - add timing	0.0025	0.0037	+48.00%
RUM - start view	0.0116	0.0187	+61.21%
RUM - start/stop session replay recording	0.0006	0.001	+66.67%
Logs - log message	0.0144	0.0235	+63.19%

🧠 Memory Performance

Action Name	Base Memory Consumption	Local Memory Consumption	𝚫
RUM - add global context	27.11 KiB	27.48 KiB	+384 B
RUM - add action	50.97 KiB	50.79 KiB	-184 B
RUM - add timing	26.15 KiB	26.17 KiB	+27 B
RUM - add error	54.48 KiB	55.08 KiB	+617 B
RUM - start/stop session replay recording	25.42 KiB	25.83 KiB	+421 B
RUM - start view	461.59 KiB	461.87 KiB	+287 B
Logs - log message	43.70 KiB	44.42 KiB	+742 B

🔗 RealWorld

datadog-official · 2026-03-16T17:07:53Z

⚠️ Tests

✨ Fix all issues with BitsAI or with Cursor

⚠️ Warnings

🧪 3 Tests failed

addVueError includes component hierarchy in component_stack when instance is provided from Chrome 63.0.3239.84 (Windows 10) (Datadog) (Fix with Cursor)

TypeError: Object.fromEntries is not a function
    at getComponentsFromStubs (webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs:290:1 <- /tmp/_karma_webpack_415792/commons.js:140229:19)
    at createInstance (webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs:8305:1 <- /tmp/_karma_webpack_415792/commons.js:148244:24)
    at mount (webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs:8365:1 <- /tmp/_karma_webpack_415792/commons.js:148304:14)
    at UserContext.it (webpack:///packages/rum-vue/src/domain/error/addVueError.spec.ts:36:26 <- /tmp/_karma_webpack_415792/commons.js:113159:79)
    at <Jasmine>

vue plugin › should capture vue error from app.config.errorHandler from vuePlugin.scenario.ts (Datadog) (Fix with Cursor)

vuePlugin.scenario.ts:18:13 should capture vue error from app.config.errorHandler

[chromium] › vuePlugin.scenario.ts:18:13 › vue plugin › should capture vue error from app.config.errorHandler 

    Error: page.goto: net::ERR_CONNECTION_REFUSED at http://172.27.143.187:5175/?rum-config=%7B%22applicationId%22%3A%2237fe52bf-b3d5-4ac7-ad9b-44882d479ec8%22%2C%22clientToken%22%3A%22pubf2099de38f9c85797d20d64c7d632a69%22%2C%22defaultPrivacyLevel%22%3A%22allow%22%2C%22trackResources%22%3Atrue%2C%22trackLongTasks%22%3Atrue%2C%22enableExperimentalFeatures%22%3A%5B%5D%2C%22allowUntrustedEvents%22%3Atrue%2C%22sessionReplaySampleRate%22%3A100%2C%22telemetrySampleRate%22%3A100%2C%22telemetryUsageSampleRate%22%3A100%2C%22telemetryConfigurationSampleRate%22%3A100%2C%22proxy%22%3A%22http%3A%2F%2F172.27.143.187%3A9394%22%2C%22remoteConfigurationProxy%22%3A%22http%3A%2F%2F172.27.143.187%3A9389%2Fconfig%22%7D&rum-context=%7B%22run_id%22%3A%221526309862%22%2C%22test_name%22%3A%22%3CPLACEHOLDER%3E%22%7D
    Call log:
      - navigating to "http://172.27.143.187:5175/?rum-config=%7B%22applicationId%22%3A%2237fe52bf-b3d5-4ac7-ad9b-44882d479ec8%22%2C%22clientToken%22%3A%22pubf2099de38f9c85797d20d64c7d632a69%22%2C%22defaultPrivacyLevel%22%3A%22allow%22%2C%22trackResources%22%3Atrue%2C%22trackLongTasks%22%3Atrue%2C%22enableExperimentalFeatures%22%3A%5B%5D%2C%22allowUntrustedEvents%22%3Atrue%2C%22sessionReplaySampleRate%22%3A100%2C%22telemetrySampleRate%22%3A100%2C%22telemetryUsageSampleRate%22%3A100%2C%22telemetryConfigurationSampleRate%22%3A100%2C%22proxy%22%3A%22http%3A%2F%2F172.27.143.187%3A9394%22%2C%22remoteConfigurationProxy%22%3A%22http%3A%2F%2F172.27.143.187%3A9389%2Fconfig%22%7D&rum-context=%7B%22run_id%22%3A%221526309862%22%2C%22test_name%22%3A%22%3CPLACEHOLDER%3E%22%7D", waiting until "load"


       at ../lib/framework/createTest.ts:436
...

vue plugin › should define a view name with createRouter from vuePlugin.scenario.ts (Datadog) (Fix with Cursor)

vuePlugin.scenario.ts:5:13 should define a view name with createRouter

[chromium] › vuePlugin.scenario.ts:5:13 › vue plugin › should define a view name with createRouter 

    Error: page.goto: net::ERR_CONNECTION_REFUSED at http://172.27.143.187:5175/?rum-config=%7B%22applicationId%22%3A%2237fe52bf-b3d5-4ac7-ad9b-44882d479ec8%22%2C%22clientToken%22%3A%22pubf2099de38f9c85797d20d64c7d632a69%22%2C%22defaultPrivacyLevel%22%3A%22allow%22%2C%22trackResources%22%3Atrue%2C%22trackLongTasks%22%3Atrue%2C%22enableExperimentalFeatures%22%3A%5B%5D%2C%22allowUntrustedEvents%22%3Atrue%2C%22sessionReplaySampleRate%22%3A100%2C%22telemetrySampleRate%22%3A100%2C%22telemetryUsageSampleRate%22%3A100%2C%22telemetryConfigurationSampleRate%22%3A100%2C%22proxy%22%3A%22http%3A%2F%2F172.27.143.187%3A9391%22%2C%22remoteConfigurationProxy%22%3A%22http%3A%2F%2F172.27.143.187%3A9362%2Fconfig%22%7D&rum-context=%7B%22run_id%22%3A%221526309862%22%2C%22test_name%22%3A%22%3CPLACEHOLDER%3E%22%7D
    Call log:
      - navigating to "http://172.27.143.187:5175/?rum-config=%7B%22applicationId%22%3A%2237fe52bf-b3d5-4ac7-ad9b-44882d479ec8%22%2C%22clientToken%22%3A%22pubf2099de38f9c85797d20d64c7d632a69%22%2C%22defaultPrivacyLevel%22%3A%22allow%22%2C%22trackResources%22%3Atrue%2C%22trackLongTasks%22%3Atrue%2C%22enableExperimentalFeatures%22%3A%5B%5D%2C%22allowUntrustedEvents%22%3Atrue%2C%22sessionReplaySampleRate%22%3A100%2C%22telemetrySampleRate%22%3A100%2C%22telemetryUsageSampleRate%22%3A100%2C%22telemetryConfigurationSampleRate%22%3A100%2C%22proxy%22%3A%22http%3A%2F%2F172.27.143.187%3A9391%22%2C%22remoteConfigurationProxy%22%3A%22http%3A%2F%2F172.27.143.187%3A9362%2Fconfig%22%7D&rum-context=%7B%22run_id%22%3A%221526309862%22%2C%22test_name%22%3A%22%3CPLACEHOLDER%3E%22%7D", waiting until "load"


       at ../lib/framework/createTest.ts:436
...

ℹ️ Info

No other issues found (see more)

❄️ No new flaky tests detected

🎯 Code Coverage (details)
• Patch Coverage: 69.44%
• Overall Coverage: 77.27% (-0.02%)

_{This comment will be updated automatically if new data arrives.

🔗 Commit SHA: 152dccf | Docs | Datadog PR Page | Was this helpful? React with 👍/👎 or give us feedback!}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3ce5ece0d0

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

packages/rum-vue/src/domain/router/vueRouter.ts

rgaignault · 2026-03-19T16:45:57Z

packages/rum-vue/src/domain/router/startVueRouterView.ts

+  })
+}
+
+export function computeViewName(matched: RouteLocationMatched[]): string {


❓ question : don't we need a logic to resolve "catch-all" pattern like in react with this function ?

browser-sdk/packages/rum-react/src/domain/reactRouter/startReactRouterView.ts

Line 28 in 05e66f9

path = substitutePathSplats(path, routeMatch.params, routeMatch === routeMatches[routeMatches.length - 1])

amortemousque · 2026-03-19T16:32:22Z

packages/rum-vue/src/domain/router/startVueRouterView.ts

+import { onVueInit } from '../vuePlugin'
+
+export function startVueRouterView(matched: RouteLocationMatched[]) {
+  onVueInit((configuration, rumPublicApi) => {


💬 suggestion: For consistency with React, onVueInit could be renamed to onRumInit. The same likely applies to onVueStart.

amortemousque · 2026-03-19T16:39:31Z

packages/rum-vue/src/domain/router/startVueRouterView.ts

+  })
+}
+
+export function computeViewName(matched: RouteLocationMatched[]): string {


💬 suggestion: ‏I think we are missing a case for catch all routes(aka wildcard). For those, in React we keep the path with the params.

amortemousque · 2026-03-19T16:46:08Z

packages/rum-vue/src/domain/router/startVueRouterView.spec.ts

+  })
+})
+
+describe('computeViewName', () => {


🥜 nitpick: ‏‏It would be great to align how these tests are written across integrations. I found, using an array of cases, like in the React tests, works well.
I tried to apply the same approach for Angular. Wdyt?

mormubis commented Mar 13, 2026

View reviewed changes

This was referenced Mar 13, 2026

✨ add UNSTABLE_useVueComponentTracker composable #4330

Draft

✨ add vue-router-app sample and E2E tests #4333

Draft

mormubis force-pushed the adlrb/vue-router branch from 87699a2 to fd5fb81 Compare March 16, 2026 15:33

mormubis force-pushed the adlrb/vue-plugin branch from c870b10 to 9a8f915 Compare March 16, 2026 15:33

mormubis force-pushed the adlrb/vue-router branch from fd5fb81 to 9de709a Compare March 16, 2026 15:44

mormubis force-pushed the adlrb/vue-plugin branch from 9a8f915 to 9a4e80e Compare March 16, 2026 15:44

mormubis force-pushed the adlrb/vue-router branch from 9de709a to 95cd15e Compare March 16, 2026 15:51

mormubis force-pushed the adlrb/vue-plugin branch from 9a4e80e to 4e0030b Compare March 16, 2026 15:51

mormubis force-pushed the adlrb/vue-plugin branch 4 times, most recently from 3a8e944 to 8c710e0 Compare March 18, 2026 08:46

Base automatically changed from adlrb/vue-plugin to main March 18, 2026 16:03

mormubis force-pushed the adlrb/vue-router branch from 95cd15e to d87a4b9 Compare March 18, 2026 16:13

mormubis marked this pull request as ready for review March 19, 2026 15:28

mormubis requested a review from a team as a code owner March 19, 2026 15:28

chatgpt-codex-connector bot reviewed Mar 19, 2026

View reviewed changes

packages/rum-vue/src/domain/router/vueRouter.ts Outdated Show resolved Hide resolved

rgaignault approved these changes Mar 19, 2026

View reviewed changes

amortemousque reviewed Mar 19, 2026

View reviewed changes

mormubis marked this pull request as draft March 20, 2026 10:16

mormubis added 3 commits March 20, 2026 11:17

✨ add Vue Router v4 integration

4a537f5

👌 skip duplicated navigation failures in vue router view tracking

b6979e0

👌 skip query-only navigations in vue router view tracking

a461ef8

mormubis force-pushed the adlrb/vue-router branch from 7693561 to aaa50ac Compare March 20, 2026 10:18

✨ add vue-router-app sample application

90c0728

mormubis force-pushed the adlrb/vue-router branch from aaa50ac to 90c0728 Compare March 20, 2026 10:54

✨ improve component_stack with Vue component hierarchy

152dccf

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ add Vue Router v4 view tracking#4328

✨ add Vue Router v4 view tracking#4328
mormubis wants to merge 5 commits intomainfrom
adlrb/vue-router

mormubis commented Mar 13, 2026 •

edited

Loading

Uh oh!

mormubis Mar 13, 2026

Uh oh!

cit-pr-commenter-54b7da bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

datadog-official bot commented Mar 16, 2026 •

edited by datadog-prod-us1-5 bot

Loading

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

Uh oh!

rgaignault Mar 19, 2026

Uh oh!

amortemousque Mar 19, 2026

Uh oh!

amortemousque Mar 19, 2026

Uh oh!

amortemousque Mar 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

mormubis commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Changes

Test instructions

Checklist

Uh oh!

mormubis Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

cit-pr-commenter-54b7da bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundles Sizes Evolution

Uh oh!

datadog-official bot commented Mar 16, 2026 • edited by datadog-prod-us1-5 bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ Warnings

ℹ️ Info

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

rgaignault Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

amortemousque Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

amortemousque Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

amortemousque Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mormubis commented Mar 13, 2026 •

edited

Loading

cit-pr-commenter-54b7da bot commented Mar 16, 2026 •

edited

Loading

datadog-official bot commented Mar 16, 2026 •

edited by datadog-prod-us1-5 bot

Loading