110 lines
4.4 KiB
Vue
110 lines
4.4 KiB
Vue
<template>
|
|
<div :class="['min-h-screen flex items-center justify-center', backgroundColor]">
|
|
<div class="text-center">
|
|
<h1 :class="errorCodeClass">{{ statusCode }}</h1>
|
|
<h2 :class="errorTitleClass">{{ errorTitles[statusCode] || defaultErrorTitle }}</h2> <p :class="errorMessageClass">{{ errorMessages[500] || defaultErrorMessage }}</p>
|
|
<button :class="buttonClass" @click="goTo">{{ buttonText }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const props = defineProps({
|
|
statusCode: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
goToPath: {
|
|
type: String,
|
|
default: '/'
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: 'bg-base-200'
|
|
},
|
|
errorCodeClass: {
|
|
type: String,
|
|
default: 'text-9xl font-bold text-error'
|
|
},
|
|
errorTitleClass: {
|
|
type: String,
|
|
default: 'text-5xl font-semibold mb-4'
|
|
},
|
|
errorMessageClass: {
|
|
type: String,
|
|
default: 'text-xl mb-8'
|
|
},
|
|
buttonClass: {
|
|
type: String,
|
|
default: 'btn btn-primary'
|
|
},
|
|
buttonText: {
|
|
type: String,
|
|
default: 'Go Home'
|
|
}
|
|
});
|
|
|
|
const errorTitles = ref<{[key: number]: string}>({
|
|
200: 'OK',
|
|
201: 'Created',
|
|
204: 'No Content',
|
|
301: 'Moved Permanently',
|
|
302: 'Found (Temporary Redirect)',
|
|
400: 'Bad Request',
|
|
401: 'Unauthorized',
|
|
403: 'Forbidden',
|
|
404: 'Page Not Found',
|
|
405: 'Method Not Allowed',
|
|
408: 'Request Timeout',
|
|
409: 'Conflict',
|
|
410: 'Gone',
|
|
413: 'Payload Too Large',
|
|
415: 'Unsupported Media Type',
|
|
422: 'Unprocessable Entity',
|
|
429: 'Too Many Requests',
|
|
500: 'Internal Server Error',
|
|
501: 'Not Implemented',
|
|
502: 'Bad Gateway',
|
|
503: 'Service Unavailable',
|
|
504: 'Gateway Timeout',
|
|
});
|
|
|
|
const errorMessages = ref({
|
|
200: 'The request has succeeded.',
|
|
201: 'The request has been fulfilled and resulted in a new resource being created.',
|
|
204: 'The server successfully processed the request and is not returning any content.',
|
|
301: 'This and all future requests should be directed to the given URI.',
|
|
302: 'This is an alias for 301 Moved Permanently due to historical reasons.',
|
|
400: 'The server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request syntax, invalid request message framing, or deceptive request routing).',
|
|
401: 'The request requires user authentication.',
|
|
403: 'The server understood the request but refuses to authorize it.',
|
|
404: 'The requested resource could not be found but may be available in the future. Subsequent requests by the client are permissible.',
|
|
405: 'The method specified in the Request-Line is not allowed for the resource identified by the Request-URI.',
|
|
408: 'The client did not produce a request within the time that the server was prepared to wait.',
|
|
409: 'The request could not be completed due to a conflict with the current state of the resource.',
|
|
410: 'The requested resource is no longer available at the server and no forwarding address is known.',
|
|
413: 'The server is refusing to process a request because the request entity is larger than the server is willing or able to process.',
|
|
415: 'The server refuses to accept the request because the payload format is in an unsupported format.',
|
|
422: 'When the instance given in the request is well-formed but unable to be followed due to semantic errors.',
|
|
429: 'The user has sent too many requests in a given amount of time ("rate limiting").',
|
|
500: 'A generic error message, given when an unexpected condition was encountered and no more specific message is suitable.',
|
|
501: 'The server either does not recognize the request method, or it lacks the ability to fulfill the request.',
|
|
502: 'The server, while acting as a gateway or proxy, received an invalid response from the upstream server it accessed in attempting to fulfill the request.',
|
|
503: 'The server is currently unable to handle the request due to a temporary overloading or maintenance of the server.',
|
|
504: 'The server, while acting as a gateway or proxy, did not receive a timely response from the upstream server specified by the URI.',
|
|
});
|
|
const defaultErrorTitle = 'An Error Occurred';
|
|
const defaultErrorMessage = 'We are unable to display the requested page. Please try again later.';
|
|
|
|
const router = useRouter();
|
|
const goTo = () => {
|
|
router.push(props.goToPath);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* You can add any additional styles here */
|
|
</style> |