未验证 提交 82bcbc83 编写于 作者: P Peter Pan 提交者: GitHub

frontend: error page improvement (#598)

* update dependencies

* chore: use nextjs build-in html component

* feat: error page improvement

* v2.0.0-beta.20
上级 5df7ec24
{ {
"name": "visualdl", "name": "visualdl",
"version": "2.0.0-beta.19", "version": "2.0.0-beta.20",
"title": "VisualDL", "title": "VisualDL",
"description": "A platform to visualize the deep learning process and result.", "description": "A platform to visualize the deep learning process and result.",
"keywords": [ "keywords": [
...@@ -57,8 +57,8 @@ ...@@ -57,8 +57,8 @@
"echarts-gl": "1.1.1", "echarts-gl": "1.1.1",
"express": "4.17.1", "express": "4.17.1",
"hoist-non-react-statics": "3.3.2", "hoist-non-react-statics": "3.3.2",
"http-proxy-middleware": "1.0.1", "http-proxy-middleware": "1.0.3",
"i18next": "19.3.2", "i18next": "19.3.3",
"i18next-browser-languagedetector": "4.0.2", "i18next-browser-languagedetector": "4.0.2",
"i18next-express-middleware": "1.9.1", "i18next-express-middleware": "1.9.1",
"i18next-node-fs-backend": "2.1.3", "i18next-node-fs-backend": "2.1.3",
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
"isomorphic-unfetch": "3.0.0", "isomorphic-unfetch": "3.0.0",
"lodash": "4.17.15", "lodash": "4.17.15",
"moment": "2.24.0", "moment": "2.24.0",
"next": "9.2.2", "next": "9.3.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"open": "7.0.3", "open": "7.0.3",
"ora": "4.0.3", "ora": "4.0.3",
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
"styled-components": "5.0.1", "styled-components": "5.0.1",
"swr": "0.1.18", "swr": "0.1.18",
"url": "0.11.0", "url": "0.11.0",
"yargs": "15.1.0" "yargs": "15.3.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "7.8.7", "@babel/core": "7.8.7",
...@@ -96,19 +96,19 @@ ...@@ -96,19 +96,19 @@
"@types/express": "4.17.3", "@types/express": "4.17.3",
"@types/faker": "4.1.10", "@types/faker": "4.1.10",
"@types/lodash": "4.14.149", "@types/lodash": "4.14.149",
"@types/node": "13.9.0", "@types/node": "13.9.1",
"@types/nprogress": "0.2.0", "@types/nprogress": "0.2.0",
"@types/react": "16.9.23", "@types/react": "16.9.23",
"@types/react-dom": "16.9.5", "@types/react-dom": "16.9.5",
"@types/styled-components": "5.0.1", "@types/styled-components": "5.0.1",
"@types/webpack": "4.41.7", "@types/webpack": "4.41.7",
"@types/yargs": "15.0.4", "@types/yargs": "15.0.4",
"@typescript-eslint/eslint-plugin": "2.22.0", "@typescript-eslint/eslint-plugin": "2.24.0",
"@typescript-eslint/parser": "2.22.0", "@typescript-eslint/parser": "2.24.0",
"@wasm-tool/wasm-pack-plugin": "1.1.0", "@wasm-tool/wasm-pack-plugin": "1.2.0",
"babel-plugin-emotion": "10.0.29", "babel-plugin-emotion": "10.0.29",
"babel-plugin-styled-components": "1.10.7", "babel-plugin-styled-components": "1.10.7",
"babel-plugin-typescript-to-proptypes": "1.3.0", "babel-plugin-typescript-to-proptypes": "1.3.2",
"core-js": "3", "core-js": "3",
"cross-env": "7.0.2", "cross-env": "7.0.2",
"eslint": "6.8.0", "eslint": "6.8.0",
...@@ -123,8 +123,8 @@ ...@@ -123,8 +123,8 @@
"prettier": "1.19.1", "prettier": "1.19.1",
"ts-node": "8.6.2", "ts-node": "8.6.2",
"typescript": "3.8.3", "typescript": "3.8.3",
"worker-plugin": "3.2.0", "worker-plugin": "4.0.2",
"yarn": "1.22.1" "yarn": "1.22.4"
}, },
"optionalDependencies": { "optionalDependencies": {
"wasm-pack": "0.9.1" "wasm-pack": "0.9.1"
......
import styled from 'styled-components';
import {rem, headerHeight} from '~/utils/style';
import {useTranslation, NextI18NextPage} from '~/utils/i18n';
const Error = styled.div`
height: calc(100vh - ${headerHeight});
display: flex;
justify-content: center;
align-items: center;
font-size: ${rem(20)};
`;
const Error404: NextI18NextPage = () => {
const {t} = useTranslation('errors');
return <Error>404 - {t('page-not-found')}</Error>;
};
// 404 page cannot have getInitialProps or getServerSideProps
// we need next-i18next support getStaticProps
// https://github.com/zeit/next.js/blob/master/errors/404-get-initial-props.md
// https://github.com/isaachinman/next-i18next/issues/652
// Error404.getInitialProps = () => {
// return {
// namespacesRequired: ['errors']
// };
// };
export default Error404;
import Document, {Head, Main, NextScript, DocumentContext, DocumentProps} from 'next/document'; import Document, {Html, Head, Main, NextScript, DocumentContext, DocumentProps} from 'next/document';
import {ServerStyleSheet} from '~/utils/style'; import {ServerStyleSheet} from '~/utils/style';
interface VDLDocumentProps extends DocumentProps { interface VDLDocumentProps extends DocumentProps {
...@@ -44,13 +44,13 @@ export default class VDLDocument extends Document<VDLDocumentProps> { ...@@ -44,13 +44,13 @@ export default class VDLDocument extends Document<VDLDocumentProps> {
render() { render() {
const {language, languageDir} = this.props; const {language, languageDir} = this.props;
return ( return (
<html lang={language} dir={languageDir}> <Html lang={language} dir={languageDir}>
<Head /> <Head />
<body> <body>
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>
</html> </Html>
); );
} }
} }
import React from 'react'; import styled from 'styled-components';
import {rem, headerHeight} from '~/utils/style';
import {useTranslation, NextI18NextPage} from '~/utils/i18n'; import {useTranslation, NextI18NextPage} from '~/utils/i18n';
const ErrorDiv = styled.div`
height: calc(100vh - ${headerHeight});
display: flex;
justify-content: center;
align-items: center;
font-size: ${rem(20)};
`;
interface ErrorProps { interface ErrorProps {
statusCode?: number | null; statusCode?: number | null;
} }
...@@ -8,7 +17,7 @@ interface ErrorProps { ...@@ -8,7 +17,7 @@ interface ErrorProps {
const Error: NextI18NextPage<ErrorProps> = ({statusCode}) => { const Error: NextI18NextPage<ErrorProps> = ({statusCode}) => {
const {t} = useTranslation('errors'); const {t} = useTranslation('errors');
return <p>{statusCode ? t('error-with-status', {statusCode}) : t('error-without-status')}</p>; return <ErrorDiv>{statusCode ? t('error-with-status', {statusCode}) : t('error-without-status')}</ErrorDiv>;
}; };
Error.getInitialProps = ({res, err}) => { Error.getInitialProps = ({res, err}) => {
......
{ {
"error-with-status": "A {{statusCode}} error occurred on server", "error-with-status": "A {{statusCode}} error occurred on server",
"error-without-status": "An error occurred on the server" "error-without-status": "An error occurred on the server",
"page-not-found": "Page Not Found"
} }
{ {
"error-with-status": "服务器发生了一个 {{statusCode}} 错误", "error-with-status": "服务器发生了一个 {{statusCode}} 错误",
"error-without-status": "服务器发生了一个错误" "error-without-status": "服务器发生了一个错误",
"page-not-found": "页面不存在"
} }
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册