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

[benhuangbmj]

What: Fixing #189

Why: By removing the redundant message in the console, it will improve developer experience and reduce the chance of causing confusion.

How: I add a isShowBoundary property to the error prop in the state encapsulated in useErrorBoundary.ts. Then in ErrorBoundary.ts, I add an event listener to the window object listening to the "error" event. If the isShowBoundary flag is true, then the default event will be prevented, and the console.error method will be overridden, either. In the componentDidCatch method, the original console.error method will be recovered.

Checklist:

• [x] Documentation
• [x] Tests
• [x] Ready to be merged

Since I needed to put an additional property to an object (the error prop in the state), I did need to modify the type of the original object. I tried my best to imitate the style of the code. Please feel free to comment on the style. Thanks.

[benhuangbmj]

@bvaughn Thank you for the very thoughtful comments. I will need to take some time to digest them,

[benhuangbmj]

I add a new prop option suppressLogging to ErrorBoundary, so that the suppress-logging behavior becomes optional. In order for this to work, I add some condition-trigger logic to shouldComponentUpdate and componentDidCatch. It seems like the same error would be logged twice. If error._suppressLogging is true, the first logging would be intercepted anyway, and the second logging relies on the suppressLogging prop of ErrorBoundary.

[benhuangbmj]

Upon your suggestion, I wrap the suppress-logging trigger in the showBoundary function utilizing the ErrorBoundaryContext. Here is the workflow:

flowchart TD
showBoundary1 -- error --> window -- log --> console
showBoundary2 -- error --> window -- suppress --> console
showBoundary2 -- addEventListener: handleSuppressLogging --> window
componentDidCatch2 -- removeEventListener: handleSuppressLogging --> window
componentDidCatch1 -- removeEventListener: handleSuppressLogging --> window
subgraph Outter ErrorBoundary
handleSuppressLogging1[handleSuppressLogging] --> componentDidCatch1[componentDidCatch]
handleSuppressLogging1 -- save to --> context1
prop1[suppressLogging = false] -- save to --> context1[Outter Context]
context1 -- pass to --> showBoundary1[showBoundary]
subgraph Outter Child 
showBoundary1[showBoundary]
end
subgraph Inner ErrorBoundary
handleSuppressLogging2[handleSuppressLogging] --> componentDidCatch2[componentDidCatch]
handleSuppressLogging2 -- save to --> context2
prop2[suppressLogging = true] -- save to --> context2[Inner Context]
context2 -- pass to --> showBoundary2
subgraph Inner Child
showBoundary2[showBoundary]
end
end
end

Furthermore, I postpone the addition of the window event listener util it's necessary, and remove it as soon as the error is caught by the nearest error boundary. Please let me know what you think about this design. Thanks.

P.S. I did learn a whole lot through this process and from your advice. Thanks again.