frontend: error page improvement (#598)

* update dependencies * chore: use nextjs build-in html component * feat: error page improvement * v2.0.0-beta.20

frontend: error page improvement (#598)
* update dependencies * chore: use nextjs build-in html component * feat: error page improvement * v2.0.0-beta.20
82bcbc83 · Peter Pan · GitHub · 5df7ec24 · 82bcbc83 · 82bcbc83
7 changed file
--- a/frontend/package.json
+++ b/frontend/package.json
 {
    "name": "visualdl",
-    "version": "2.0.0-beta.19",
+    "version": "2.0.0-beta.20",
    "title": "VisualDL",
    "description": "A platform to visualize the deep learning process and result.",
    "keywords": [
@@ -57,8 +57,8 @@
        "echarts-gl": "1.1.1",
        "express": "4.17.1",
        "hoist-non-react-statics": "3.3.2",
-        "http-proxy-middleware": "1.0.1",
-        "i18next": "19.3.2",
+        "http-proxy-middleware": "1.0.3",
+        "i18next": "19.3.3",
        "i18next-browser-languagedetector": "4.0.2",
        "i18next-express-middleware": "1.9.1",
        "i18next-node-fs-backend": "2.1.3",
@@ -66,7 +66,7 @@
        "isomorphic-unfetch": "3.0.0",
        "lodash": "4.17.15",
        "moment": "2.24.0",
-        "next": "9.2.2",
+        "next": "9.3.1",
        "nprogress": "0.2.0",
        "open": "7.0.3",
        "ora": "4.0.3",
@@ -86,7 +86,7 @@
        "styled-components": "5.0.1",
        "swr": "0.1.18",
        "url": "0.11.0",
-        "yargs": "15.1.0"
+        "yargs": "15.3.1"
    },
    "devDependencies": {
        "@babel/core": "7.8.7",
@@ -96,19 +96,19 @@
        "@types/express": "4.17.3",
        "@types/faker": "4.1.10",
        "@types/lodash": "4.14.149",
-        "@types/node": "13.9.0",
+        "@types/node": "13.9.1",
        "@types/nprogress": "0.2.0",
        "@types/react": "16.9.23",
        "@types/react-dom": "16.9.5",
        "@types/styled-components": "5.0.1",
        "@types/webpack": "4.41.7",
        "@types/yargs": "15.0.4",
-        "@typescript-eslint/eslint-plugin": "2.22.0",
-        "@typescript-eslint/parser": "2.22.0",
-        "@wasm-tool/wasm-pack-plugin": "1.1.0",
+        "@typescript-eslint/eslint-plugin": "2.24.0",
+        "@typescript-eslint/parser": "2.24.0",
+        "@wasm-tool/wasm-pack-plugin": "1.2.0",
        "babel-plugin-emotion": "10.0.29",
        "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",
        "cross-env": "7.0.2",
        "eslint": "6.8.0",
@@ -123,8 +123,8 @@
        "prettier": "1.19.1",
        "ts-node": "8.6.2",
        "typescript": "3.8.3",
-        "worker-plugin": "3.2.0",
-        "yarn": "1.22.1"
+        "worker-plugin": "4.0.2",
+        "yarn": "1.22.4"
    },
    "optionalDependencies": {
        "wasm-pack": "0.9.1"

--- a/frontend/pages/404.tsx
+++ b/frontend/pages/404.tsx
+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;
--- a/frontend/pages/_document.tsx
+++ b/frontend/pages/_document.tsx
-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';

 interface VDLDocumentProps extends DocumentProps {
@@ -44,13 +44,13 @@ export default class VDLDocument extends Document<VDLDocumentProps> {
    render() {
        const {language, languageDir} = this.props;
        return (
-            <html lang={language} dir={languageDir}>
+            <Html lang={language} dir={languageDir}>
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
-            </html>
+            </Html>
        );
    }
 }
--- a/frontend/pages/_error.tsx
+++ b/frontend/pages/_error.tsx
-import React from 'react';
+import styled from 'styled-components';
+import {rem, headerHeight} from '~/utils/style';
 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 {
    statusCode?: number | null;
 }
@@ -8,7 +17,7 @@ interface ErrorProps {
 const Error: NextI18NextPage<ErrorProps> = ({statusCode}) => {
    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}) => {

--- a/frontend/public/locales/en/errors.json
+++ b/frontend/public/locales/en/errors.json
 {
    "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"
 }
--- a/frontend/public/locales/zh/errors.json
+++ b/frontend/public/locales/zh/errors.json
 {
    "error-with-status": "服务器发生了一个 {{statusCode}} 错误",
-    "error-without-status": "服务器发生了一个错误"
+    "error-without-status": "服务器发生了一个错误",
+    "page-not-found": "页面不存在"
 }
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock