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 (
}>
-
-
- ) : (
- }>
-
+ }>
+
+
);
}