Added a mechanism to reset error boundary on page change. (#5913)

Previously the error boundary component was re-rendering with the same
state as long as we stayed in the same router, so for page change inside
an index container, it would stay on error state.

The fix is to memorize the location the error page is on during its
first render, and then to reset the error boundary if it gets
re-rendered with a different location even in the same index container.

Fixes : #3592

packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx

@@ -1,4 +1,6 @@
+import { useEffect, useState } from 'react';
 import { FallbackProps } from 'react-error-boundary';
+import { useLocation } from 'react-router-dom';
 import { ThemeProvider, useTheme } from '@emotion/react';
 import isEmpty from 'lodash.isempty';
 import { IconRefresh, THEME_LIGHT } from 'twenty-ui';
@@ -11,6 +13,7 @@ import {
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
 } from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 type GenericErrorFallbackProps = FallbackProps;
 
@@ -18,7 +21,18 @@ export const GenericErrorFallback = ({
   error,
   resetErrorBoundary,
 }: GenericErrorFallbackProps) => {
+  const location = useLocation();
+
+  const [previousLocation] = useState(location);
+
+  useEffect(() => {
+    if (!isDeeplyEqual(previousLocation, location)) {
+      resetErrorBoundary();
+    }
+  }, [previousLocation, location, resetErrorBoundary]);
+
   const theme = useTheme();
+
   return (
     <ThemeProvider theme={isEmpty(theme) ? THEME_LIGHT : theme}>
       <AnimatedPlaceholderEmptyContainer>