Fix error page not showing when site not fetched and adjust styles

src/server/index.tsx

@@ -167,7 +167,7 @@ server.get("/*", async (req, res) => {
         }
       }
     } catch (error) {
-      routeData = [getErrorRouteData(error)];
+      routeData = getErrorRouteData(error, site);
     }
 
     // Redirect to the 404 if there's an API error
@@ -177,13 +177,10 @@ server.get("/*", async (req, res) => {
       if (error === "instance_is_private") {
         return res.redirect(`/signup`);
       } else {
-        routeData = [getErrorRouteData(error, site)];
+        routeData = getErrorRouteData(error, site);
       }
     }
 
-    console.log("Route Data");
-    console.log(routeData);
-
     const isoData: IsoDataOptionalSite = {
       path,
       site_res: site,

src/shared/components/app/error-page.tsx

@@ -16,31 +16,51 @@ export class ErrorPage extends Component<any, any> {
     return (
       <div className="container-lg text-center">
         <h1>{errorPageData ? "Error!" : "Page Not Found"}</h1>
-        <p>
-          {errorPageData
-            ? 'There was an error on the server. Try refreshing your browser. If that doesn\'t work, come back at a later time. If the problem persists, <a href="https://github.com/LemmyNet/lemmy/issues">consider opening an issue.</a>'
-            : "The page you are looking for does not exist"}
+        <p className="p-4">
+          {errorPageData ? (
+            <>
+              <span>
+                There was an error on the server. Try refreshing your browser.
+                If that doesn&apos;t work, come back at a later time. If the
+                problem persists,
+              </span>{" "}
+              <a href="https://github.com/LemmyNet/lemmy/issues">
+                consider opening an issue.
+              </a>
+            </>
+          ) : (
+            "The page you are looking for does not exist."
+          )}
         </p>
         {!errorPageData && (
-          <Link to="/">Click here to return to your home page</Link>
+          <Link to="/" replace>
+            Click here to return to your home page.
+          </Link>
         )}
         {errorPageData?.adminMatrixIds &&
           errorPageData.adminMatrixIds.length > 0 && (
-            <div>
+            <>
               <div>
                 If you would like to reach out to one of{" "}
                 {this.isoData.site_res?.site_view.site.name ?? "this instance"}
                 &apos;s admins for support, try the following Matrix addresses:
               </div>
-              <ul>
+              <ul className="mx-auto mt-2" style={{ width: "fit-content" }}>
                 {errorPageData.adminMatrixIds.map(matrixId => (
-                  <li key={matrixId}>{matrixId}</li>
+                  <li key={matrixId} className="text-info">
+                    {matrixId}
+                  </li>
                 ))}
               </ul>
-            </div>
+            </>
           )}
         {errorPageData?.error && (
-          <code className="text-start">{errorPageData.error}</code>
+          <code
+            style={{ "text-align": "start" }}
+            className="d-block bg-dark text-light p-2 mt-4"
+          >
+            {errorPageData.error}
+          </code>
         )}
       </div>
     );

src/shared/components/common/auth-guard.tsx

@@ -6,7 +6,7 @@ function AuthGuard(props: { children?: InfernoNode }) {
   if (!UserService.Instance.myUserInfo) {
     return <Redirect to="/login" />;
   } else {
-    return <>{props.children}</>;
+    return props.children;
   }
 }