From 76bcf313413648d14c5b57068ecf252a8df7ecdb Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Wed, 19 Jun 2024 14:34:11 +0200
Subject: [PATCH] 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
---
 .../components/GenericErrorFallback.tsx            | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx b/packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx
index 87f840369..2109891ac 100644
--- a/packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx
+++ b/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>