💄Added user friendly error page instead of JSON response
This commit is contained in:
Anton SHEPILOV
committed by
Eric Doughty-Papassideris
Eric Doughty-Papassideris
parent
3c156c4421
commit
7941ba2e1f
@@ -1,14 +1,20 @@
|
||||
import logger from '@/lib/logger';
|
||||
import { NextFunction, Request, Response } from 'express';
|
||||
import * as Utils from '@/utils';
|
||||
import { SERVER_ORIGIN, SERVER_PREFIX } from '@config';
|
||||
|
||||
export default (error: Error & { status?: number }, req: Request, res: Response, next: NextFunction): void => {
|
||||
try {
|
||||
const status: number = error.status || 500;
|
||||
const message: string = error.message || 'something went wrong';
|
||||
const message: string = error.message || 'Something went wrong';
|
||||
|
||||
logger.error(`[${req.method}] ${req.path} >> StatusCode:: ${status}, Message:: ${message}`, error.stack);
|
||||
|
||||
res.status(status).json({ message });
|
||||
res.status(status);
|
||||
res.render('error', {
|
||||
server: Utils.joinURL([SERVER_ORIGIN, SERVER_PREFIX]),
|
||||
errorMessage: message,
|
||||
});
|
||||
} catch (error) {
|
||||
next(error);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>404 HTML Tempate by Colorlib</title>
|
||||
|
||||
<style id="" media="all">/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Maven Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/fonts.gstatic.com/s/mavenpro/v36/7Au9p_AqnyWWAxW2Wk3GwmQIElsO02Ex.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Maven Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/fonts.gstatic.com/s/mavenpro/v36/7Au9p_AqnyWWAxW2Wk3Gw2QIElsO02Ex.woff2) format('woff2');
|
||||
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Maven Pro';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(/fonts.gstatic.com/s/mavenpro/v36/7Au9p_AqnyWWAxW2Wk3GzWQIElsO0w.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Maven Pro';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(/fonts.gstatic.com/s/mavenpro/v36/7Au9p_AqnyWWAxW2Wk3GwmQIElsO02Ex.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Maven Pro';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(/fonts.gstatic.com/s/mavenpro/v36/7Au9p_AqnyWWAxW2Wk3Gw2QIElsO02Ex.woff2) format('woff2');
|
||||
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Maven Pro';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url(/fonts.gstatic.com/s/mavenpro/v36/7Au9p_AqnyWWAxW2Wk3GzWQIElsO0w.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
#notfound {
|
||||
position: relative;
|
||||
height: 100vh
|
||||
}
|
||||
|
||||
#notfound .notfound {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
.notfound {
|
||||
max-width: 920px;
|
||||
width: 100%;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px
|
||||
}
|
||||
|
||||
.notfound .notfound-404 {
|
||||
position: absolute;
|
||||
height: 100px;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
.notfound .notfound-404 h1 {
|
||||
font-family: maven pro, sans-serif;
|
||||
color: #ececec;
|
||||
font-weight: 900;
|
||||
font-size: 276px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
.notfound h2 {
|
||||
font-family: maven pro, sans-serif;
|
||||
font-size: 46px;
|
||||
color: #000;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.notfound p {
|
||||
font-family: maven pro, sans-serif;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
margin-top: 15px
|
||||
}
|
||||
|
||||
.notfound a {
|
||||
font-family: maven pro, sans-serif;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background: #189cf0;
|
||||
display: inline-block;
|
||||
padding: 16px 38px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
-webkit-transition: .2s all;
|
||||
transition: .2s all
|
||||
}
|
||||
|
||||
.notfound a:hover {
|
||||
background-color: #fff;
|
||||
border-color: #189cf0;
|
||||
color: #189cf0
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.notfound .notfound-404 h1 {
|
||||
font-size: 162px
|
||||
}
|
||||
|
||||
.notfound h2 {
|
||||
font-size: 26px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<meta name="robots" content="noindex, follow">
|
||||
</head>
|
||||
<body>
|
||||
<div id="notfound">
|
||||
<div class="notfound">
|
||||
<div class="notfound-404">
|
||||
<h1>500</h1>
|
||||
</div>
|
||||
<h2>We are sorry, internal server error!</h2>
|
||||
<p>Please, contact our support at support@twake.com.</p>
|
||||
<a href="/">Back To Homepage</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "UA-23581568-13");
|
||||
</script>
|
||||
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015"
|
||||
integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ=="
|
||||
data-cf-beacon='{"rayId":"8a39e81aa92e00bb","serverTiming":{},"version":"2024.6.1","token":"cd0b4b3a733644fc843ef0b185f98241"}'
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user