[RUM-15578] ✨ Add TanStack Router integration to browser-rum-react by rgaignault · Pull Request #4414 · DataDog/browser-sdk

rgaignault · 2026-03-27T12:41:42Z

Motivation

TanStack Router is increasingly popular as a React Router replacement. Users have been requesting built-in support (see #3174), and a TanStack Router maintainer has already shared a manual implementation. This PR adds first-class TanStack Router support as a sub-entry of @datadog/browser-rum-react.

Changes

New sub-entry: @datadog/browser-rum-react/tanstack-router

createRouter wrapper that subscribes to onLoad events and starts a new RUM view on each path change
View names derived from match.fullPath (e.g., /posts/$postId)
Query-param-only changes skipped via event.pathChanged
Splat routes (/files/$) substituted with actual matched path
Index sub-routes handled (trailing slash removed from view name)

Test app and E2E:

TanStack Router test app with static, parameterized, query param, and index sub-routes
E2E tests for view name tracking, query param skip, and index route naming

Compatibility:

Unit tests mocked to avoid createRouter dependency in Chrome 63 (BrowserStack)
Karma config updated for compatibility

Usage:

import { datadogRum } from '@datadog/browser-rum'
import { reactPlugin } from '@datadog/browser-rum-react'
import { createRouter } from '@datadog/browser-rum-react/tanstack-router'

datadogRum.init({
  plugins: [reactPlugin({ router: true })],
})

const router = createRouter({ routeTree })

Test instructions

yarn test:unit --spec packages/rum-react/src/domain/tanstackRouter
yarn test:e2e -g "tanstack"

Checklist

Tested locally
Tested on staging
Added unit tests for this change.
Added e2e/integration tests for this change.
Updated documentation and/or relevant AGENTS.md file

cit-pr-commenter-54b7da · 2026-03-27T12:43:08Z

Bundles Sizes Evolution

📦 Bundle Name	Base Size	Local Size	𝚫%	Status
Rum	177.94 KiB	177.94 KiB	0.00%	✅
Rum Profiler	6.16 KiB	6.16 KiB	0.00%	✅
Rum Recorder	27.03 KiB	27.03 KiB	0.00%	✅
Logs	56.40 KiB	56.40 KiB	0.00%	✅
Rum Slim	133.81 KiB	133.81 KiB	0.00%	✅
Worker	23.63 KiB	23.63 KiB	0.00%	✅

🚀 CPU Performance

Pending...

🧠 Memory Performance

Pending...

🔗 RealWorld

datadog-prod-us1-3 · 2026-03-27T12:47:16Z

✅ Tests

🎉 All green!

❄️ No new flaky tests detected
🧪 All tests passed

🎯 Code Coverage (details)
• Patch Coverage: 73.91%
• Overall Coverage: 77.61% (+0.00%)

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

🔗 Commit SHA: 41a093d | 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: 104ca14a4d

ℹ️ 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".

Co-Authored-By: Roman Gaignault <roman.gaignault@datadoghq.com> Co-Authored-By: Aymeric Mortemousque <aymeric.mortemousque@datadoghq.com>

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 676db075e5

ℹ️ 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".

chatgpt-codex-connector · 2026-04-08T13:42:40Z

+    router.subscribe('onLoad', (event) => {
+      if (!event.pathChanged) {
+        return
+      }
+      startTanStackRouterView(router.state.matches)


Start views before loader work begins

Using router.subscribe('onLoad', ...) delays startTanStackRouterView until after TanStack Router has finished route loading, so fetches/errors triggered by route loader functions during navigation are attached to the previous view instead of the destination view. In apps that rely on loaders for data fetching, this produces incorrect per-view RUM attribution and can skew view-level metrics.

Useful? React with 👍 / 👎.

Discussed with Aymeric, I think this is acceptable. Tanstack Mantainer used onResolved.

BeltranBulbarellaDD

LGTM, I'll work on adding the basePlugin tests so we have better e2e coverage

Design for a fully automated Claude Code skill pipeline that generates draft Browser SDK router integration PRs from framework public docs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Updated spec: skills use separate subdirectories (SKILL.md per dir) - Plan covers 7 tasks: orchestrator + 5 stage skills + validation - Each task has step-by-step instructions with exact file paths Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

rgaignault requested a review from a team as a code owner March 27, 2026 12:41

rgaignault marked this pull request as draft March 27, 2026 12:41

chatgpt-codex-connector Bot reviewed Mar 27, 2026

View reviewed changes

Comment thread packages/rum-react/package.json Outdated

amortemousque force-pushed the romanG/tanstack-router-integration branch from fb14d64 to cdf4d05 Compare April 7, 2026 14:57

amortemousque changed the title ~~⚗️ Add TanStack Router integration to browser-rum-react~~ ✨ Add TanStack Router integration to browser-rum-react Apr 7, 2026

✨ Add TanStack Router integration to browser-rum-react

8747a88

Co-Authored-By: Roman Gaignault <roman.gaignault@datadoghq.com> Co-Authored-By: Aymeric Mortemousque <aymeric.mortemousque@datadoghq.com>

amortemousque force-pushed the romanG/tanstack-router-integration branch 3 times, most recently from 2fecbd2 to 03ae2c8 Compare April 8, 2026 08:21

Fix browserstack test compat

676db07

amortemousque force-pushed the romanG/tanstack-router-integration branch from 03ae2c8 to 676db07 Compare April 8, 2026 12:10

gogusarov reviewed Apr 8, 2026

View reviewed changes

Comment thread packages/rum-react/package.json Outdated

Comment thread test/e2e/scenario/tanstackRouterPlugin.scenario.ts

amortemousque marked this pull request as ready for review April 8, 2026 13:34

chatgpt-codex-connector Bot reviewed Apr 8, 2026

View reviewed changes

BeltranBulbarellaDD approved these changes Apr 9, 2026

View reviewed changes

Add test + fix index sub route

af9294d

amortemousque force-pushed the romanG/tanstack-router-integration branch from 03a3589 to bc6cbbe Compare April 9, 2026 16:13

Fix target version

d64ef3a

amortemousque force-pushed the romanG/tanstack-router-integration branch from bc6cbbe to d64ef3a Compare April 10, 2026 07:40

fix unit tests

153900a

amortemousque force-pushed the romanG/tanstack-router-integration branch from 37645e6 to 153900a Compare April 10, 2026 10:23

amortemousque and others added 4 commits April 10, 2026 15:12

📝 Add router integration pipeline design spec

84cd845

Design for a fully automated Claude Code skill pipeline that generates draft Browser SDK router integration PRs from framework public docs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge branch 'main' into romanG/tanstack-router-integration

673681b

fix format

41a093d

amortemousque changed the title ~~✨ Add TanStack Router integration to browser-rum-react~~ [15578] ✨ Add TanStack Router integration to browser-rum-react Apr 11, 2026

amortemousque changed the title ~~[15578] ✨ Add TanStack Router integration to browser-rum-react~~ [RUM-15578] ✨ Add TanStack Router integration to browser-rum-react Apr 11, 2026

amortemousque approved these changes Apr 13, 2026

View reviewed changes

amortemousque merged commit b10a889 into main Apr 13, 2026
22 checks passed

amortemousque deleted the romanG/tanstack-router-integration branch April 13, 2026 07:42

github-actions Bot locked and limited conversation to collaborators Apr 13, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RUM-15578] ✨ Add TanStack Router integration to browser-rum-react#4414

[RUM-15578] ✨ Add TanStack Router integration to browser-rum-react#4414
amortemousque merged 9 commits intomainfrom
romanG/tanstack-router-integration

rgaignault commented Mar 27, 2026 •

edited by amortemousque

Loading

Uh oh!

cit-pr-commenter-54b7da Bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

datadog-prod-us1-3 Bot commented Mar 27, 2026 •

edited by datadog-prod-us1-4 Bot

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Apr 8, 2026

Uh oh!

BeltranBulbarellaDD Apr 9, 2026

Uh oh!

BeltranBulbarellaDD left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

rgaignault commented Mar 27, 2026 • edited by amortemousque Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Changes

Test instructions

Checklist

Uh oh!

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

Uh oh!

Bundles Sizes Evolution

Uh oh!

datadog-prod-us1-3 Bot commented Mar 27, 2026 • edited by datadog-prod-us1-4 Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

BeltranBulbarellaDD Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

BeltranBulbarellaDD left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rgaignault commented Mar 27, 2026 •

edited by amortemousque

Loading

cit-pr-commenter-54b7da Bot commented Mar 27, 2026 •

edited

Loading

datadog-prod-us1-3 Bot commented Mar 27, 2026 •

edited by datadog-prod-us1-4 Bot

Loading