chore(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.11

---

Release Notes

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

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

• 145: Removed explicit ErrorBoundary.render return type to avoid TypeScript error:

'ErrorBoundary' cannot be used as a JSX component.

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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
unleash-monorepo-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 10, 2023 8:21pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
unleash-docs	⬜️ Ignored (Inspect)	Visit Preview		Aug 10, 2023 8:21pm

[stale]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[renovate]

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 4.x releases. But if you manually upgrade to 4.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.