Beltran.bulbarella/nextjs app router integration by BeltranBulbarellaDD · Pull Request #4143 · DataDog/browser-sdk

BeltranBulbarellaDD · 2026-02-03T13:12:13Z

The idea is to implement the NextJS App Router integration. It is added as a optional parameter in the React Integration.
plugins: [reactPlugin({ nextjs: true })],

This PR has 3 parts:

Plugin Implementation.
E2E setup and tests.
E2E test app.

Plugin Implementation.

For Plugin Implementation we've expanded the React Integration Plugin to support NextJS App Router routing. This way we can use existing React Integration Components like: UNSTABLE_ReactComponentTracker and addReactError.

DatadogRumProvider: This is the main entrypoint for the plugin. It uses a useEffect, so we need to make sure we are in the client side, to start a new view. We wrap <>children</>.
Because NextJS components that use use client still render partially on the server, we will need to provide documentation for an intermediary component were we init and re export it in the client side.

historyTracking: Intercepts browser History API methods (pushState, replaceState) and the popstate event to detect navigation changes.

viewTracking: Util functions to normalize a view name (e.g., /product/123 -> /product/:id) and startNextjsView

E2E setup and tests.

datadog-datadog-prod-us1 · 2026-02-03T13:15:24Z

⚠️ Tests

✨ Fix all issues with Cursor

⚠️ Warnings

🧪 63 Tests failed

DatadogRumProvider renders children correctly from Chrome 63.0.3239.84 (Windows 10) (Datadog) (Fix with Cursor)

Error: Should not already be working.
    at performWorkOnRoot (webpack:///node_modules/react-dom/cjs/react-dom-client.development.js:16424:15 <- /tmp/_karma_webpack_510349/commons.js:26436:87)
    at performWorkOnRootViaSchedulerTask (webpack:///node_modules/react-dom/cjs/react-dom-client.development.js:18957:7 <- /tmp/_karma_webpack_510349/commons.js:27587:9)
    at flushActQueue (webpack:///node_modules/react/cjs/react.development.js:590:34 <- /tmp/_karma_webpack_510349/commons.js:35466:44)
    at exports.act (webpack:///node_modules/react/cjs/react.development.js:884:10 <- /tmp/_karma_webpack_510349/commons.js:35652:37)
    at appendComponent (webpack:///packages/rum-react/test/appendComponent.ts:13:6 <- /tmp/_karma_webpack_510349/commons.js:89549:47)
    at UserContext.it (webpack:///packages/rum-react/src/domain/nextjs/datadogRumProvider.spec.tsx:33:38 <- /tmp/_karma_webpack_510349/commons.js:87996:97)
    at <Jasmine>

DatadogRumProvider renders multiple children from Chrome 63.0.3239.84 (Windows 10) (Datadog) (Fix with Cursor)

SyntaxError: Failed to execute 'measure' on 'Performance': The mark '[object Object]' does not exist.
error properties: Object({ INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2, HIERARCHY_REQUEST_ERR: 3, WRONG_DOCUMENT_ERR: 4, INVALID_CHARACTER_ERR: 5, NO_DATA_ALLOWED_ERR: 6, NO_MODIFICATION_ALLOWED_ERR: 7, NOT_FOUND_ERR: 8, NOT_SUPPORTED_ERR: 9, INUSE_ATTRIBUTE_ERR: 10, INVALID_STATE_ERR: 11, SYNTAX_ERR: 12, INVALID_MODIFICATION_ERR: 13, NAMESPACE_ERR: 14, INVALID_ACCESS_ERR: 15, VALIDATION_ERR: 16, TYPE_MISMATCH_ERR: 17, SECURITY_ERR: 18, NETWORK_ERR: 19, ABORT_ERR: 20, URL_MISMATCH_ERR: 21, QUOTA_EXCEEDED_ERR: 22, TIMEOUT_ERR: 23, INVALID_NODE_TYPE_ERR: 24, DATA_CLONE_ERR: 25, code: 12 })
Error: Failed to execute 'measure' on 'Performance': The mark '[object Object]' does not exist.
    at prepareFreshStack (webpack:///node_modules/react-dom/cjs/react-dom-client.development.js:17114:29 <- /tmp/_karma_webpack_510349/commons.js:26693:137)
    at renderRootSync (webpack:///node_modules/react-dom/cjs/react-dom-client.development.js:17409:9 <- /tmp/_karma_webpack_510349/commons.js:26795:13)
    at performWorkOnRoot (webpack:///node_modules/react-dom/cjs/react-dom-client.development.js:16504:11 <- /tmp/_karma_webpack_510349/commons.js:26453:186)
    at performWorkOnRootViaSchedulerTask (webpack:///node_modules/react-dom/cjs/react-dom-client.development.js:18957:7 <- /tmp/_karma_webpack_510349/commons.js:27587:9)
    at flushActQueue (webpack:///node_modules/react/cjs/react.development.js:590:34 <- /tmp/_karma_webpack_510349/commons.js:35466:44)
    at exports.act (webpack:///node_modules/react/cjs/react.development.js:884:10 <- /tmp/_karma_webpack_510349/commons.js:35652:37)
    at appendComponent (webpack:///packages/rum-react/test/appendComponent.ts:13:6 <- /tmp/_karma_webpack_510349/commons.js:89549:47)
...

DatadogRumProvider starts a new view on navigation from Chrome 63.0.3239.84 (Windows 10) (Datadog) (Fix with Cursor)

Error: Should not already be working.
    at performWorkOnRoot (webpack:///node_modules/react-dom/cjs/react-dom-client.development.js:16424:15 <- /tmp/_karma_webpack_510349/commons.js:26436:87)
    at performWorkOnRootViaSchedulerTask (webpack:///node_modules/react-dom/cjs/react-dom-client.development.js:18957:7 <- /tmp/_karma_webpack_510349/commons.js:27587:9)
    at flushActQueue (webpack:///node_modules/react/cjs/react.development.js:590:34 <- /tmp/_karma_webpack_510349/commons.js:35466:44)
    at exports.act (webpack:///node_modules/react/cjs/react.development.js:884:10 <- /tmp/_karma_webpack_510349/commons.js:35652:37)
    at appendComponent (webpack:///packages/rum-react/test/appendComponent.ts:13:6 <- /tmp/_karma_webpack_510349/commons.js:89549:47)
    at UserContext.it (webpack:///packages/rum-react/src/domain/nextjs/datadogRumProvider.spec.tsx:56:20 <- /tmp/_karma_webpack_510349/commons.js:88009:79)
    at <Jasmine>

View all

ℹ️ Info

❄️ No new flaky tests detected

🎯 Code Coverage (details)
• Patch Coverage: 90.48%
• Overall Coverage: 77.33% (+0.04%)

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

🔗 Commit SHA: 9554349 | Docs | Datadog PR Page | Was this helpful? Give us feedback!}

cit-pr-commenter-54b7da · 2026-02-03T13:16:37Z

Bundles Sizes Evolution

📦 Bundle Name	Base Size	Local Size	𝚫%	Status
Rum	169.44 KiB	169.44 KiB	0.00%	✅
Rum Profiler	4.29 KiB	4.29 KiB	0.00%	✅
Rum Recorder	24.61 KiB	24.61 KiB	0.00%	✅
Logs	56.72 KiB	56.72 KiB	0.00%	✅
Flagging	944 B	944 B	0.00%	✅
Rum Slim	126.29 KiB	126.29 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.0052	0.0041	-21.15%
RUM - add action	0.0186	0.0136	-26.88%
RUM - add error	0.0184	0.0137	-25.54%
RUM - add timing	0.0033	0.0025	-24.24%
RUM - start view	0.0152	0.0124	-18.42%
RUM - start/stop session replay recording	0.001	0.0007	-30.00%
Logs - log message	0.0181	0.0175	-3.31%

🧠 Memory Performance

Action Name	Base Memory Consumption	Local Memory Consumption	𝚫
RUM - add global context	27.92 KiB	27.30 KiB	-633 B
RUM - add action	50.56 KiB	51.35 KiB	+809 B
RUM - add timing	26.35 KiB	26.83 KiB	+493 B
RUM - add error	56.85 KiB	54.85 KiB	-2.00 KiB
RUM - start/stop session replay recording	25.61 KiB	26.16 KiB	+565 B
RUM - start view	453.91 KiB	452.99 KiB	-945 B
Logs - log message	44.93 KiB	45.95 KiB	+1.02 KiB

🔗 RealWorld

# Conflicts: # eslint.config.mjs # packages/rum-react/package.json # test/e2e/lib/framework/createTest.ts # test/e2e/lib/framework/pageSetups.ts # yarn.lock

BeltranBulbarellaDD added 2 commits February 3, 2026 10:21

Added Next.js App Router integration

f3b402e

Add plan and next steps for Next.js App Router integration

c49fccf

BeltranBulbarellaDD added 9 commits February 5, 2026 12:21

Add next to npmignore to fix duplicate package error

4d3dcaa

Add test app for nextjs app router integration

ba77231

Add e2e tests for Next.js App Router integration

73ad35f

Remove unnecesary files.

5fc1a43

Add Next.js to 3rdparty license.

876d2ab

Merge branch 'main' into beltran.bulbarella/nextjs_appRouter_integration

e59db59

Fix yarn.lock.

77989b7

Implement history tracking for loading time correct calculation

1290421

Merge branch 'main' into beltran.bulbarella/nextjs_appRouter_integration

9554349

# Conflicts: # eslint.config.mjs # packages/rum-react/package.json # test/e2e/lib/framework/createTest.ts # test/e2e/lib/framework/pageSetups.ts # yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Beltran.bulbarella/nextjs app router integration#4143

Beltran.bulbarella/nextjs app router integration#4143
BeltranBulbarellaDD wants to merge 11 commits intomainfrom
beltran.bulbarella/nextjs_appRouter_integration

BeltranBulbarellaDD commented Feb 3, 2026 •

edited

Loading

Uh oh!

datadog-datadog-prod-us1 bot commented Feb 3, 2026 •

edited

Loading

Uh oh!

cit-pr-commenter-54b7da bot commented Feb 3, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

BeltranBulbarellaDD commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Plugin Implementation.

E2E setup and tests.

Uh oh!

datadog-datadog-prod-us1 bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ Warnings

ℹ️ Info

Uh oh!

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

Uh oh!

Bundles Sizes Evolution

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

BeltranBulbarellaDD commented Feb 3, 2026 •

edited

Loading

datadog-datadog-prod-us1 bot commented Feb 3, 2026 •

edited

Loading

cit-pr-commenter-54b7da bot commented Feb 3, 2026 •

edited

Loading