feat: added key on error boundary

[yurimutti]

Closes #5027

With a key based on current location, the component can be resetting and the user continuing your journey on another routes.

[github-actions]

Welcome!

Hello there, congrats on your first PR! We're excited to have you contributing to this project.
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.

Generated by 🚫 dangerJS against 3e8bcd8

[thomtrp]

Hello @yurimutti, I tried to test your solution and I still get stuck on the error page. Could you tell me how did you test it?

[yurimutti]

Hi @thomtrp, off course!

1. Simulate error

 // twenty/packages/twenty-front/src/pages/settings/SettingsProfile.tsx

useEffect(() => {
    throw new Error('Intentional bug triggered!');
  }, []);

2. On path → http://localhost:3001/settings/developers
   

With pull request changes:

[thomtrp]

Got it, thank you!

I don't think this is what is expected there:

• the AppErrorBoundary looks like an error name that should be global. Not sure we should link it to a path name, unless this is the only way
• reload button still does not do anything, which is annoying

@lucasbordeau could you please have a look into this? I believe you had fixed something similar. Maybe you can provide hints for @yurimutti 🙏

[yurimutti]

Thanks, @thomtrp

Got it, thank you!

I don't think this is what is expected there:

• the AppErrorBoundary looks like an error name that should be global. Not sure we should link it to a path name, unless this is the only way

"Once it's that state it's very annoying because it's impossible to access any page (reload button doesn't solve anything).
We should either trigger a full reload or find a way to let the user go back to the previous page / click on menu, etc." #5027

I searched on react-error-boundary doc, forums and founded that we need passing a key to reset internal states.

https://stackoverflow.com/questions/71762507/reset-error-boundary-on-back-journey-using-useerrorhandler-hook-from-react-error

• reload button still does not do anything, which is annoying

@lucasbordeau could you please have a look into this? I believe you had fixed something similar. Maybe you can provide hints for @yurimutti 🙏

I will appreciate this hints @lucasbordeau

[lucasbordeau]

@yurimutti The SO post address a slightly different problem, here we want to reload the page when we click on the button, so the application gets a chance to have a correct state.

We can create another LayoutErrorBoundary component with a LayoutErrorFallback.

Also it would be interesting to have a second button to navigate to "main menu" in case the error gets triggered every time we reload a specific page.