@shuvi/platform-web 1.0.21 → 1.0.23

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

@@ -13,7 +13,6 @@ import application from '@shuvi/platform-shared/shuvi-app/application';
 import { createRouter, createBrowserHistory, createHashHistory } from '@shuvi/router';
 import { historyMode } from '@shuvi/app/files/routerConfig';
 import { SHUVI_ERROR } from '@shuvi/shared/constants';
-import { serializeServerError } from '../helper/serializeServerError';
 import isThirdSite from '../helper/isThirdSite';
 let app;
 export const createApp = ({ routes, appData, appComponent }) => {
@@ -114,15 +113,22 @@ export const createApp = ({ routes, appData, appComponent }) => {
                 return;
             }
             if (isResponse(error) && error.status >= 400 && error.status < 600) {
+                // client error has no status code
                 app.setError({
-                    code: error.status,
                     message: error.data
                 });
                 next();
                 return;
             }
-            app.setError(serializeServerError(error));
-            next();
+            // If loader throws a error, we need to rethrow it
+            app.setError({
+                message: SHUVI_ERROR.CLIENT_ERROR.message,
+                error
+            });
+            // to trigger error-overlay at dev
+            next(() => {
+                throw error;
+            });
             return;
         }
         next(() => {

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

@@ -1,12 +1,16 @@
 // @ts-ignore
 import stripAnsi from 'strip-ansi';
+import { SHUVI_ERROR } from '@shuvi/shared/constants';
 function errorToJSON(err) {
     return {
         code: 500,
         message: stripAnsi(err.message),
-        name: err.name,
         source: 'server',
-        stack: err.stack
+        error: {
+            name: err.name,
+            stack: err.stack,
+            message: err.message
+        }
     };
 }
 export function serializeServerError(err) {
@@ -15,7 +19,6 @@ export function serializeServerError(err) {
     }
     return {
         code: 500,
-        message: 'Internal Server Error',
-        name: 'Internal Server Error'
+        message: SHUVI_ERROR.SERVER_ERROR.message
     };
 }

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

@@ -5,10 +5,10 @@ import ErrorPage from './ErrorPage';
 import { ErrorBoundary } from './ErrorBoundary';
 import { Provider, useSharedModel } from './store';
 function ErrorGuard({ children = null }) {
-    var _a, _b;
     const errorState = useSharedModel(errorModelName, errorModel);
-    if (errorState.hasError) {
-        return (<ErrorPage code={(_a = errorState.error) === null || _a === void 0 ? void 0 : _a.code} message={(_b = errorState.error) === null || _b === void 0 ? void 0 : _b.message}/>);
+    const { error, hasError } = errorState;
+    if (hasError) {
+        return (<ErrorPage code={error === null || error === void 0 ? void 0 : error.code} message={error === null || error === void 0 ? void 0 : error.message} error={error === null || error === void 0 ? void 0 : error.error}/>);
     }
     return <>{children}</>;
 }

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

@@ -2,4 +2,5 @@
 export default function Error({ errorCode, errorDesc }: {
     errorCode?: number;
     errorDesc?: string;
+    error?: Error;
 }): JSX.Element;

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Head } from './head';
-import { useApp } from './ApplicationContext';
 const style = {
     container: {
         color: '#000',
@@ -15,26 +14,24 @@ const style = {
     error: { display: 'flex', alignItems: 'center', justifyContent: 'center' },
     errorCode: {
         fontSize: '24px',
-        fontWeight: 500
+        fontWeight: 500,
+        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
+        paddingRight: '20px',
+        marginRight: '20px'
     },
     errorDesc: {
         fontSize: '16px',
-        lineHeight: '1',
-        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-        paddingLeft: '20px',
-        marginLeft: '20px'
+        lineHeight: '1'
     }
 };
 export default function Error({ errorCode, errorDesc }) {
-    const app = useApp();
     return (<div style={style.container}>
       <Head>
         <title>Page Error</title>
       </Head>
 
       <div style={style.error}>
-        {/* 500 will cause confusion for SPA application, so only show error code on SSR */}
-        {app.config.ssr && <div style={style.errorCode}>{errorCode}</div>}
+        {errorCode !== undefined && (<div style={style.errorCode}>{errorCode}</div>)}
         <div style={style.errorDesc}>{errorDesc || 'Error'}</div>
       </div>
     </div>);

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

@@ -19,7 +19,7 @@ class ErrorBoundary extends React.PureComponent {
     render() {
         return this.state.error ? (
         // The component has to be unmounted or else it would continue to error
-        <ErrorPage code={SHUVI_ERROR.APP_ERROR.code} message={SHUVI_ERROR.APP_ERROR.message}/>) : this.props.children;
+        <ErrorPage message={SHUVI_ERROR.CLIENT_ERROR.message} error={this.state.error}/>) : this.props.children;
     }
 }
 export { ErrorBoundary };

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export default function ErrorPage({ code, message }: {
+export default function ErrorPage({ code, message, error }: {
     code?: number;
     message?: string;
+    error?: Error;
 }): JSX.Element;

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

@@ -2,6 +2,6 @@ import * as React from 'react';
 import error from './Error';
 import userError from '@shuvi/app/user/error';
 const Error = userError || error;
-export default function ErrorPage({ code, message }) {
-    return <Error errorCode={code} errorDesc={message}/>;
+export default function ErrorPage({ code, message, error }) {
+    return <Error errorCode={code} errorDesc={message} error={error}/>;
 }

package/esm/shuvi-app/react/view/ReactView.client.jsx

@@ -29,7 +29,7 @@ export class ReactClientView {
                     const { getServerError } = require('@shuvi/error-overlay');
                     if (appError && appError.source === 'server') {
                         setTimeout(() => {
-                            var _a;
+                            var _a, _b, _c;
                             let error;
                             try {
                                 // Generate a new error object. We `throw` it because some browsers
@@ -40,8 +40,8 @@ export class ReactClientView {
                             catch (e) {
                                 error = e;
                             }
-                            error.name = (_a = appError.name) !== null && _a !== void 0 ? _a : '';
-                            error.stack = appError.stack;
+                            error.name = (_b = (_a = appError.error) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '';
+                            error.stack = (_c = appError.error) === null || _c === void 0 ? void 0 : _c.stack;
                             throw getServerError(error);
                         });
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuvi/platform-web",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shuvijs/shuvi.git",
@@ -72,18 +72,18 @@
   },
   "dependencies": {
     "@next/react-refresh-utils": "12.1.6",
-    "@shuvi/error-overlay": "1.0.21",
-    "@shuvi/hook": "1.0.21",
-    "@shuvi/platform-shared": "1.0.21",
-    "@shuvi/router": "1.0.21",
-    "@shuvi/router-react": "1.0.21",
-    "@shuvi/runtime": "1.0.21",
-    "@shuvi/shared": "1.0.21",
-    "@shuvi/toolpack": "1.0.21",
-    "@shuvi/utils": "1.0.21",
+    "@shuvi/error-overlay": "1.0.23",
+    "@shuvi/hook": "1.0.23",
+    "@shuvi/platform-shared": "1.0.23",
+    "@shuvi/router": "1.0.23",
+    "@shuvi/router-react": "1.0.23",
+    "@shuvi/runtime": "1.0.23",
+    "@shuvi/shared": "1.0.23",
+    "@shuvi/toolpack": "1.0.23",
+    "@shuvi/utils": "1.0.23",
     "content-type": "1.0.4",
     "core-js": "3.6.5",
-    "doura": "0.0.9",
+    "doura": "0.0.11",
     "ejs": "3.1.5",
     "fs-extra": "9.0.1",
     "node-mocks-http": "1.11.0",
@@ -91,14 +91,14 @@
     "raw-body": "2.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-doura": "0.0.9",
+    "react-doura": "0.0.11",
     "react-refresh": "0.12.0",
     "strip-ansi": "6.0.0",
     "use-sync-external-store": "1.1.0",
     "whatwg-fetch": "3.0.0"
   },
   "peerDependencies": {
-    "@shuvi/service": "1.0.21"
+    "@shuvi/service": "1.0.23"
   },
   "devDependencies": {
     "@shuvi/service": "workspace:*",