fix(deps): update dependency react-error-boundary to v4

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
react-error-boundary	3.1.4 -> 4.0.12

---

Release Notes

bvaughn/react-error-boundary (react-error-boundary)

v4.0.12

Compare Source

• Support null fallback prop (#​169)

v4.0.11

Compare Source

• Re-throw original error in the event that no fallback is specified (#​160)
• Improved exported prop types def (#​152)
• Bundle built with Preconstruct (#​144, #​149, 9b7b15b)

v4.0.10

Compare Source

• Target Safari 12+ compatibility (by removing optional chaining operator and default parameters)

v4.0.9

Compare Source

v4.0.8

Compare Source

• 144: Build release bundle with Preconstruct

v4.0.7

Compare Source

*Replaced post-processing "use client" insertion step with a custom Parcel plug-in. This should hopefully produce better source maps.

v4.0.6

Compare Source

• Removed arrow function syntax to support older versions of Safari

v4.0.5

Compare Source

Move "use client" directive to top of the bundled file.

v4.0.4

Compare Source

README changes only

v4.0.3

Compare Source

• withErrorBoundary forwards refs
• Add "use client" directive

v4.0.2

Compare Source

Fix broken TypeScript definitions file (#​133, https://github.com/parcel-bundler/parcel/issues/8908)

v4.0.1

Compare Source

• 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:

1. 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>
  );
}

---

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 has been generated by Mend Renovate. View repository job log here.