Update dependency react-error-boundary to v4 - autoclosed

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
react-error-boundary	^3.0.0 -> ^4.0.0

---

Release Notes

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

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 - "before 3am on Monday" (UTC), 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
mdx	❌ Failed (Inspect)			Mar 27, 2023 at 1:04AM (UTC)

[codecov-commenter]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (d8a62d2) 100.00% compared to head (53b9b0b) 100.00%.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #2278   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines         2177      2177           
=========================================
  Hits          2177      2177           

Impacted Files	Coverage Δ
packages/mdx/lib/run.js	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.