Create custom error page, don't use default from Astro

2024-07-11 15:25:00 -04:00 · 2024-07-11 15:25:00 -04:00 · 833c2c3be3
commit 833c2c3be3
parent 8493d67a62
2 changed files with 85 additions and 0 deletions
--- a/src/layouts/Error.astro
+++ b/src/layouts/Error.astro
@ -0,0 +1,81 @@
+---
+// Properties
+const { Title, Description } = Astro.props
+
+// Components
+import Head from '@components/global/Head.astro'
+
+// Styles
+import '@styles/index.scss'
+import '@styles/mobile.scss'
+
+// Error
+interface Props {
+    error: unknown
+}
+
+const { error } = Astro.props
+
+// SDK
+import { OpenpanelSdk } from '@openpanel/sdk';
+const op = new OpenpanelSdk({
+    clientId: 'b4c27f56-18f5-4d66-bb62-cbf7f7161812',
+    clientSecret: 'sec_107558407af59a591b50',
+});
+
+// Track Event
+if (Astro.cookies.get("Telemtry").value === "Enabled") {
+  op.event('Error', { Error: error instanceof Error ? error.message : 'Unknown error' });
+}
+else if (Astro.cookies.get("Telemtry").value === "Disabled") {
+  null
+}
+
+// Cookies
+if (Astro.cookies.get("Telemtry").value === "Enabled") {
+    var UserIsOptedIn = true
+}
+else if (Astro.cookies.get("Telemtry").value === "Disabled") {
+    var UserIsOptedIn = false
+}
+---
+
+<Head Title='MinPluto' Description={Description}/>
+<div class="error">
+    <center><img src="/images/logo/MinPluto - Logo.png"/></center>
+    <div>
+      <p>An error has occured:</p>
+      <p>{error instanceof Error ? error.message : 'Unknown error'}</p>
+    </div>
+    {UserIsOptedIn ?
+      <a href="https://dashboard.openpanel.dev/share/overview/OCbxiJ">The error has been reported</a>
+      :
+      null
+    }
+    <slot/>
+</div>
+
+<style>
+.error {
+  position: fixed;
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: grid;
+  gap: 64px;
+  width: 360px;
+  text-align: center;
+}
+
+@keyframes indeterminateAnimation {
+  0% {
+    transform:  translateX(0) scaleX(0);
+  }
+  40% {
+    transform:  translateX(0) scaleX(0.4);
+  }
+  100% {
+    transform:  translateX(100%) scaleX(0.5);
+  }
+}
+</style>
--- a/src/pages/500.astro
+++ b/src/pages/500.astro
@ -0,0 +1,4 @@
+---
+import Error from '@layouts/Error.astro'
+---
+<Error Title="MinPluto" Description=""></Error>