basic error screen

2026-10-25 11:39:51 +01:00 · 2026-05-19 14:38:28 -05:00
1 parent 676601b06e
commit 2b955a281b
@@ -40,14 +40,18 @@
    color: var(--accent-1);
  }

-  &[data-variant="ghost"] {
+  &[data-variant="ghost"],
+  &[data-variant="outline"] {
    background: none;
-    color: var(--accent-11);
+    color: var(--accent-12);
+  }

+  &[data-variant="ghost"] {
    padding: 0;
  }

-  &[data-variant="surface"] {
+  &[data-variant="surface"],
+  &[data-variant="outline"] {
    outline: var(--space-1) solid var(--accent-6);
  }
 }
@@ -6,7 +6,7 @@ import styles from "./index.module.css";
 export interface ButtonProps extends ComponentProps<"button"> {
  color?: Color;
  radius?: `${1 | 2 | 3}` | "max";
-  variant?: "solid" | "surface" | "soft" | "inverted" | "ghost";
+  variant?: "solid" | "surface" | "soft" | "inverted" | "ghost" | "outline";
  size?: "regular";
 }

@@ -0,0 +1,72 @@
+---
+import { api } from "../api/dynamic";
+import { discordLink } from "../config/socials";
+import { Button } from "./Button";
+import { Heading } from "./Heading";
+import { Link } from "./Link";
+import { Text } from "./Text";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+const strings = await api.strings(locale);
+---
+
+<style>
+  .error-display {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    gap: var(--space-4);
+    padding: var(--space-4);
+    box-sizing: border-box;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100dvw;
+    height: 100dvh;
+
+    background-color: var(--gray-1);
+
+    body.error & {
+      display: flex;
+    }
+
+    .info {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      gap: var(--space-3);
+    }
+
+    .options {
+      display: flex;
+      gap: var(--space-3);
+    }
+  }
+</style>
+
+<div class="error-display">
+  <div class="info">
+    <Heading size="2">{strings.error.heading}</Heading>
+    <Text lowContrast>{strings.error.message}</Text>
+  </div>
+
+  <div class="options">
+    <Button variant="outline">{strings.error.view}</Button>
+
+    <Link href="" underline="never">
+      <Button variant="outline">{strings.error.reload}</Button>
+    </Link>
+
+    <Link href={discordLink} target="_blank" underline="never">
+      <Button>{strings.error.support}</Button>
+    </Link>
+  </div>
+</div>
@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+interface Props {
+  children: ReactNode;
+}
+
+export function ErrorWrapper({ children }: Props) {
+  return (
+    <ErrorBoundary
+      fallback={null}
+      onError={() => {
+        console.log("what?");
+        document.body.classList.add("error");
+      }}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}
@@ -2,6 +2,7 @@
 import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons";
 import packageJson from "../../../../package.json";
 import { api } from "../api/dynamic";
+import { discordLink } from "../config/socials";
 import { BlitzKitIcon } from "../icons/BlitzKit";
 import { Code } from "./Code";
 import { Link } from "./Link";
@@ -84,11 +85,7 @@ const strings = await api.strings(locale);
      </div>

      <div class="links">
-        <Link
-          underline="hover"
-          color="gray"
-          href="https://discord.gg/nDt7AjGJQH"
-        >
+        <Link underline="hover" color="gray" href={discordLink}>
          <DiscordLogoIcon />
          {strings.companies.discord}
        </Link>
@@ -136,6 +136,10 @@ function EquipmentOption({
      state.protagonist.equipment[equipmentIndex] === optionIndex,
  );

+  if (typeof window !== "undefined") {
+    throw "test error";
+  }
+
  return (
    <Button
      color={isSelected ? undefined : "gray"}
@@ -0,0 +1 @@
+export const discordLink = "https://discord.gg/nDt7AjGJQH";
@@ -1,19 +1,19 @@
 ---
+import ErrorDisplay from "../components/ErrorDisplay.astro";
+import { api } from "../api/dynamic";
 import BaseMeta from "../components/BaseMeta.astro";
 import BaseStyles from "../components/BaseStyles.astro";
 import ColorAlias from "../components/ColorAlias.astro";
 import ColorScale from "../components/ColorScale.astro";
 import Footer from "../components/Footer.astro";
-import Navbar from "../components/Navbar.astro";
 import type { Color } from "../ui/color";

 interface Props {
  locale: string;
  accent: Color;
-  noNavbar?: boolean;
 }

-const { accent, noNavbar, locale } = Astro.props;
+const { accent, locale } = Astro.props;
 ---

 <html lang={locale} class="dark">
@@ -73,14 +73,14 @@ const { accent, noNavbar, locale } = Astro.props;
  </head>

  <body>
-    {!noNavbar && <Navbar {locale} />}
-
    <slot name="pre-app" />

    <div class="app">
      <slot />
    </div>

+    <ErrorDisplay {locale} />
+
    <Footer {locale} />
  </body>
 </html>
@@ -1,5 +1,6 @@
 import { Fragment, useMemo } from "react";
 import { api } from "../../../../api/dynamic";
+import { ErrorWrapper } from "../../../../components/ErrorWrapper";
 import { TankopediaLoadout } from "../../../../components/TankopediaLoadout";
 import { useAwait } from "../../../../hooks/useAwait";
 import { useCharacteristicRenderer } from "../../../../hooks/useCharacteristicRenderer";
@@ -14,7 +15,15 @@ interface PageProps {
  locale: string;
 }

-export function Page({ id, locale }: PageProps) {
+export function Page(props: PageProps) {
+  return (
+    <ErrorWrapper>
+      <Wrapper {...props} />
+    </ErrorWrapper>
+  );
+}
+
+function Wrapper({ id, locale }: PageProps) {
  const tank = useAwait(() => api.tank(id), `tank-${id}`);

  Tankopedia.useInitialization(tank);
@@ -19,6 +19,5 @@ const { id, locale } = Astro.props;
 ---

 <BaseLayout {locale} accent="violet">
-
  <Page {locale} {id} client:load />
 </BaseLayout>
				`@@ -0,0 +1 @@`
				`export const discordLink = "https://discord.gg/nDt7AjGJQH";`