sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-31 03:55:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: 404 handling but actually

Browse Source
This commit is contained in:
Michael H.
2026-08-28 15:14:47 +02:00
parent 98f8bbcad9
commit ff4c9be910
2 changed files with 3 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/pages/[...path].vue
-102
View File
@@ -1,102 +0,0 @@
<template>
<div class="main">
<div class="error-graphic">
<Logo404 />
</div>
<div class="error-box">
<div class="error-box__body">
<h1 class="error-box__title">
{{ formatMessage(messages.title) }}
</h1>
<p class="error-box__subtitle">
{{ formatMessage(messages.subtitle) }}
</p>
</div>
</div>
</div>
</template>
<script setup>
import { defineMessages, useVIntl } from '@modrinth/ui'
import Logo404 from '~/assets/images/404.svg'
setResponseStatus(404)
const { formatMessage } = useVIntl()
const messages = defineMessages({
title: {
id: 'error.generic.404.title',
defaultMessage: 'Page not found',
},
subtitle: {
id: 'error.generic.404.subtitle',
defaultMessage: "The page you were looking for doesn't seem to exist.",
},
})
</script>
<style lang="scss" scoped>
.main {
margin: var(--spacing-card-lg) auto;
width: calc(100% - 4rem);
min-height: min(90vh, 30rem);
display: flex;
flex-direction: column;
justify-content: center;
@media screen and (min-width: 800px) {
width: 600px;
}
}
.error-graphic {
margin-bottom: 2rem;
display: flex;
justify-content: center;
svg {
fill: var(--color-text);
color: var(--color-text);
width: min(15rem, 100%);
height: auto;
}
}
.error-box {
background-color: var(--color-raised-bg);
border-radius: 1.25rem;
padding: 1.75rem 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
box-shadow: var(--shadow-card);
position: relative;
p {
margin: 0;
}
&__title {
font-size: 1.5rem;
font-weight: 600;
margin: 0;
}
&__subtitle {
font-size: 1rem;
font-weight: 400;
}
&__body {
display: flex;
flex-direction: column;
gap: 0.75rem;
&:empty {
display: none;
}
}
}
</style>
apps/frontend/src/server/plugins/error-handling.ts
+3
View File
@@ -1,5 +1,8 @@
export default defineNitroPlugin((nitroApp) => { export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('error', async (error, { event }) => { nitroApp.hooks.hook('error', async (error, { event }) => {
const statusCode = (error as { statusCode?: number }).statusCode ?? 500
if (statusCode < 500) return
console.error(`[Context Error] at ${event?.path}:`, error) console.error(`[Context Error] at ${event?.path}:`, error)
}) })
}) })