Lucas BordeauandGitHub
76bcf31341
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
58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
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';
|
||
|
||
import { Button } from '@/ui/input/button/components/Button';
|
||
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
|
||
import {
|
||
AnimatedPlaceholderEmptyContainer,
|
||
AnimatedPlaceholderEmptySubTitle,
|
||
AnimatedPlaceholderEmptyTextContainer,
|
||
AnimatedPlaceholderEmptyTitle,
|
||
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
|
||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||
|
||
type GenericErrorFallbackProps = FallbackProps;
|
||
|
||
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>
|
||
<AnimatedPlaceholder type="errorIndex" />
|
||
<AnimatedPlaceholderEmptyTextContainer>
|
||
<AnimatedPlaceholderEmptyTitle>
|
||
Server’s on a coffee break
|
||
</AnimatedPlaceholderEmptyTitle>
|
||
<AnimatedPlaceholderEmptySubTitle>
|
||
{error.message}
|
||
</AnimatedPlaceholderEmptySubTitle>
|
||
</AnimatedPlaceholderEmptyTextContainer>
|
||
<Button
|
||
Icon={IconRefresh}
|
||
title="Reload"
|
||
variant={'secondary'}
|
||
onClick={() => resetErrorBoundary()}
|
||
/>
|
||
</AnimatedPlaceholderEmptyContainer>
|
||
</ThemeProvider>
|
||
);
|
||
};
|