feat(ssr): support for loaderFailureMode configure (#5820)

web-infra-dev · Jun 17, 2024 · 9da873c · 9da873c
1 parent 15a090c
commit 9da873c
Show file tree

Hide file tree

Showing 25 changed files with 112 additions and 60 deletions.
diff --git a/.changeset/twenty-pots-cross.md b/.changeset/twenty-pots-cross.md
@@ -0,0 +1,8 @@
+---
+'@modern-js/plugin-data-loader': minor
+'@modern-js/runtime': minor
+'@modern-js/app-tools': minor
+---
+
+feat(ssr): support for loaderFailureMode configure
+feat(ssr): 支持 loaderFailureMode 配置
diff --git a/packages/cli/plugin-data-loader/src/cli/createRequest.ts b/packages/cli/plugin-data-loader/src/cli/createRequest.ts
@@ -49,6 +49,20 @@ const handleDeferredResponse = async (res: Response) => {
   return res;
 };
 
+const isErrorResponse = (res: Response) => {
+  return res.headers.get('X-Modernjs-Error') != null;
+};
+
+const handleErrorResponse = async (res: Response) => {
+  if (isErrorResponse(res)) {
+    const data = await res.json();
+    const error = new Error(data.message);
+    error.stack = data.stack;
+    throw error;
+  }
+  return res;
+};
+
 export const createRequest = (routeId: string, method = 'get') => {
   return async ({
     params,
@@ -63,11 +77,11 @@ export const createRequest = (routeId: string, method = 'get') => {
       method,
       signal: request.signal,
     });
-    if (!res.ok) {
-      throw res;
-    }
+
     res = handleRedirectResponse(res);
+    res = await handleErrorResponse(res);
     res = await handleDeferredResponse(res);
+
     return res;
   };
 };

diff --git a/packages/document/main-doc/docs/en/configure/app/server/ssr.mdx b/packages/document/main-doc/docs/en/configure/app/server/ssr.mdx
@@ -32,6 +32,8 @@ When the value type is `Object`, the following properties can be configured:
   However, if developers want to reduce one rendering when there is no use of the useLoader API in your project, you can set the configuration `disablePrerender=true`.
 - `unsafeHeaders`: `string[] = []`, For safety reasons, Modern.js does not add excessive content to SSR_DATA. Developers can use this configuration to specify the headers that need to be injected.
 - `scriptLoading`: `'defer' | 'blocking' | 'module' | 'async'`, The configuration is the same as [html.scriptLoading](/configure/app/html/script-loading), supporting SSR injected script set to `async` loading. The priority is `ssr.scriptLoading` > `html.scriptLoading`.
+- `loaderFailureMode`: `'clientRender' | 'errorBoundary'`, The default configuration is `'errorBoundary'`, when an error occurs in [data loader](/en/guides/basic-features/data/data-fetch.html#data-loader-recommended),
+it will default to rendering the [`Error`](/en/guides/basic-features/routes.html#errorboundary) component of the route. When configured as `'clientRender'`, if a loader throws an error, it switch to client-side rendering，you can use it with [Client Loader](/en/guides/basic-features/data/data-fetch.html#client-loader).
 
 ```ts title="modern.config.ts"
 export default defineConfig({

diff --git a/packages/document/main-doc/docs/zh/configure/app/server/ssr.mdx b/packages/document/main-doc/docs/zh/configure/app/server/ssr.mdx
@@ -32,6 +32,8 @@ export default defineConfig({
   开发者在保证项目中没有使用 useLoader Api 情况下, 可通过配置 `disablePrerender=true`来减少一次渲染。
 - `unsafeHeaders`: `string[] = []`, 为了安全考虑，Modern.js 不会往 SSR_DATA 添加过多的内容。开发者可以通过该配置，对需要注入的 headers 进行配置。
 - `scriptLoading`: `'defer' | 'blocking' | 'module' | 'async'`, 配置同 [html.scriptLoading](/configure/app/html/script-loading)，支持 ssr 注入的 script 设置为 async 加载方式。优先级为 `ssr.scriptLoading` > `html.scriptLoading`
+- `loaderFailureMode`: `'clientRender' | 'errorBoundary'`, 默认配置为 `'errorBoundary'`，当 [data loader](/guides/basic-features/data/data-fetch.html#data-loader推荐) 中出错时，默认会渲染路由 [`Error`](/guides/basic-features/routes.html#错误处理) 组件，
+配置为 `'clientRender'` 时，有一个 data loader 抛错，就降级到客户端渲染，可以与 [Client Loader](/guides/basic-features/data/data-fetch.html#client-loader) 配合使用。
 
 ```ts title="modern.config.ts"
 export default defineConfig({

diff --git a/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx b/packages/runtime/plugin-runtime/src/router/runtime/plugin.node.tsx
@@ -79,7 +79,12 @@ export const routerPlugin = ({
             return next({ context });
           }
 
-          const { request, mode: ssrMode, nonce } = context.ssrContext!;
+          const {
+            request,
+            mode: ssrMode,
+            nonce,
+            loaderFailureMode = 'errorBoundary',
+          } = context.ssrContext!;
           const baseUrl = originalBaseUrl || (request.baseUrl as string);
           const _basename =
             baseUrl === '/' ? urlJoin(baseUrl, basename) : baseUrl;
@@ -125,6 +130,15 @@ export const routerPlugin = ({
             return routerContext as any;
           }
 
+          if (
+            routerContext.statusCode >= 500 &&
+            routerContext.statusCode < 600 &&
+            loaderFailureMode === 'clientRender'
+          ) {
+            routerContext.statusCode = 200;
+            throw (routerContext.errors as Error[])[0];
+          }
+
           const router = createStaticRouter(routes, routerContext);
           context.remixRouter = router;
           context.routerContext = routerContext;

diff --git a/packages/runtime/plugin-runtime/src/ssr/index.node.tsx b/packages/runtime/plugin-runtime/src/ssr/index.node.tsx
@@ -25,6 +25,7 @@ export const ssr = (config: SSRPluginConfig = {}): Plugin => ({
         context.ssrContext!.request = formatServer(request);
         context.ssrContext!.mode = config.mode;
         context.ssrContext!.tracker = createSSRTracker(context.ssrContext!);
+        context.ssrContext!.loaderFailureMode = config.loaderFailureMode;
 
         if (!context.ssrContext!.htmlModifiers) {
           context.ssrContext!.htmlModifiers = [];

diff --git a/packages/runtime/plugin-runtime/src/ssr/serverRender/types.ts b/packages/runtime/plugin-runtime/src/ssr/serverRender/types.ts
@@ -21,6 +21,8 @@ export type RenderResult = {
   };
 };
 
+type LoaderFailureMode = 'clientRender' | 'errorBoundary';
+
 export type SSRServerContext = BaseSSRServerContext & {
   request: BaseSSRServerContext['request'] & {
     userAgent: string;
@@ -29,6 +31,7 @@ export type SSRServerContext = BaseSSRServerContext & {
   };
   htmlModifiers: BuildHtmlCb[];
   tracker: SSRTracker;
+  loaderFailureMode?: 'clientRender' | 'errorBoundary';
 };
 export type ModernSSRReactComponent = React.ComponentType<any>;
 export { RuntimeContext };
@@ -39,6 +42,7 @@ export type SSRPluginConfig = {
   enableInlineStyles?: boolean | RegExp;
   enableInlineScripts?: boolean | RegExp;
   disablePrerender?: boolean;
+  loaderFailureMode?: LoaderFailureMode;
   chunkLoadingGlobal?: string;
   unsafeHeaders?: string[];
 } & Exclude<ServerUserConfig['ssr'], boolean>;

diff --git a/packages/server/core/src/base/constants.ts b/packages/server/core/src/base/constants.ts
@@ -25,3 +25,4 @@ export enum ServerReportTimings {
 }
 
 export const X_RENDER_CACHE = 'x-render-cache';
+export const X_MODERNJS_RENDER = 'x-modernjs-render';
diff --git a/packages/server/core/src/base/middlewares/renderHandler/render.ts b/packages/server/core/src/base/middlewares/renderHandler/render.ts
@@ -13,7 +13,7 @@ import {
   ErrorDigest,
 } from '../../utils';
 import type { FallbackReason } from '../../../core/plugin';
-import { REPLACE_REG } from '../../../base/constants';
+import { REPLACE_REG, X_MODERNJS_RENDER } from '../../constants';
 import { Render } from '../../../core/render';
 import { dataHandler } from './dataHandler';
 import { Params, SSRRenderOptions, ssrRender } from './ssrRender';
@@ -263,6 +263,7 @@ function csrRender(html: string): Response {
     status: 200,
     headers: new Headers({
       'content-type': 'text/html; charset=UTF-8',
+      [X_MODERNJS_RENDER]: 'client',
     }),
   });
 }

diff --git a/packages/server/core/src/base/middlewares/renderHandler/ssrRender.ts b/packages/server/core/src/base/middlewares/renderHandler/ssrRender.ts
@@ -17,7 +17,7 @@ import {
   ServerManifest,
   ServerRender,
 } from '../../../core/server';
-import { X_RENDER_CACHE } from '../../constants';
+import { X_MODERNJS_RENDER, X_RENDER_CACHE } from '../../constants';
 import type * as streamPolyfills from '../../adapters/node/polyfills/stream';
 import type * as ssrCaheModule from './ssrCache';
 import { ServerTiming } from './serverTiming';
@@ -188,6 +188,8 @@ export async function ssrRender(
     responseProxy.headers.set(X_RENDER_CACHE, cacheStatus);
   }
 
+  responseProxy.headers.set(X_MODERNJS_RENDER, 'server');
+
   if (redirection.url) {
     const { headers } = responseProxy;
     headers.set('Location', redirection.url);

diff --git a/packages/server/core/src/types/config/server.ts b/packages/server/core/src/types/config/server.ts
@@ -43,6 +43,7 @@ export type SSR =
       disablePrerender?: boolean;
       unsafeHeaders?: string[];
       scriptLoading?: 'defer' | 'blocking' | 'module' | 'async';
+      loaderFailureMode?: 'clientRender' | 'errorBoundary';
     };
 
 export type SSRByEntries = Record<string, SSR>;

diff --git a/packages/solutions/app-tools/src/builder/shared/builderPlugins/adapterSSR.ts b/packages/solutions/app-tools/src/builder/shared/builderPlugins/adapterSSR.ts
@@ -213,6 +213,7 @@ function applyFilterEntriesBySSRConfig({
   entryNames.forEach(name => {
     if (
       !ssgEntries.includes(name) &&
+      !name.includes('server-loaders') &&
       ((ssr && ssrByEntries?.[name] === false) ||
         (!ssr && !ssrByEntries?.[name]))
     ) {

diff --git a/tests/integration/routes/modern.config.ts b/tests/integration/routes/modern.config.ts
@@ -22,12 +22,14 @@ export default defineConfig({
     disableTsChecker: true,
   },
   server: {
-    ssr: {
-      mode: 'stream',
-    },
     ssrByEntries: {
       one: false,
       two: false,
+      three: {
+        mode: 'stream',
+        disablePrerender: true,
+        loaderFailureMode: 'clientRender',
+      },
       four: false,
     },
   },

diff --git a/tests/integration/routes/src/three/routes/error.tsx b/tests/integration/routes/src/three/routes/error.tsx
@@ -0,0 +1,19 @@
+import { useRouteError, isRouteErrorResponse } from '@modern-js/runtime/router';
+
+export default function ErrorBoundary() {
+  const error = useRouteError();
+  if (isRouteErrorResponse(error)) {
+    return (
+      <div>
+        <div className="response-status">{error.status}</div>
+        <div className="response-content">{JSON.parse(error.data).message}</div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="error-content">
+        {(error as any).message || (error as any).data}
+      </div>
+    );
+  }
+}
diff --git a/tests/integration/routes/src/three/routes/error/error.tsx b/tests/integration/routes/src/three/routes/error/error.tsx
@@ -10,6 +10,10 @@ export default function ErrorBoundary() {
       </div>
     );
   } else {
-    return <div className="error-content">{(error as any).data}</div>;
+    return (
+      <div className="error-content">
+        {(error as any).message || (error as any).data}
+      </div>
+    );
   }
 }
diff --git a/tests/integration/routes/src/three/routes/error/loader/page.data.client.ts b/tests/integration/routes/src/three/routes/error/loader/page.data.client.ts
@@ -0,0 +1,3 @@
+export const loader = async () => {
+  return 'render by client loader';
+};
diff --git a/tests/integration/routes/src/three/routes/error/loader/page.data.ts b/tests/integration/routes/src/three/routes/error/loader/page.data.ts
@@ -0,0 +1,3 @@
+export const loader = () => {
+  throw new Error('loader error');
+};
diff --git a/tests/integration/routes/src/three/routes/error/loader/page.loader.ts b/tests/integration/routes/src/three/routes/error/loader/page.loader.ts
diff --git a/tests/integration/routes/src/three/routes/error/loader/page.tsx b/tests/integration/routes/src/three/routes/error/loader/page.tsx
@@ -1,11 +1,7 @@
-import { Outlet, useLoaderData } from '@modern-js/runtime/router';
+import { useLoaderData } from '@modern-js/runtime/router';
 
 export default function Page() {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const data = useLoaderData();
-  return (
-    <div>
-      <Outlet />
-    </div>
-  );
+  const data = useLoaderData() as string;
+
+  return <div className="error-loader-page">{data}</div>;
 }
diff --git a/tests/integration/routes/src/three/routes/user/layout.tsx b/tests/integration/routes/src/three/routes/user/layout.tsx
@@ -4,6 +4,7 @@ export default function Layout() {
   const data = useLoaderData() as {
     message: string;
   };
+
   return (
     <div>
       <span className="user-layout">{`${data?.message} layout`}</span>

diff --git a/tests/integration/routes/tests/index.test.ts b/tests/integration/routes/tests/index.test.ts
@@ -4,10 +4,7 @@ import puppeteer, { Browser } from 'puppeteer';
 import { fs, ROUTE_MANIFEST_FILE } from '@modern-js/utils';
 import { ROUTE_MANIFEST } from '@modern-js/utils/universal/constants';
 
-import type {
-  // Browser,
-  Page,
-} from 'puppeteer';
+import type { Page } from 'puppeteer';
 import {
   launchApp,
   killApp,
@@ -320,11 +317,11 @@ const supportHandleLoaderError = async (
   });
   await Promise.all([
     page.click('.loader-error-btn'),
-    page.waitForSelector('.error-case'),
+    page.waitForSelector('.error-loader-page'),
   ]);
-  const errorElm = await page.$('.error-case');
+  const errorElm = await page.$('.error-loader-page');
   const text = await page.evaluate(el => el?.textContent, errorElm);
-  expect(text?.includes('loader error')).toBeTruthy();
+  expect(text).toBe('render by client loader');
   expect(errors.length).toBe(0);
 };
 
@@ -469,7 +466,7 @@ const supportClientLoader = async (
   ]);
   const clientLoaderLayout = await page.$('.client-loader-layout');
   const text = await page.evaluate(el => el?.textContent, clientLoaderLayout);
-  expect(text?.includes('layout from client loader')).toBeTruthy();
+  expect(text).toBe('layout from client loader');
 
   const clientLoaderPage = await page.$('.client-loader-page');
   const text1 = await page.evaluate(el => el?.textContent, clientLoaderPage);
@@ -742,7 +739,7 @@ describe('dev', () => {
     test('support handle config', async () =>
       supportHandleConfig(page, appPort));
 
-    test.skip('support handle loader error', async () =>
+    test('support handle loader error', async () =>
       supportHandleLoaderError(page, errors, appPort));
   });
 
@@ -884,7 +881,7 @@ describe('build', () => {
     test('path without layout', async () =>
       supportPathWithoutLayout(page, errors, appPort));
 
-    test.skip('support handle loader error', async () =>
+    test('support handle loader error', async () =>
       supportHandleLoaderError(page, errors, appPort));
   });
 
@@ -1028,8 +1025,7 @@ describe('dev with rspack', () => {
     test('support handle config', async () =>
       supportHandleConfig(page, appPort));
 
-    // FIXME: skip the test
-    test.skip('support handle loader error', async () =>
+    test('support handle loader error', async () =>
       supportHandleLoaderError(page, errors, appPort));
   });
 
@@ -1175,7 +1171,7 @@ describe('build with rspack', () => {
     test('path without layout', async () =>
       supportPathWithoutLayout(page, errors, appPort));
 
-    test.skip('support handle loader error', async () =>
+    test('support handle loader error', async () =>
       supportHandleLoaderError(page, errors, appPort));
   });
 

diff --git a/tests/integration/ssr/fixtures/base-json/src/routes/error/error.tsx b/tests/integration/ssr/fixtures/base-json/src/routes/error/error.tsx
@@ -1,19 +1,11 @@
-import { isRouteErrorResponse, useRouteError } from '@modern-js/runtime/router';
+import { useRouteError } from '@modern-js/runtime/router';
 
 const ErrorBoundary = () => {
   const error = useRouteError() as Error;
   return (
     <div className="error">
       <h2>
-        {isRouteErrorResponse(error)
-          ? JSON.stringify({
-              status: error.status,
-              statusText: error.statusText,
-              data: {
-                messsage: error.data.message,
-              },
-            })
-          : error.message}
+        <h2>{error.message}</h2>
       </h2>
     </div>
   );

diff --git a/tests/integration/ssr/fixtures/base/src/routes/error/error.tsx b/tests/integration/ssr/fixtures/base/src/routes/error/error.tsx
@@ -1,20 +1,10 @@
-import { isRouteErrorResponse, useRouteError } from '@modern-js/runtime/router';
+import { useRouteError } from '@modern-js/runtime/router';
 
 const ErrorBoundary = () => {
   const error = useRouteError() as Error;
   return (
     <div className="error">
-      <h2>
-        {isRouteErrorResponse(error)
-          ? JSON.stringify({
-              status: error.status,
-              statusText: error.statusText,
-              data: {
-                messsage: error.data.message,
-              },
-            })
-          : error.message}
-      </h2>
+      <h2>{error.message}</h2>
     </div>
   );
 };

diff --git a/tests/integration/ssr/tests/__snapshots__/base-json.test.ts.snap b/tests/integration/ssr/tests/__snapshots__/base-json.test.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Traditional SSR in json data error thrown in client navigation 1`] = `"{"status":500,"statusText":"Internal Server Error","data":{"messsage":"error occurs"}}"`;
+exports[`Traditional SSR in json data error thrown in client navigation 1`] = `"error occurs"`;
diff --git a/tests/integration/ssr/tests/__snapshots__/base.test.ts.snap b/tests/integration/ssr/tests/__snapshots__/base.test.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Traditional SSR error thrown in client navigation 1`] = `"{"status":500,"statusText":"Internal Server Error","data":{"messsage":"error occurs"}}"`;
+exports[`Traditional SSR error thrown in client navigation 1`] = `"error occurs"`;