⚗ NextJS- add nextjs error boundary component by BeltranBulbarellaDD · Pull Request #4352 · DataDog/browser-sdk

BeltranBulbarellaDD · 2026-03-17T15:27:58Z

Motivation

Adds React error boundary to NextJS pages router.

Changes

Adds ErrorBoundary — a React error boundary component that wraps createErrorBoundary from @datadog/browser-rum-react, pre-wired to call addNextjsError.

Exports ErrorBoundaryFallback and ErrorBoundaryProps types alongside it.

Also adds @datadog/browser-rum-react as an optional peer dependency of rum-nextjs, and allows @datadog/browser-rum-react/internal through the disallow-side-effects ESLint rule.

Test instructions

Test app — new pages for both routers to exercise all error paths:

Scenario	Implementation
Pages Router client error	ErrorBoundary in `pages-router/error-test.tsx`
App Router client error	`error.tsx` segment boundary calling `addNextjsError`
App Router server error (with digest)	Server component throw → `error.tsx` calling `addNextjsError`
App Router global error	Root-level throw → `global-error.tsx` calling `addNextjsError`

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

datadog-official · 2026-03-17T15:31:11Z

✅ Tests

🎉 All green!

❄️ No new flaky tests detected
🧪 All tests passed

🎯 Code Coverage (details)
• Patch Coverage: 100.00%
• Overall Coverage: 77.30% (-0.01%)

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

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

cit-pr-commenter-54b7da · 2026-03-17T15:32:26Z

Bundles Sizes Evolution

📦 Bundle Name	Base Size	Local Size	𝚫%	Status
Rum	176.56 KiB	176.56 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.88 KiB	56.88 KiB	0.00%	✅
Rum Slim	132.19 KiB	132.19 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.0038	0.00%
RUM - add action	0.0128	0.0131	+2.34%
RUM - add error	0.0128	0.0133	+3.91%
RUM - add timing	0.0025	0.0031	+24.00%
RUM - start view	0.0119	0.0129	+8.40%
RUM - start/stop session replay recording	0.0007	0.0007	0.00%
Logs - log message	0.0141	0.0141	0.00%

🧠 Memory Performance

Action Name	Base Memory Consumption	Local Memory Consumption	𝚫
RUM - add global context	26.92 KiB	27.57 KiB	+664 B
RUM - add action	51.58 KiB	51.85 KiB	+275 B
RUM - add timing	26.27 KiB	26.07 KiB	-202 B
RUM - add error	56.09 KiB	55.79 KiB	-306 B
RUM - start/stop session replay recording	26.11 KiB	25.40 KiB	-735 B
RUM - start view	460.15 KiB	462.91 KiB	+2.75 KiB
Logs - log message	44.22 KiB	45.99 KiB	+1.78 KiB

🔗 RealWorld

packages/rum-nextjs/src/domain/error/errorBoundary.spec.tsx

BeltranBulbarellaDD · 2026-03-17T16:09:57Z

package.json

    "build:docs:json": "typedoc --logLevel Verbose --json ./docs.json",
    "build:docs:html": "typedoc --out ./docs",
-    "pack": "yarn workspaces foreach --all --parallel --include '@datadog/*' exec yarn pack",
+    "pack": "yarn workspaces foreach --all --parallel --topological --include '@datadog/*' exec yarn pack",


This is required because rum-nextjs needs rum-react

I'm not sure about this... rum depends on rum-code which depends on core and that was not an issue before.

Hm let's discuss!

Discussed here

Heeey so after a bit of investigation I think the issue comes from the integration packages having a "prepack" script. This script is called during yarn pack. It builds the package before packing it. This was useful when dogfooding the rum-react package in web-ui before publishing it (see #3182)

I think it makes sense and it should be added to all packages, not just integrations. By doing that, we won't need to run yarn build before running yarn run pack, the build will always be done during pack. As you noted, this requires to use the --topological flag when packing, similarly to the build script. I'll work on this in a separate PR. In the meantime, please add back the --topological option and remove the internal.d.ts file.

BeltranBulbarellaDD · 2026-03-17T16:21:24Z

test/e2e/playwright.base.config.ts

      stdout: 'pipe' as const,
      cwd: path.join(__dirname, '../apps/nextjs'),
-      command: isLocal ? 'yarn dev' : 'yarn start',
+      command: 'yarn start',


This is for 2 reasons:

So that StrictMode does not double-fires in dev mode.

The dev error overlay does not appear (ex)

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6d7f0239ab

ℹ️ 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-nextjs/src/entries/main.ts

BenoitZugmeyer · 2026-03-18T20:06:50Z

package.json

    "build:docs:json": "typedoc --logLevel Verbose --json ./docs.json",
    "build:docs:html": "typedoc --out ./docs",
-    "pack": "yarn workspaces foreach --all --parallel --include '@datadog/*' exec yarn pack",
+    "pack": "yarn workspaces foreach --all --parallel --topological --include '@datadog/*' exec yarn pack",


I'm not sure about this... rum depends on rum-code which depends on core and that was not an issue before.

test/e2e/scenario/nextjsPlugin.scenario.ts

packages/rum-react/internal.d.ts

packages/rum-nextjs/package.json

.claude/skills/datadog-sdk-event-inspection/SKILL.md

… boundary

mormubis · 2026-03-24T09:34:26Z

packages/rum-nextjs/src/domain/error/errorBoundary.spec.tsx

+
+import { disableJasmineUncaughtExceptionTracking, ignoreConsoleLogs } from '@datadog/browser-core/test'
+import { appendComponent } from '../../../../rum-react/test/appendComponent'
+import { initReactOldBrowsersSupport } from '../../../../rum-react/test/reactOldBrowsersSupport'


The test imports appendComponent and initReactOldBrowsersSupport via relative paths across package boundaries (../../../../rum-react/test/...). Is there a plan to extract these into a shared test utility, or is this the accepted pattern? It works, just looks fragile if packages ever move around.

Agreed. Maybe we can expose them as shared utility, that would be better.

mormubis

Looks good!

BeltranBulbarellaDD added 2 commits March 17, 2026 15:26

Add error boundary to Rum-Nextjs

fda52cb

Add e2e tests

48f6769

BeltranBulbarellaDD added 2 commits March 17, 2026 16:42

Disallow side effect from React, CI fixes

3cf211b

fix rum-react version

e0d3dee

BeltranBulbarellaDD commented Mar 17, 2026

View reviewed changes

packages/rum-nextjs/src/domain/error/errorBoundary.spec.tsx Show resolved Hide resolved

BeltranBulbarellaDD commented Mar 17, 2026

View reviewed changes

Remove import

cd405c3

BeltranBulbarellaDD changed the title ~~Beltran.bulbarella/nextjs pages router error~~ ✨ NextJS- add nextjs error boundary component Mar 17, 2026

BeltranBulbarellaDD added 5 commits March 17, 2026 18:16

Add error boundary to Rum-Nextjs

f4aedea

build

676d170

add skill

bb905f7

Fix tests

c7e7ca7

format

6d7f023

BeltranBulbarellaDD marked this pull request as ready for review March 18, 2026 20:01

BeltranBulbarellaDD requested a review from a team as a code owner March 18, 2026 20:01

chatgpt-codex-connector bot reviewed Mar 18, 2026

View reviewed changes

packages/rum-nextjs/src/entries/main.ts Show resolved Hide resolved

BenoitZugmeyer reviewed Mar 18, 2026

View reviewed changes

thomas-lebeau reviewed Mar 19, 2026

View reviewed changes

.claude/skills/datadog-sdk-event-inspection/SKILL.md Outdated Show resolved Hide resolved

BeltranBulbarellaDD added 2 commits March 19, 2026 14:15

Remove internal file, add firefox timeout, update nextjs dependencies.

818eab3

Remove unused file

58eb95b

BeltranBulbarellaDD changed the title ~~✨ NextJS- add nextjs error boundary component~~ ⚗ NextJS- add nextjs error boundary component Mar 20, 2026

BeltranBulbarellaDD added 4 commits March 20, 2026 13:43

Skip Firefox test on pages router error, add internal types for error…

3cb098b

… boundary

Prevent duplicate error name

9254f01

Merge branch 'main' into beltran.bulbarella/nextjs_pages__router_error

aaf0066

Simplify Nextjs plugin test initialization

7807ff3

BeltranBulbarellaDD marked this pull request as draft March 23, 2026 09:52

Merge branch 'main' into beltran.bulbarella/nextjs_pages__router_error

e81b850

BeltranBulbarellaDD added 2 commits March 23, 2026 13:30

Remove internal.d.ts, add topological pack

5572aa3

Test

7a91c27

BeltranBulbarellaDD marked this pull request as ready for review March 23, 2026 13:19

BeltranBulbarellaDD requested review from BenoitZugmeyer and thomas-lebeau March 23, 2026 15:32

mormubis reviewed Mar 24, 2026

View reviewed changes

mormubis approved these changes Mar 24, 2026

View reviewed changes

BeltranBulbarellaDD added 2 commits March 24, 2026 11:04

Merge branch 'main' into beltran.bulbarella/nextjs_pages__router_error

b4185ae

Fix conflict

6aa5690

rgaignault approved these changes Mar 24, 2026

View reviewed changes

BeltranBulbarellaDD merged commit 1933b18 into main Mar 24, 2026
21 checks passed

BeltranBulbarellaDD deleted the beltran.bulbarella/nextjs_pages__router_error branch March 24, 2026 11:09

github-actions bot locked and limited conversation to collaborators Mar 24, 2026

Conversation

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

Uh oh!

Motivation

Changes

Test instructions

Checklist

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Bundles Sizes Evolution

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mormubis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

BeltranBulbarellaDD commented Mar 17, 2026 •

edited

Loading

datadog-official bot commented Mar 17, 2026 •

edited

Loading

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

edited

Loading