fix: ctx.error with fatal options should work with the async loader f…

…unction (#580)

Co-authored-by: Michael <[email protected]>

CONTRIBUTING.md

@@ -49,6 +49,16 @@ configuring for webpack, babel, etc.
 
 Type definitions for shuvi.
 
+## Prerequisites
+
+### Install cargo
+
+```bash
+$ curl https://sh.rustup.rs -sSf | sh
+```
+
+> docs: https://doc.rust-lang.org/cargo/getting-started/installation.html
+
 ## Setting Up a Local Copy
 
 1. Clone the repo with `git clone https://github.com/liximomo/shuvi`

packages/platform-web/src/shuvi-app/react/view/ReactView.server.tsx

@@ -19,12 +19,7 @@ export class ReactServerView implements IReactServerView {
   renderApp: IReactServerView['renderApp'] = async ({ req, app, manifest }) => {
     await Loadable.preloadAll();
 
-    const {
-      router,
-      appComponent: AppComponent,
-      setError: setAppError,
-      error
-    } = app;
+    const { router, appComponent: AppComponent, setError: setAppError } = app;
     await router.ready;
 
     // todo: move these into renderer
@@ -34,8 +29,17 @@ export class ReactServerView implements IReactServerView {
       setAppError(SHUVI_ERROR.PAGE_NOT_FOUND);
     }
 
-    if (error && error.fatal) {
-      return response('', { status: error.code, statusText: error.message });
+    /**
+     * @Note Please note that you should not use `error` directly, please
+     * use `app.error` instead.
+     *    ❌ if (error && error.fatal)
+     *    ✅ if (app.error && app.error.fatal)
+     */
+    if (app.error && app.error.fatal) {
+      return response('', {
+        status: app.error.code,
+        statusText: app.error.message
+      });
     }
 
     if (redirected) {

test/fixtures/loader/src/routes/fatal-error/page.tsx

@@ -1,7 +1,16 @@
 import React from 'react';
 import { Loader } from '@shuvi/runtime';
 
+async function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 export const loader: Loader<any> = async ctx => {
+  /**
+   * Add a delay to verify the fatal error handling should work as
+   * expected.
+   */
+  await sleep(100);
   ctx.error('Not Found', 404, { fatal: true });
   return null;
 };