MinPluto/MinPluto-Frontend
MinPluto/MinPluto-Frontend
Archived
1
Fork 0
Code Issues Pull requests Activity

Update error pages

Browse source
This commit is contained in:
Korbs 2024-08-09 00:58:23 -04:00
parent a34ab29876
commit 67812ff3d0
3 changed files with 36 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
source/src/layouts/Error.astro
View file

@ -1,81 +1,34 @@
--- ---
// Properties // Properties
const { Title, Description } = Astro.props const {
Title,
// Components Message
import Head from '@components/global/Head.astro' } = Astro.props
// 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"> <div class="error">
<center><img src="/images/logo/MinPluto - Logo.png"/></center> <a href='/'><img src="/images/logo/MinPluto - Logo.png"/></a>
<div> <hr/>
<p>An error has occured:</p> <div>
<p>{error instanceof Error ? error.message : 'Unknown error'}</p> <h2>{Title}</h2>
</div> <p>{Message}</p>
<!-- {UserIsOptedIn ? </div>
<a href="https://dashboard.openpanel.dev/share/overview/OCbxiJ">The error has been reported</a>
:
null
} -->
<slot/>
</div> </div>
<style> <style is:inline>
.error { body {
position: fixed; background: black;
top: 30%; color: white;
left: 50%; font-family: Arial, Helvetica, sans-serif;
transform: translate(-50%, -50%);
display: grid;
gap: 64px;
width: 360px;
text-align: center;
} }
@keyframes indeterminateAnimation { .error {
0% { position: fixed;
transform: translateX(0) scaleX(0); max-width: 500px;
} margin: auto;
40% { margin-top: 90px;
transform: translateX(0) scaleX(0.4); text-align: center;
} left: 50%;
100% { transform: translate(-50%);
transform: translateX(100%) scaleX(0.5);
}
} }
</style> </style>

4
source/src/pages/404.astro
View file

@ -7,8 +7,8 @@ import Base from "@layouts/Default.astro";
<Base Title="MinPluto" Description=""> <Base Title="MinPluto" Description="">
<div class="force-center"> <div class="force-center">
<h2>Error 404</h2> <h2>Error 404: Page Not Found</h2>
<p>Page not found.</p> <p>The page you've requested has either been moved or never existed. Double check the URL you're viewing.</p>
</div> </div>
</Base> </Base>

13
source/src/pages/500.astro
View file

@ -1,4 +1,13 @@
--- ---
import Error from '@layouts/Error.astro' import ErrorLayout from '@layouts/Error.astro'
// Fetch Error Output
// https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors.ts#L5-L11
interface Props {
error: unknown
}
const { error } = Astro.props
--- ---
<Error Title="MinPluto" Description=""></Error>
<ErrorLayout Title={error.name} Message={error instanceof Error ? error.message : 'Unknown error'}/>