Update dependency react-error-boundary to v6 #47

Render ErrorBoundaryContext around fallback UI as well, so the useErrorBoundary hook could be used within the fallback component to reset the boundary.

For example:

import { useErrorBoundary } from "react-error-boundary";

function ErrorFallback({ error }) {
  const { resetBoundary } = useErrorBoundary();

  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
      <button onClick={resetBoundary}>Try again</button>
    </div>
  );
}

See this demo: https://codesandbox.io/s/nostalgic-browser-e9lpmf

`v4.0.0`

Compare Source

Replace useErrorHandler hook with useErrorBoundary; can be used to trigger an error boundary or dismiss one
Merge onReset and onResetKeys props; pass "details" object explaining the cause of the reset

Why did the `useErrorHandler` hook change?

The old hook had two design flaws, both related to the givenError parameter:

All the hook did was throw this value. This seemed unnecessary, because if a component already has a reference to an error during render, it can just throw the value itself.

It would not properly re-throw null or undefined values. (Although an edge case, JavaScript enables throwing any values/types.)

If you were using the givenError functionality– you can now just throw the value directly instead.

// Before
function Greeting() {
  const [name, setName] = React.useState('')
  const {greeting, error} = useGreeting(name)
  useErrorHandler(error)

// After
function Greeting() {
  const [name, setName] = React.useState('')
  const {greeting, error} = useGreeting(name)
  if (error) {
    throw error;
  }

How can I use the new `useErrorHandler` hook?

Show the nearest error boundary from an event handler

React only handles errors thrown during render or during component lifecycle methods (e.g. effects and did-mount/did-update). Errors thrown in event handlers, or after async code has run, will not be caught.

This hook can be used to pass those errors to the nearest error boundary:

import { useErrorBoundary } from "react-error-boundary";

function Example() {
  const { showBoundary } = useErrorBoundary();

  useEffect(() => {
    fetchGreeting(name).then(
      response => {
        // Set data in state and re-render
      },
      error => {
        // Show error boundary
        showBoundary(error);
      }
    );
  });

  // Render ...
}

Dismiss the nearest error boundary

A fallback component can use this hook to request the nearest error boundary retry the render that original failed.

import { useErrorBoundary } from "react-error-boundary";

function ErrorFallback({ error }) {
  const { resetBoundary } = useErrorBoundary();

  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
      <button onClick={resetBoundary}>Try again</button>
    </div>
  );
}

`v3.1.4`

Compare Source

Bug Fixes

remove class instance property (#98) (a0a370c)

`v3.1.3`

Compare Source

Bug Fixes

useErrorHandler: use unknown instead of Error (#89) (ec81d61), closes #83

`v3.1.2`

Compare Source

Bug Fixes

TS: help typescript to find his way for the ErrorBoundaryProps union (#90) (fb0b859)

`v3.1.1`

Compare Source

Bug Fixes

ignored update after error triggered on component mount (#85) (125d9e9), closes #74 #84

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

renovate · 2025-05-04T11:53:12Z

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

any of the package files in this branch needs updating, or
the branch becomes conflicted, or
you click the rebase/retry checkbox if found above, or
you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/alert@0.1.5
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   react@"^17.0.1" from the root project
npm WARN   13 more (@testing-library/react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from @reach/alert@0.1.5
npm WARN node_modules/@reach/alert
npm WARN   @reach/alert@"^0.1.2" from toasted-notes@3.2.0
npm WARN   node_modules/toasted-notes
npm WARN 
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0" from @reach/alert@0.1.5
npm WARN   node_modules/@reach/alert
npm WARN     @reach/alert@"^0.1.2" from toasted-notes@3.2.0
npm WARN     node_modules/toasted-notes
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/alert@0.1.5
npm WARN Found: react-dom@17.0.1
npm WARN node_modules/react-dom
npm WARN   react-dom@"^17.0.1" from the root project
npm WARN   5 more (@testing-library/react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.8.0" from @reach/alert@0.1.5
npm WARN node_modules/@reach/alert
npm WARN   @reach/alert@"^0.1.2" from toasted-notes@3.2.0
npm WARN   node_modules/toasted-notes
npm WARN 
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^16.8.0" from @reach/alert@0.1.5
npm WARN   node_modules/@reach/alert
npm WARN     @reach/alert@"^0.1.2" from toasted-notes@3.2.0
npm WARN     node_modules/toasted-notes
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/component-component@0.1.3
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   react@"^17.0.1" from the root project
npm WARN   13 more (@testing-library/react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.4.0" from @reach/component-component@0.1.3
npm WARN node_modules/@reach/component-component
npm WARN   @reach/component-component@"^0.1.3" from @reach/alert@0.1.5
npm WARN   node_modules/@reach/alert
npm WARN 
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"^16.4.0" from @reach/component-component@0.1.3
npm WARN   node_modules/@reach/component-component
npm WARN     @reach/component-component@"^0.1.3" from @reach/alert@0.1.5
npm WARN     node_modules/@reach/alert
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/component-component@0.1.3
npm WARN Found: react-dom@17.0.1
npm WARN node_modules/react-dom
npm WARN   react-dom@"^17.0.1" from the root project
npm WARN   5 more (@testing-library/react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.4.0" from @reach/component-component@0.1.3
npm WARN node_modules/@reach/component-component
npm WARN   @reach/component-component@"^0.1.3" from @reach/alert@0.1.5
npm WARN   node_modules/@reach/alert
npm WARN 
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^16.4.0" from @reach/component-component@0.1.3
npm WARN   node_modules/@reach/component-component
npm WARN     @reach/component-component@"^0.1.3" from @reach/alert@0.1.5
npm WARN     node_modules/@reach/alert
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/visually-hidden@0.1.4
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   react@"^17.0.1" from the root project
npm WARN   13 more (@testing-library/react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0" from @reach/visually-hidden@0.1.4
npm WARN node_modules/@reach/visually-hidden
npm WARN   @reach/visually-hidden@"^0.1.4" from @reach/alert@0.1.5
npm WARN   node_modules/@reach/alert
npm WARN 
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0" from @reach/visually-hidden@0.1.4
npm WARN   node_modules/@reach/visually-hidden
npm WARN     @reach/visually-hidden@"^0.1.4" from @reach/alert@0.1.5
npm WARN     node_modules/@reach/alert
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/visually-hidden@0.1.4
npm WARN Found: react-dom@17.0.1
npm WARN node_modules/react-dom
npm WARN   react-dom@"^17.0.1" from the root project
npm WARN   5 more (@testing-library/react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.8.0" from @reach/visually-hidden@0.1.4
npm WARN node_modules/@reach/visually-hidden
npm WARN   @reach/visually-hidden@"^0.1.4" from @reach/alert@0.1.5
npm WARN   node_modules/@reach/alert
npm WARN 
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^16.8.0" from @reach/visually-hidden@0.1.4
npm WARN   node_modules/@reach/visually-hidden
npm WARN     @reach/visually-hidden@"^0.1.4" from @reach/alert@0.1.5
npm WARN     node_modules/@reach/alert
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: airbnb-prop-types@2.16.0
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN   react@"^17.0.1" from the root project
npm WARN   13 more (@testing-library/react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14 || ^15.0.0 || ^16.0.0-alpha" from airbnb-prop-types@2.16.0
npm WARN node_modules/airbnb-prop-types
npm WARN   airbnb-prop-types@"^2.16.0" from enzyme-adapter-utils@1.14.0
npm WARN   node_modules/enzyme-adapter-utils
npm WARN 
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"^0.14 || ^15.0.0 || ^16.0.0-alpha" from airbnb-prop-types@2.16.0
npm WARN   node_modules/airbnb-prop-types
npm WARN     airbnb-prop-types@"^2.16.0" from enzyme-adapter-utils@1.14.0
npm WARN     node_modules/enzyme-adapter-utils
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: connected-react-router@6.0.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@"*" from @testing-library/react@11.2.2
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^11.1.0" from the root project
npm ERR!   12 more (@wojtekmaj/enzyme-adapter-react-17, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.4.0" from connected-react-router@6.0.0
npm ERR! node_modules/connected-react-router
npm ERR!   connected-react-router@"^6.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.4.0" from connected-react-router@6.0.0
npm ERR!   node_modules/connected-react-router
npm ERR!     connected-react-router@"^6.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /runner/cache/others/npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /runner/cache/others/npm/_logs/2025-10-23T20_13_58_753Z-debug-0.log

Update dependency react-error-boundary to v6

4d012ac

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update dependency react-error-boundary to v6 #47

Update dependency react-error-boundary to v6 #47

Uh oh!

renovate bot commented May 4, 2025 •

edited

Loading

Uh oh!

renovate bot commented May 4, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

0 participants

Update dependency react-error-boundary to v6 #47

Are you sure you want to change the base?

Update dependency react-error-boundary to v6 #47

Uh oh!

Conversation

renovate bot commented May 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

Update withErrorBoundary types to be compatible with the latest forwardRef types

Why did the useErrorHandler hook change?

How can I use the new useErrorHandler hook?

Show the nearest error boundary from an event handler

Dismiss the nearest error boundary

Bug Fixes

Bug Fixes

Bug Fixes

Bug Fixes

Configuration

Uh oh!

renovate bot commented May 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ Artifact update problem

File name: package-lock.json

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

0 participants

renovate bot commented May 4, 2025 •

edited

Loading

Update `withErrorBoundary` types to be compatible with the latest `forwardRef` types

Why did the `useErrorHandler` hook change?

How can I use the new `useErrorHandler` hook?

renovate bot commented May 4, 2025 •

edited

Loading