@shuvi/platform-web 1.0.0-rc.2 → 1.0.0-rc.20

package/esm/shuvi-app/dev/hotDevClient.js

@@ -0,0 +1,327 @@
+/* eslint-disable camelcase */
+/**
+MIT License
+
+Copyright (c) 2013-present, Facebook, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+// This file is based on https://github.com/facebook/create-react-app/blob/v1.1.4/packages/react-dev-utils/webpackHotDevClient.js
+// It's been edited to rely on webpack-hot-middleware.
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// @ts-nocheck
+import stripAnsi from 'strip-ansi';
+import formatWebpackMessages from '@shuvi/toolpack/lib/utils/formatWebpackMessages';
+import { startReportingRuntimeErrors, stopReportingRuntimeErrors, onBuildError, onBuildOk, onRefresh } from '@shuvi/error-overlay';
+import { DEV_SOCKET_TIMEOUT_MS } from '@shuvi/shared/esm/constants';
+import { connectHMR, addMessageListener, sendMessage } from './websocket';
+// This alternative WebpackDevServer combines the functionality of:
+// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js
+// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js
+// It only supports their simplest configuration (hot updates on same server).
+// It makes some opinionated choices on top, like adding a syntax error overlay
+// that looks similar to our console output. The error overlay is inspired by:
+// https://github.com/glenjamin/webpack-hot-middleware
+// This is a modified version of create-react-app's webpackHotDevClient.js
+// It implements webpack-hot-middleware's EventSource events instead of webpack-dev-server's websocket.
+// https://github.com/facebook/create-react-app/blob/25184c4e91ebabd16fe1cde3d8630830e4a36a01/packages/react-dev-utils/webpackHotDevClient.js
+let hadRuntimeError = false;
+let customHmrEventHandler;
+export default function connect(options) {
+    startReportingRuntimeErrors({
+        onError: function () {
+            hadRuntimeError = true;
+        }
+    });
+    if (module.hot && typeof module.hot.dispose === 'function') {
+        module.hot.dispose(function () {
+            stopReportingRuntimeErrors();
+        });
+    }
+    connectHMR(Object.assign(Object.assign({}, options), { log: true }));
+    addMessageListener(event => {
+        // This is the heartbeat event
+        const obj = JSON.parse(event.data);
+        if (obj.action === 'pong') {
+            return;
+        }
+        try {
+            processMessage(event);
+        }
+        catch (ex) {
+            console.warn('Invalid HMR message: ' + event.data + '\n' + ex);
+        }
+    });
+    setInterval(() => {
+        sendMessage(JSON.stringify({ event: 'ping' }));
+    }, DEV_SOCKET_TIMEOUT_MS / 2);
+    return {
+        sendMessage(data) {
+            sendMessage(data);
+        },
+        subscribeToHmrEvent(handler) {
+            customHmrEventHandler = handler;
+        }
+    };
+}
+// Remember some state related to hot module replacement.
+var isFirstCompilation = true;
+var mostRecentCompilationHash = null;
+var hasCompileErrors = false;
+function clearOutdatedErrors() {
+    // Clean up outdated compile errors, if any.
+    if (typeof console !== 'undefined' && typeof console.clear === 'function') {
+        if (hasCompileErrors) {
+            console.clear();
+        }
+    }
+}
+let startLatency = undefined;
+function onFastRefresh(hasUpdates) {
+    onBuildOk();
+    if (hasUpdates) {
+        onRefresh();
+    }
+    if (startLatency) {
+        const endLatency = Date.now();
+        const latency = endLatency - startLatency;
+        console.log(`[Fast Refresh] done in ${latency}ms`);
+    }
+}
+// Successful compilation.
+function handleSuccess() {
+    clearOutdatedErrors();
+    const isHotUpdate = !isFirstCompilation;
+    isFirstCompilation = false;
+    hasCompileErrors = false;
+    // Attempt to apply hot updates or reload.
+    if (isHotUpdate) {
+        tryApplyUpdates(function onHotUpdateSuccess(hasUpdates) {
+            // Only dismiss it when we're sure it's a hot update.
+            // Otherwise it would flicker right before the reload.
+            onFastRefresh(hasUpdates);
+        });
+    }
+}
+// Compilation with warnings (e.g. ESLint).
+function handleWarnings(warnings) {
+    clearOutdatedErrors();
+    var isHotUpdate = !isFirstCompilation;
+    isFirstCompilation = false;
+    hasCompileErrors = false;
+    // Print warnings to the console.
+    const formatted = formatWebpackMessages({
+        warnings: warnings,
+        errors: []
+    });
+    if (typeof console !== 'undefined' && typeof console.warn === 'function') {
+        for (let i = 0; i < formatted.warnings.length; i++) {
+            if (i === 5) {
+                console.warn('There were more warnings in other files.\n' +
+                    'You can find a complete log in the terminal.');
+                break;
+            }
+            console.warn(stripAnsi(formatted.warnings[i]));
+        }
+    }
+    // Attempt to apply hot updates or reload.
+    if (isHotUpdate) {
+        tryApplyUpdates(function onSuccessfulHotUpdate(hasUpdates) {
+            // Only dismiss it when we're sure it's a hot update.
+            // Otherwise it would flicker right before the reload.
+            onFastRefresh(hasUpdates);
+        });
+    }
+}
+// Compilation with errors (e.g. syntax error or missing modules).
+function handleErrors(errors) {
+    if (!Boolean(errors && errors.length)) {
+        return;
+    }
+    clearOutdatedErrors();
+    isFirstCompilation = false;
+    hasCompileErrors = true;
+    // "Massage" webpack messages.
+    var formatted = formatWebpackMessages({
+        errors: errors,
+        warnings: []
+    });
+    // Only show the first error.
+    onBuildError(formatted.errors[0]);
+    // Also log them to the console.
+    if (typeof console !== 'undefined' && typeof console.error === 'function') {
+        for (var i = 0; i < formatted.errors.length; i++) {
+            console.error(stripAnsi(formatted.errors[i]));
+        }
+    }
+}
+// There is a newer version of the code available.
+function handleAvailableHash(hash) {
+    // Update last known compilation hash.
+    mostRecentCompilationHash = hash;
+}
+// Handle messages from the server.
+function processMessage(e) {
+    const obj = JSON.parse(e.data);
+    switch (obj.action) {
+        case 'building': {
+            startLatency = Date.now();
+            console.log('[Fast Refresh] bundle ' +
+                (obj.name ? "'" + obj.name + "' " : '') +
+                'rebuilding');
+            break;
+        }
+        case 'built':
+        case 'sync': {
+            if (obj.hash) {
+                handleAvailableHash(obj.hash);
+            }
+            const { errors, warnings } = obj;
+            const hasErrors = Boolean(errors && errors.length);
+            if (hasErrors) {
+                return handleErrors(errors);
+            }
+            const hasWarnings = Boolean(warnings && warnings.length);
+            if (hasWarnings) {
+                return handleWarnings(warnings);
+            }
+            return handleSuccess();
+        }
+        case 'warnings':
+            handleWarnings(obj.data);
+            break;
+        case 'errors':
+            handleErrors(obj.data);
+            break;
+        default: {
+            if (customHmrEventHandler) {
+                customHmrEventHandler(obj);
+                break;
+            }
+            break;
+        }
+    }
+}
+// Is there a newer version of this code available?
+function isUpdateAvailable() {
+    /* globals __webpack_hash__ */
+    // __webpack_hash__ is the hash of the current compilation.
+    // It's a global variable injected by Webpack.
+    return mostRecentCompilationHash !== __webpack_hash__;
+}
+// Webpack disallows updates in other states.
+function canApplyUpdates() {
+    return module.hot.status() === 'idle';
+}
+function waitForReady() {
+    return new Promise((resolve, reject) => {
+        if (module.hot.status() !== 'prepare') {
+            reject();
+        }
+        const handler = status => {
+            module.hot.removeStatusHandler(handler);
+            if (status === 'ready') {
+                resolve();
+            }
+            if (status === 'abort' || status === 'fail') {
+                reject();
+            }
+        };
+        module.hot.addStatusHandler(handler);
+    });
+}
+// Attempt to update code on the fly, fall back to a hard reload.
+function tryApplyUpdates(onHotUpdateSuccess) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!module.hot) {
+            // HotModuleReplacementPlugin is not in Webpack configuration.
+            console.error('HotModuleReplacementPlugin is not in Webpack configuration.');
+            window.location.reload();
+            return;
+        }
+        if (!isUpdateAvailable() || !canApplyUpdates()) {
+            onBuildOk();
+            // HMR failed, need to refresh
+            const hmrStatus = module.hot.status();
+            if (hmrStatus === 'abort' || hmrStatus === 'fail') {
+                window.location.reload();
+            }
+            return;
+        }
+        function handleApplyUpdates(err, updatedModules) {
+            const hasUpdates = Boolean(updatedModules === null || updatedModules === void 0 ? void 0 : updatedModules.length);
+            if (hadRuntimeError) {
+                hadRuntimeError = false;
+                window.location.reload();
+                return;
+            }
+            if (err) {
+                hadRuntimeError = true;
+            }
+            if (typeof onHotUpdateSuccess === 'function') {
+                // Maybe we want to do something.
+                onHotUpdateSuccess(hasUpdates);
+            }
+            if (isUpdateAvailable()) {
+                // While we were updating, there was a new update! Do it again.
+                tryApplyUpdates(hasUpdates ? onBuildOk : onHotUpdateSuccess);
+            }
+            else {
+                onBuildOk();
+            }
+        }
+        try {
+            // https://webpack.js.org/api/hot-module-replacement/#check
+            let updatedModules = yield module.hot.check(/* autoApply */ false);
+            if (!updatedModules) {
+                return;
+            }
+            // if there is another updating, delay the update
+            // multiple hotupdate occurs during import() will cause hmr error
+            // so we delay the adjacent hotupdates
+            // import() == loade module script ----> require(module)
+            //                                  |
+            //                                  |
+            //     if applyUpdate happens here, require will cause a error
+            if (isUpdateAvailable()) {
+                yield new Promise(resolve => {
+                    setTimeout(resolve, 50);
+                });
+            }
+            if (updatedModules) {
+                if (module.hot.status() !== 'ready') {
+                    yield waitForReady();
+                }
+                updatedModules = yield module.hot.apply();
+            }
+            handleApplyUpdates(null, updatedModules);
+        }
+        catch (err) {
+            handleApplyUpdates(err, null);
+        }
+    });
+}

package/esm/shuvi-app/dev/index.d.ts

@@ -0,0 +1,3 @@
+import { InternalApplication } from '../../shared';
+import { HotDevClient } from './hotDevClient';
+export declare const initHMRAndDevClient: (app: InternalApplication) => HotDevClient;

package/esm/shuvi-app/dev/index.js

@@ -0,0 +1,27 @@
+import { DEV_SOCKET_TIMEOUT_MS, DEV_HOT_MIDDLEWARE_PATH, DEV_HOT_LAUNCH_EDITOR_ENDPOINT } from '@shuvi/shared/esm/constants';
+import connect from './hotDevClient';
+let devClient;
+export const initHMRAndDevClient = (app) => {
+    if (devClient) {
+        return devClient;
+    }
+    devClient = connect({
+        launchEditorEndpoint: DEV_HOT_LAUNCH_EDITOR_ENDPOINT,
+        path: DEV_HOT_MIDDLEWARE_PATH,
+        location
+    });
+    setInterval(() => {
+        devClient.sendMessage(JSON.stringify({
+            event: 'updatePageStatus',
+            currentRoutes: app.router.current.matches.map(({ route: { __componentRawRequest__ } }) => __componentRawRequest__),
+            page: location.pathname
+        }));
+    }, DEV_SOCKET_TIMEOUT_MS / 2);
+    devClient.subscribeToHmrEvent((event) => {
+        // if (obj.action === "reloadPage") {
+        //   return window.location.reload();
+        // }
+        // throw new Error("Unexpected action " + obj.action);
+    });
+    return devClient;
+};

package/esm/shuvi-app/dev/websocket.d.ts

@@ -0,0 +1,16 @@
+export declare function addMessageListener(cb: (event: any) => void): void;
+export declare function sendMessage(data: any): any;
+export declare type HotDevClient = {
+    sendMessage: (data: any) => void;
+    subscribeToHmrEvent?: (handler: any) => void;
+};
+export declare function connectHMR(options: {
+    path: string;
+    timeout: number;
+    log?: boolean;
+    location: {
+        protocol: string;
+        hostname: string;
+        port?: string;
+    };
+}): void;

package/esm/shuvi-app/dev/websocket.js

@@ -0,0 +1,61 @@
+let source;
+const eventCallbacks = [];
+let lastActivity = Date.now();
+let initDataBeforeWsOnline = [];
+function getSocketProtocol(protocol) {
+    return protocol === 'http:' ? 'ws' : 'wss';
+}
+export function addMessageListener(cb) {
+    eventCallbacks.push(cb);
+}
+export function sendMessage(data) {
+    if (!source || source.readyState !== source.OPEN) {
+        initDataBeforeWsOnline.push(data);
+        return;
+    }
+    return source.send(data);
+}
+export function connectHMR(options) {
+    if (!options.timeout) {
+        options.timeout = 5000;
+    }
+    init();
+    let timer = setInterval(function () {
+        if (Date.now() - lastActivity > options.timeout) {
+            handleDisconnect();
+        }
+    }, options.timeout / 2);
+    function init() {
+        if (source)
+            source.close();
+        let { protocol, hostname, port } = options.location;
+        protocol = getSocketProtocol(protocol);
+        let url = `${protocol}://${hostname}:${port}`;
+        source = new WebSocket(`${url}${options.path}`);
+        source.onopen = handleOnline;
+        source.onerror = handleDisconnect;
+        source.onmessage = handleMessage;
+    }
+    function handleOnline() {
+        if (initDataBeforeWsOnline.length !== 0) {
+            initDataBeforeWsOnline.forEach(data => {
+                sendMessage(data);
+            });
+            initDataBeforeWsOnline = [];
+        }
+        if (options.log)
+            console.log('[HMR] connected');
+        lastActivity = Date.now();
+    }
+    function handleMessage(event) {
+        lastActivity = Date.now();
+        eventCallbacks.forEach(cb => {
+            cb(event);
+        });
+    }
+    function handleDisconnect() {
+        clearInterval(timer);
+        source.close();
+        setTimeout(init, options.timeout);
+    }
+}

package/esm/shuvi-app/entry/client/app.d.ts

@@ -1,2 +1,3 @@
+declare const app: import("../../app/client").InternalApplication;
 declare const run: () => Promise<void>;
-export { run };
+export { run, app };

package/esm/shuvi-app/entry/client/app.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { CLIENT_CONTAINER_ID } from '@shuvi/shared/lib/constants';
 // renderer must be imported before application
-// we need to init init renderer before import AppComponent
+// we need to init renderer before import AppComponent
 import { view, getRoutes, app as PlatformAppComponent } from '@shuvi/app/core/platform';
 import routes from '@shuvi/app/files/routes';
 import { getAppData } from '@shuvi/platform-shared/shared/helper/getAppData';
@@ -20,19 +20,19 @@ const app = createApp({
     routes,
     appData
 });
-const render = () => {
+const render = () => __awaiter(void 0, void 0, void 0, function* () {
     const appContainer = document.getElementById(CLIENT_CONTAINER_ID);
-    view.renderApp({
+    yield view.renderApp({
         app: app.getPublicAPI(),
         appData,
         appContainer
     });
-};
+});
 const run = () => __awaiter(void 0, void 0, void 0, function* () {
     yield app.init();
-    render();
+    yield render();
 });
-export { run };
+export { run, app };
 if (module.hot) {
     const handleHotUpdate = () => __awaiter(void 0, void 0, void 0, function* () {
         const rerender = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -55,3 +55,10 @@ if (module.hot) {
     });
     module.hot.accept(['@shuvi/app/files/routes'], handleHotUpdate);
 }
+// For e2e test
+if (window.__SHUVI) {
+    window.__SHUVI.router = app.router;
+}
+else {
+    window.__SHUVI = { router: app.router };
+}

package/esm/shuvi-app/entry/client/index.js

@@ -1,5 +1,5 @@
 // shuvi built-in entry
-// IMPORTANT: there files must be runned before any other codes
+// IMPORTANT: there files must be run before any other codes
 import './setup-env';
 // user entry
 import '@shuvi/app/core/entry';

package/esm/shuvi-app/entry/client/run.dev.js

@@ -8,23 +8,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 /// <reference lib="dom" />
-import { DEV_STYLE_HIDE_FOUC, DEV_STYLE_PREPARE } from '@shuvi/shared/lib/constants';
-import initWebpackHMR from '../../dev/webpackHotDevClient';
-import { run } from './app';
+import { DEV_STYLE_HIDE_FOUC } from '@shuvi/shared/lib/constants';
+import { initHMRAndDevClient } from '../../dev';
+import { run, app } from './app';
+function applyStyle() {
+    document
+        .querySelectorAll(`[${DEV_STYLE_HIDE_FOUC}]`)
+        .forEach(el => { var _a; return (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(el); });
+}
 function init() {
     return __awaiter(this, void 0, void 0, function* () {
-        initWebpackHMR();
-        // reduce FOUC caused by style-loader
-        const styleReady = new Promise(resolve => {
-            (window.requestAnimationFrame || setTimeout)(() => __awaiter(this, void 0, void 0, function* () {
-                yield window[DEV_STYLE_PREPARE];
-                document
-                    .querySelectorAll(`[${DEV_STYLE_HIDE_FOUC}]`)
-                    .forEach(el => { var _a; return (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(el); });
-                resolve();
-            }));
-        });
-        yield styleReady;
+        initHMRAndDevClient(app);
     });
 }
-init().then(run);
+init()
+    .then(() => run())
+    .finally(() => {
+    // reduce FOUC caused by style-loader
+    applyStyle();
+});

package/esm/shuvi-app/entry/server/index.d.ts

@@ -1,6 +1,7 @@
-import * as application from '../../app/server';
-import * as server from '@shuvi/app/user/server';
+import { default as pageRoutes } from '@shuvi/app/files/routes';
 import { default as apiRoutes } from '@shuvi/app/files/apiRoutes';
 import { default as middlewareRoutes } from '@shuvi/app/files/middlewareRoutes';
-export { server, application, apiRoutes, middlewareRoutes };
-export { view } from '@shuvi/app/core/platform';
+import { view } from '@shuvi/app/core/platform';
+import * as server from '@shuvi/app/user/server';
+import * as application from '../../app/server';
+export { pageRoutes, apiRoutes, middlewareRoutes, server, view, application };

package/esm/shuvi-app/entry/server/index.js

@@ -1,7 +1,8 @@
 // This is the shuvi server-side main module exports collection
-import * as application from '../../app/server';
-import * as server from '@shuvi/app/user/server';
+import { default as pageRoutes } from '@shuvi/app/files/routes';
 import { default as apiRoutes } from '@shuvi/app/files/apiRoutes';
 import { default as middlewareRoutes } from '@shuvi/app/files/middlewareRoutes';
-export { server, application, apiRoutes, middlewareRoutes };
-export { view } from '@shuvi/app/core/platform';
+import { view } from '@shuvi/app/core/platform';
+import * as server from '@shuvi/app/user/server';
+import * as application from '../../app/server';
+export { pageRoutes, apiRoutes, middlewareRoutes, server, view, application };

package/esm/shuvi-app/helper/serializeServerError.d.ts

@@ -0,0 +1,2 @@
+import { IError } from '@shuvi/platform-shared/shared';
+export declare function serializeServerError(err: Error): IError;

package/esm/shuvi-app/helper/serializeServerError.js

@@ -0,0 +1,21 @@
+// @ts-ignore
+import stripAnsi from 'strip-ansi';
+function errorToJSON(err) {
+    return {
+        code: 500,
+        message: stripAnsi(err.message),
+        name: err.name,
+        source: 'server',
+        stack: err.stack
+    };
+}
+export function serializeServerError(err) {
+    if (process.env.NODE_ENV === 'development') {
+        return errorToJSON(err);
+    }
+    return {
+        code: 500,
+        message: 'Internal Server Error',
+        name: 'Internal Server Error'
+    };
+}

package/esm/shuvi-app/react/AppContainer.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { IApplication } from '@shuvi/platform-shared/shared';
-export default function AppContainer({ children, app }: {
-    app: IApplication;
-    children: React.ReactElement;
-}): JSX.Element;
+import { Application } from '../../shared';
+export default function AppContainer({ app, children }: React.PropsWithChildren<{
+    app: Application;
+}>): JSX.Element;

package/esm/shuvi-app/react/AppContainer.jsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { errorModel } from '@shuvi/platform-shared/shared';
-import { createContainer } from '@shuvi/redox-react';
-import { AppProvider } from './applicationContext';
+import { AppProvider } from './ApplicationContext';
 import ErrorPage from './ErrorPage';
 import { ErrorBoundary } from './ErrorBoundary';
-const { Provider, useSharedModel } = createContainer();
+import { Provider, useSharedModel } from './store';
 function ErrorGuard({ children = null }) {
     const [errorState] = useSharedModel(errorModel);
     if (errorState.error !== undefined) {
@@ -12,10 +11,10 @@ function ErrorGuard({ children = null }) {
     }
     return <>{children}</>;
 }
-export default function AppContainer({ children, app }) {
+export default function AppContainer({ app, children }) {
     return (<ErrorBoundary>
       <AppProvider app={app}>
-        <Provider storeManager={app.storeManager}>
+        <Provider store={app.store}>
           <ErrorGuard>{children}</ErrorGuard>
         </Provider>
       </AppProvider>

package/esm/shuvi-app/react/ApplicationContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Application } from '../../shared';
+export declare const ApplicationContext: React.Context<Application>;
+export declare function AppProvider({ app, children }: React.PropsWithChildren<{
+    app: Application;
+}>): JSX.Element;
+export declare function useApp(): Application;

package/esm/shuvi-app/react/Error.jsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Head } from './head';
+import { useApp } from './ApplicationContext';
 const style = {
     container: {
         color: '#000',
@@ -25,13 +26,15 @@ const style = {
     }
 };
 export default function Error({ errorCode, errorDesc }) {
+    const app = useApp();
     return (<div style={style.container}>
       <Head>
         <title>Page Error</title>
       </Head>
 
       <div style={style.error}>
-        <div style={style.errorCode}>{errorCode}</div>
+        {/* 500 will cause confusion for SPA application, so only show error code on SSR */}
+        {app.config.ssr && <div style={style.errorCode}>{errorCode}</div>}
         <div style={style.errorDesc}>{errorDesc || 'Error'}</div>
       </div>
     </div>);