AppInsightsErrorBoundary: option to clear hasError (e.g. when using browser back)

[esc-nschulz]

Is your feature request related to a problem? Please describe.
I am using the AppInsightsErrorBoundary in App.tsx to display an error page when an error occurs somewhere in the application. This works well. However, when I click the browser back button to return to the previous page, the error component is rendered again. This can only be resolved with a page reload. It seems like the hasError state within the AppInsightsErrorBoundary can never be false.

Describe the solution you'd like
I would like to have the option to toggle the hasError state from the outside or have the AppInsightsErrorBoundary automatically set it to false after rendering.

Describe alternatives you've considered
I tried setting the key attribute of the AppInsightsErrorBoundary to location.pathname to trigger a re-render when the location changes, but it had no effect.

[MSNev]

@dizzyTree Which version of this component are you using? Can we assume the latest?

[esc-nschulz]

@MSNev Thank you for looking into this! Yes, we're using the latest version (17.0.1).

[siyuniu-ms]

hi, I am writing test to reproduce the problem, but didn't spot that error in my local test. (please see the test file written here https://github.com/microsoft/applicationinsights-react-js/pull/67/files#diff-c8b1faf19831f4305799c4f4e20216a8e656daf66e0793cba58b2a90b7e731ab)
Could you provide more details about how to reproduce it? Such as the navigate back function that you use, and the way you render your error component?

[esc-nschulz]

Hey @siyuniu-ms, thank you for the test code. I'm working on a minimal example to demonstrate the problem and will get back to you soon :)

[esc-nschulz]

Hey @siyuniu-ms, I changed the tests you provided to show our issue: #68

[siyuniu-ms]

Hey @siyuniu-ms, I changed the tests you provided to show our issue: #68

Thanks. When I pulled down your new change. I noticed that history.back() is not working here. When I write my test, I also encountered that problem and that's why I use navigator instead. Could you double check whether history.back() actually works in your local test? (when the test went to error page, it could not go back to either home page nor about page)

[siyuniu-ms]

window.history.go(-1); tends also not working when I try to go to a new page then go back to home page. Could you check the package you are working for router also?

[esc-nschulz]

Hey @siyuniu-ms, you're right, I just replaced history.back() with navigate(-1). The test should now work correctly (and fail).

[siyuniu-ms]

Hello @dizzyTree, I've experimented with various navigation methods, including navigate(-1), history back, memory router, and browser router. The issues I've encountered are detailed in this discussion: https://github.com/microsoft/applicationinsights-react-js/pull/67/files#r1391799185. Unfortunately, I haven't identified an alternative approach to replicate the problem through unit testing.

The primary concern is that when a user navigates to the about page, the AppInsightsErrorBoundary's onError function automatically opens the error page. Despite having a "back" button within the error page, my local tests indicate that neither method allows the user to navigate back to the home page or the about page. Based on my investigation, the user can navigate back from newPage to homePage since both pages exist under the router.

To accurately assess whether the error persists when users leverage the browser back button, it's crucial to simulate this behavior. If you come across any methods to reproduce this issue in a unit test, please notify me. I plan to develop a manual test for it as an alternate way. Thank you!

[esc-nschulz]

Hey @siyuniu-ms, I think you have found the real cause of the issue. So it's not about the hasError state, as I had thought, but about the Error component being rendered outside the router, making it impossible to navigate. So I think that we have been able to reproduce the bug already.