Use node env instead of version for environment specific logic

Dockerfile

@@ -7,6 +7,7 @@ WORKDIR /usr/src/app
 ENV npm_config_target_arch=x64
 ENV npm_config_target_platform=linux
 ENV npm_config_target_libc=musl
+ENV NODE_ENV=production
 
 # Cache deps
 COPY package.json yarn.lock ./

dev.dockerfile

@@ -6,6 +6,7 @@ WORKDIR /usr/src/app
 ENV npm_config_target_arch=x64
 ENV npm_config_target_platform=linux
 ENV npm_config_target_libc=musl
+ENV NODE_ENV=development
 
 # Cache deps
 COPY package.json yarn.lock ./

src/server/index.tsx

@@ -26,7 +26,8 @@ import {
   initializeSite,
   isAuthPath,
 } from "../shared/utils";
-import { VERSION } from "../shared/version";
+
+const { NODE_ENV } = process.env as Record<string, string>;
 
 const server = express();
 const [hostname, port] = process.env["LEMMY_UI_HOST"]
@@ -161,6 +162,7 @@ server.get("/*", async (req, res) => {
     }
 
     let routeData = await Promise.all(promises);
+    // let routeData = [{ error: "I am an error, hear me roar!" } as any];
 
     // Redirect to the 404 if there's an API error
     if (routeData[0] && routeData[0].error) {
@@ -173,7 +175,7 @@ server.get("/*", async (req, res) => {
 
         // Exact error should only be seen in a development environment. Users
         // in production will get a more generic message.
-        if (VERSION === "dev") {
+        if (NODE_ENV === "development") {
           errorPageData.error = error;
         }
 
@@ -188,6 +190,8 @@ server.get("/*", async (req, res) => {
       }
     }
 
+    console.log(routeData);
+
     const isoData: IsoData = {
       path,
       site_res: site,
@@ -287,7 +291,7 @@ server.get("/*", async (req, res) => {
   } catch (err) {
     console.error(err);
     res.statusCode = 500;
-    return res.send(VERSION === "dev" ? err.message : "Server error");
+    return res.send(NODE_ENV === "development" ? err.message : "Server error");
   }
 });
 

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

@@ -13,11 +13,11 @@ export class ErrorPage extends Component<any, any> {
     const errorPageData = this.getErrorPageData();
 
     return (
-      <div className="container-lg">
+      <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 of coming back at a later time"
+            ? '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>
         {!errorPageData && (
@@ -38,7 +38,9 @@ export class ErrorPage extends Component<any, any> {
               </ul>
             </div>
           )}
-        {errorPageData?.error && <code>{errorPageData.error.message}</code>}
+        {errorPageData?.error && (
+          <code className="text-start">{errorPageData.error}</code>
+        )}
       </div>
     );
   }

src/shared/utils.ts

@@ -107,7 +107,7 @@ export type ThemeColor =
 
 export interface ErrorPageData {
   type: "error";
-  error?: Error;
+  error?: string;
   adminMatrixIds?: string[];
 }
 

src/shared/version.ts

@@ -1 +1 @@
-export const VERSION = "unknown version" as string;
+export const VERSION = "unknown version";