diff --git a/client/src/client-only-routes/show-profile-or-four-oh-four.tsx b/client/src/client-only-routes/show-profile-or-four-oh-four.tsx index 03f40621e16..92249c34a2d 100644 --- a/client/src/client-only-routes/show-profile-or-four-oh-four.tsx +++ b/client/src/client-only-routes/show-profile-or-four-oh-four.tsx @@ -4,7 +4,6 @@ import { connect } from 'react-redux'; import { isBrowser } from '../../utils/index'; import Loader from '../components/helpers/loader'; -import Profile from '../components/profile/profile'; import { fetchProfileForUser } from '../redux/actions'; import { usernameSelector, @@ -13,6 +12,7 @@ import { } from '../redux/selectors'; import { User } from '../redux/prop-types'; +const Profile = lazy(() => import('../components/profile/profile')); const FourOhFour = lazy(() => import('../components/FourOhFour')); interface ShowProfileOrFourOhFourProps { @@ -56,6 +56,32 @@ const mapDispatchToProps: { fetchProfileForUser }; +type ErrorBoundaryProps = { + fallback: React.ReactNode; +}; + +class ErrorBoundary extends React.Component< + ErrorBoundaryProps, + { hasError: boolean } +> { + constructor(props: ErrorBoundaryProps) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError() { + return { hasError: true }; + } + + render() { + if (this.state.hasError) { + return this.props.fallback; + } + + return this.props.children; + } +} + function ShowProfileOrFourOhFour({ requestedUser, maybeUser, @@ -75,14 +101,11 @@ function ShowProfileOrFourOhFour({ if (!isBrowser()) { return null; } - - return isEmpty(requestedUser) ? ( + return ( }> - - - ) : ( - }> - + }> + + ); }