Improve error page with social links

packages/controller/src/routes.ts

@@ -690,4 +690,5 @@ export const webRoutes = [
 	"/roles/:id/view",
 	"/plugins",
 	"/plugins/:name/view",
+	"/error",
 ];

packages/web_ui/src/components/ErrorPage.tsx

@@ -1,15 +1,52 @@
 import React from "react";
-import { Typography } from "antd";
+import { Button, Card, Flex, Image, Typography } from "antd";
 
+import example from "../images/console-error-edge.png";
 import PageLayout from "./PageLayout";
 import type { ErrorProps } from "./App";
 
 const { Paragraph } = Typography;
 
+function SupportLinkCard(props:{
+	name: string,
+	href: string,
+	image: string,
+}) {
+	return <Card style={{ alignContent: "center" }} styles={{ body: { padding: 10 } }}>
+		<Flex align="center" gap="middle">
+			<img src={props.image} style={{ width: 50 }}/>
+			<Button type="primary" href={props.href}>{props.name}</Button>
+		</Flex>
+	</Card>;
+}
+
+export default function ErrorPage(props: ErrorProps & { throw?: boolean }) {
+	if (props.throw) {
+		throw props.error;
+	}
 
-export default function ErrorPage(props: ErrorProps) {
 	return <PageLayout nav={[{ name: "Error" }]}>
-		<h2>An unexpected error occured</h2>
-		<Paragraph code className="error-traceback">{props.error.stack}</Paragraph>
+		<h2>An Unexpected Error Occurred</h2>
+		<Paragraph code className="error-traceback">{props.error.message}</Paragraph>
+		<Paragraph>
+			Further details can found by saving the console log in dev tools
+			(F12, "Console", "Save as", see example below).
+			If this is an issue with a plugin then please report it to the plugin creator;
+			otherwise, please reach out to the Clusterio team via Github or Discord.
+		</Paragraph>
+		<Flex gap="middle">
+			<SupportLinkCard
+				name="Github Issues"
+				href="https://github.com/clusterio/clusterio/issues"
+				image="https://github.githubassets.com/favicons/favicon-dark.svg"
+			/>
+			<SupportLinkCard
+				name="Support Server"
+				href="https://discord.gg/mzAsgnm"
+				image="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/66e3d7f4ef6498ac018f2c55_Symbol.svg"
+			/>
+		</Flex>
+		<br/>
+		<Image height={250} src={example}/>
 	</PageLayout>;
 };

packages/web_ui/src/pages.tsx

@@ -15,6 +15,7 @@ import RolesPage from "./components/RolesPage";
 import RoleViewPage from "./components/RoleViewPage";
 import PluginsPage from "./components/PluginsPage";
 import PluginViewPage from "./components/PluginViewPage";
+import ErrorPage from "./components/ErrorPage";
 
 export const pages: PluginPage[] = [
 	{
@@ -87,6 +88,10 @@ export const pages: PluginPage[] = [
 		sidebarPath: "/plugins",
 		content: <PluginViewPage />,
 	},
+	{
+		path: "/error",
+		content: <ErrorPage throw error={new Error("Example Error Message")} />,
+	},
 ];
 
 export const sidebarPages = [