feat(client): show the default 404 page only when profile fails (#50367)

* feat(client): check if visited profile exist

* fix typo in the variable name

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>

* add error boundray arround the session user

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>

---------

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>

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 (
     <Suspense fallback={<Loader fullScreen={true} />}>
-      <FourOhFour />
-    </Suspense>
-  ) : (
-    <Suspense fallback={<Loader fullScreen={true} />}>
-      <Profile isSessionUser={isSessionUser} user={requestedUser} />
+      <ErrorBoundary fallback={<FourOhFour />}>
+        <Profile isSessionUser={isSessionUser} user={requestedUser} />
+      </ErrorBoundary>
     </Suspense>
   );
 }