fix: fix #189 remove the redundant uncaught error and error stack trace from the console

src/ErrorBoundary.ts

@@ -18,6 +18,10 @@ const initialState: ErrorBoundaryState = {
   error: null,
 };
 
+function handleSuppressLogging(event: ErrorEvent) {
+  if (event.error._suppressLogging) event.preventDefault();
+}
+
 export class ErrorBoundary extends Component<
   ErrorBoundaryProps,
   ErrorBoundaryState
@@ -29,6 +33,10 @@ export class ErrorBoundary extends Component<
     this.state = initialState;
   }
 
+  static defaultProps = {
+    suppressLogging: false,
+  };
+
   static getDerivedStateFromError(error: Error) {
     return { didCatch: true, error };
   }
@@ -46,8 +54,14 @@ export class ErrorBoundary extends Component<
     }
   }
 
+  componentWillUnmount() {
+    window.removeEventListener("error", handleSuppressLogging);
+  }
+
   componentDidCatch(error: Error, info: ErrorInfo) {
     this.props.onError?.(error, info);
+    window.addEventListener("error", () => {}); // Some test cases will fail without this line, somehow.
+    window.removeEventListener("error", handleSuppressLogging);
   }
 
   componentDidUpdate(
@@ -114,6 +128,8 @@ export class ErrorBoundary extends Component<
           didCatch,
           error,
           resetErrorBoundary: this.resetErrorBoundary,
+          suppressLogging: this.props.suppressLogging as boolean,
+          handleSuppressLogging,
         },
       },
       childToRender

src/ErrorBoundaryContext.ts

@@ -4,6 +4,8 @@ export type ErrorBoundaryContextType = {
   didCatch: boolean;
   error: any;
   resetErrorBoundary: (...args: any[]) => void;
+  suppressLogging: boolean;
+  handleSuppressLogging: (event: ErrorEvent) => void;
 };
 
 export const ErrorBoundaryContext =

src/assertErrorBoundaryContext.ts

@@ -6,7 +6,9 @@ export function assertErrorBoundaryContext(
   if (
     value == null ||
     typeof value.didCatch !== "boolean" ||
-    typeof value.resetErrorBoundary !== "function"
+    typeof value.resetErrorBoundary !== "function" ||
+    typeof value.suppressLogging !== "boolean" ||
+    typeof value.handleSuppressLogging !== "function"
   ) {
     throw new Error("ErrorBoundaryContext not found");
   }

src/types.ts

@@ -23,6 +23,7 @@ type ErrorBoundarySharedProps = PropsWithChildren<{
       | { reason: "keys"; prev: any[] | undefined; next: any[] | undefined }
   ) => void;
   resetKeys?: any[];
+  suppressLogging?: boolean;
 }>;
 
 export type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {

src/useErrorBoundary.ts

@@ -2,8 +2,12 @@ import { useContext, useMemo, useState } from "react";
 import { assertErrorBoundaryContext } from "./assertErrorBoundaryContext";
 import { ErrorBoundaryContext } from "./ErrorBoundaryContext";
 
+type StateError<TError> =
+  | (TError & { _suppressLogging: boolean })
+  | (Error & { _suppressLogging: boolean });
+
 type UseErrorBoundaryState<TError> =
-  | { error: TError; hasError: true }
+  | { error: StateError<TError>; hasError: true }
   | { error: null; hasError: false };
 
 export type UseErrorBoundaryApi<TError> = {
@@ -16,6 +20,35 @@ export function useErrorBoundary<TError = any>(): UseErrorBoundaryApi<TError> {
 
   assertErrorBoundaryContext(context);
 
+  const suppressLoggingForError = function <TError>(
+    error: TError
+  ): StateError<TError> {
+    const suppressLogging = {
+      _suppressLogging: context.suppressLogging as boolean,
+    };
+    if (error != null) {
+      switch (typeof error) {
+        case "object": {
+          if (Object.isExtensible(error)) {
+            (error as StateError<TError>)._suppressLogging =
+              context.suppressLogging;
+            return error as StateError<TError>;
+          } else {
+            return Object.assign(
+              Object.create(error as object),
+              suppressLogging
+            );
+          }
+        }
+        default: {
+          return Object.assign(Error(error as string), suppressLogging);
+        }
+      }
+    } else {
+      return Object.assign(Error(undefined), suppressLogging);
+    }
+  };
+
   const [state, setState] = useState<UseErrorBoundaryState<TError>>({
     error: null,
     hasError: false,
@@ -27,11 +60,15 @@ export function useErrorBoundary<TError = any>(): UseErrorBoundaryApi<TError> {
         context.resetErrorBoundary();
         setState({ error: null, hasError: false });
       },
-      showBoundary: (error: TError) =>
+      showBoundary: (error: TError) => {
+        if (context.suppressLogging) {
+          window.addEventListener("error", context.handleSuppressLogging);
+        }
         setState({
-          error,
+          error: suppressLoggingForError(error),
           hasError: true,
-        }),
+        });
+      },
     }),
     [context.resetErrorBoundary]
   );