Skip to content

feat(react-router): add unstable_onError prop to RouterProvider for client side error reporting #14162

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

Jump to bottom
Merged
merged 13 commits into from
Aug 20, 2025
Merged

feat(react-router): add unstable_onError prop to RouterProvider for client side error reporting #14162

merged 13 commits into from
Aug 20, 2025

Conversation

@brophdawg11
Copy link
Contributor

@brophdawg11 brophdawg11 commented Aug 12, 2025 •
edited
Loading

Implements: #12958
RFC: #9881

API:

// Framework mode
<HydratedRouter unstable_onError={(error, errorInfo) => {
  console.log('Client error!", error, errorInfo);
}} />

// Data mode
<RouterProvider unstable_onError={(error, errorInfo) => {
  console.log('Client error!", error, errorInfo);
}} />

This is a client-side version of the entry.server handleError function to be used for client-side error reporting. This has 2 main advantages over the current approach of trying to log from ErrorBoundary:

  • It's decoupled from rendering so won't ever log duplicates on re-renders
  • It has access to the errorInfo prop from componentDidCatch for render errors

@changeset-bot
Copy link

changeset-bot bot commented Aug 12, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 3d7dcee

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages
Name Type
react-router Patch
@react-router/architect Patch
@react-router/cloudflare Patch
@react-router/dev Patch
react-router-dom Patch
@react-router/express Patch
@react-router/node Patch
@react-router/serve Patch
@react-router/fs-routes Patch
@react-router/remix-routes-option-adapter Patch
create-react-router Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@brophdawg11 brophdawg11 linked an issue Aug 12, 2025 that may be closed by this pull request
RouterProvider onError #12958
Open
brophdawg11
brophdawg11 commented Aug 12, 2025
View reviewed changes
packages/react-router/lib/components.tsx
Comment on lines 343 to 358
let logErrorsAndSetState = React.useCallback(
(newState: RouterState) => {
setStateImpl((prevState) => {
// Send loader/action errors through handleError
if (newState.errors && unstable_handleError) {
Object.entries(newState.errors).forEach(([routeId, error]) => {
if (prevState.errors?.[routeId] !== error) {
unstable_handleError(error);
}
});
}
return newState;
});
},
[unstable_handleError],
);
Copy link
Contributor Author

@brophdawg11 brophdawg11 Aug 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Log loader/action errors every time we set state which should keep this synced with "report errors that are surfaced in the UI". This switches to use the setState callback function too so it can compare to prior state.errors to avoid duplicate reporting of errors on subsequent state updates (like calling a fetcher from an error boundary).

brophdawg11
brophdawg11 commented Aug 12, 2025
View reviewed changes
packages/react-router/lib/components.tsx Outdated
componentDidCatch(error: any, errorInfo: React.ErrorInfo) {
if (this.props.unstable_handleError) {
// Log render errors
this.props.unstable_handleError(error, errorInfo);
Copy link
Contributor Author

@brophdawg11 brophdawg11 Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Log <Await> render errors

brophdawg11
brophdawg11 commented Aug 12, 2025
View reviewed changes
packages/react-router/lib/components.tsx Outdated
Object.defineProperty(resolve, "_error", { get: () => error }),
(error: any) => {
// Log promise rejections
this.props.unstable_handleError?.(error);
Copy link
Contributor Author

@brophdawg11 brophdawg11 Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Log <Await> promise rejections

brophdawg11
brophdawg11 commented Aug 12, 2025
View reviewed changes
packages/react-router/lib/hooks.tsx Outdated
);
componentDidCatch(error: any, errorInfo: React.ErrorInfo) {
if (this.props.unstable_handleError) {
this.props.unstable_handleError(error, errorInfo);
Copy link
Contributor Author

@brophdawg11 brophdawg11 Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Log render errors

@github-actions
Copy link
Contributor

github-actions bot commented Aug 12, 2025

Alpha release created: 0.0.0-experimental-2eb7164

⚠️ Note: This release was created from the HEAD of this branch so it may contain commits that have landed in dev but have not been released yet depending on when this branch was created. You can run the following command to see the commits that may not have been released yet:

git log --pretty=oneline react-router@7.8.0..ca27e99

@brophdawg11 brophdawg11 mentioned this pull request Aug 12, 2025
Open
@brophdawg11 brophdawg11 changed the title Implement RouterProvider unstable_handleError prop for client side error reporting Implement RouterProvider unstable_onError prop for client side error reporting Aug 13, 2025
@MichaelDeBoey MichaelDeBoey changed the title Implement RouterProvider unstable_onError prop for client side error reporting feat(react-router): add unstable_onError prop to RouterProvider for client side error reporting Aug 13, 2025
MichaelDeBoey
MichaelDeBoey reviewed Aug 13, 2025
View reviewed changes
@brophdawg11 @MichaelDeBoey
Update packages/react-router/lib/components.tsx
3d7dcee 
Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
@github-actions
Copy link
Contributor

github-actions bot commented Aug 15, 2025

Alpha release created: 0.0.0-experimental-3d7dcee

⚠️ Note: This release was created from the HEAD of this branch so it may contain commits that have landed in dev but have not been released yet depending on when this branch was created. You can run the following command to see the commits that may not have been released yet:

git log --pretty=oneline react-router@7.8.0..ca27e99

@brophdawg11 brophdawg11 merged commit e9a17ed into dev Aug 20, 2025
10 checks passed
@brophdawg11 brophdawg11 deleted the brophdawg11/client-handle-error branch August 20, 2025 14:25
@github-actions github-actions bot mentioned this pull request Aug 21, 2025
Merged
@github-actions
Copy link
Contributor

github-actions bot commented Aug 21, 2025

🤖 Hello there,

We just published version 7.8.2-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@github-actions github-actions bot mentioned this pull request Aug 22, 2025
Merged
@github-actions
Copy link
Contributor

github-actions bot commented Aug 22, 2025

🤖 Hello there,

We just published version 7.8.2 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@MichaelDeBoey MichaelDeBoey MichaelDeBoey left review comments

@jacob-ebey jacob-ebey jacob-ebey approved these changes

Assignees

No one assigned

Labels

CLA Signed docs pkg:react-router

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

RouterProvider onError

4 participants

@brophdawg11 @MichaelDeBoey @jacob-ebey