fix: auto-reset transient React error #185 silently
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { ReactNode } from "react";
|
import { ReactNode, useEffect } from "react";
|
||||||
import { ErrorBoundary } from "react-error-boundary";
|
import { ErrorBoundary } from "react-error-boundary";
|
||||||
import StyledButton from "./styled/Button";
|
import StyledButton from "./styled/Button";
|
||||||
|
|
||||||
@@ -6,7 +6,26 @@ type FallbackProps = {
|
|||||||
error: Error;
|
error: Error;
|
||||||
resetErrorBoundary: (...args: Array<unknown>) => void;
|
resetErrorBoundary: (...args: Array<unknown>) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Transient errors that are safe to auto-recover from silently.
|
||||||
|
// #185 = Maximum update depth exceeded (loop re-render, resolves on reset).
|
||||||
|
const AUTO_RESET_PATTERNS = [/Minified React error #185/];
|
||||||
|
|
||||||
|
function isAutoResetError(error: Error): boolean {
|
||||||
|
return AUTO_RESET_PATTERNS.some((p) => p.test(error.message));
|
||||||
|
}
|
||||||
|
|
||||||
function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
|
function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
|
||||||
|
useEffect(() => {
|
||||||
|
if (isAutoResetError(error)) {
|
||||||
|
resetErrorBoundary();
|
||||||
|
}
|
||||||
|
}, [error, resetErrorBoundary]);
|
||||||
|
|
||||||
|
if (isAutoResetError(error)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div role="alert" className="text-lg text-red-600">
|
<div role="alert" className="text-lg text-red-600">
|
||||||
<p>Something went wrong:</p>
|
<p>Something went wrong:</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user