@modern-js/main-doc 0.0.0-nightly-20240530170619 → 0.0.0-nightly-20240531170650

package/docs/en/guides/basic-features/data/data-fetch.mdx

@@ -155,6 +155,8 @@ function loader() {
 
 ### Error Handling
 
+#### Basic Usage
+
 In the `loader` function, errors can be handled by throwing an `error` or a `response`. When an error is thrown in the `loader` function, Modern.js will stop executing the code in the current `loader` and switch the front-end UI to the defined [`ErrorBoundary`](/guides/basic-features/routes#error-handling) component:
 
 ```tsx
@@ -182,6 +184,32 @@ const ErrorBoundary = () => {
 export default ErrorBoundary;
 ```
 
+#### Practice
+
+In an SSR project you can control the status code of a page and display the corresponding UI by `throw response` in the data loader, as in the following example, where there is one loader for the entire routing route
+
+For example, if there is a loader in the entire routing route that throws a response, the status code of the page will be consistent with this `response` and the UI of the page will switch to `ErrorBoundary`.
+
+```ts
+// routes/user/profile/page.data.ts
+export async function loader() {
+  const user = await fetchUser();
+  if(!user){
+    throw new Response('The user was not found', { status: 404 });
+  }
+  return user;
+}
+
+// routes/error.tsx
+import { useRouteError } from '@modern-js/runtime/router';
+const ErrorBoundary = () => {
+  const error = useRouteError() as { data: string };
+  return <div className="error">{error.data}</div>;
+};
+
+export default ErrorBoundary;
+```
+
 ### Get data from parent component
 
 In many cases, child components need to access data in the parent component `loader`. You can easily get the data from the parent component using `useRouteLoaderData`:

package/docs/zh/guides/basic-features/data/data-fetch.mdx

@@ -155,6 +155,8 @@ export async function loader() {
 
 ### 错误处理
 
+#### 基本用法
+
 在 `loader` 函数中，可以通过 `throw error` 或者 `throw response` 的方式处理错误，当 `loader` 函数中有错误被抛出时，Modern.js 会停止执行当前 `loader` 中的代码，并将前端 UI 切换到定义的 [`ErrorBoundary`](/guides/basic-features/routes#错误处理) 组件：
 
 ```tsx
@@ -182,6 +184,31 @@ const ErrorBoundary = () => {
 export default ErrorBoundary;
 ```
 
+#### 实践
+
+在 SSR 项目中你可以通过在 data loader 中 `throw response` 的方式，控制页面的状态码，展示对应的 UI，如以下示例，整条路由路线中有一个 loader
+throw response，页面的状态码将与这个 `response` 保持一致，页面的 UI 也会切换为 `ErrorBoundary`:
+
+```ts
+// routes/user/profile/page.data.ts
+export async function loader() {
+  const user = await fetchUser();
+  if(!user){
+    throw new Response('The user was not found', { status: 404 });
+  }
+  return user;
+}
+
+// routes/error.tsx
+import { useRouteError } from '@modern-js/runtime/router';
+const ErrorBoundary = () => {
+  const error = useRouteError() as { data: string };
+  return <div className="error">{error.data}</div>;
+};
+
+export default ErrorBoundary;
+```
+
 ### 获取上层组件的数据
 
 很多场景下，子组件需要获取到祖先组件 `loader` 中的数据，你可以通过 `useRouteLoaderData` 方便地获取到祖先组件的数据：
@@ -385,8 +412,6 @@ export const loader = () => {}
 ```
 
 
-
-
 ### 错误用法
 
 1. `loader` 中只能返回可序列化的数据，在 SSR 环境下，`loader` 函数的返回值会被序列化为 JSON 字符串，然后在客户端被反序列化为对象。因此，`loader` 函数中不能返回不可序列化的数据（如函数）。

package/package.json

@@ -15,17 +15,17 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-nightly-20240530170619",
+  "version": "0.0.0-nightly-20240531170650",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "dependencies": {
-    "@modern-js/sandpack-react": "0.0.0-nightly-20240530170619"
+    "@modern-js/sandpack-react": "0.0.0-nightly-20240531170650"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-nightly-20240530170619"
+    "@modern-js/builder-doc": "0.0.0-nightly-20240531170650"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -39,8 +39,8 @@
     "@rspress/shared": "1.18.2",
     "@types/node": "^16",
     "@types/fs-extra": "9.0.13",
-    "@modern-js/builder-doc": "0.0.0-nightly-20240530170619",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240530170619"
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240531170650",
+    "@modern-js/builder-doc": "0.0.0-nightly-20240531170650"
   },
   "scripts": {
     "dev": "rspress dev",