From f15fb1891f089bf2fed0a6ae11d484236df0af9d Mon Sep 17 00:00:00 2001 From: "dm.choi" Date: Wed, 29 Jul 2026 00:36:43 +0900 Subject: [PATCH] docs(bridge): clarify lazy component error handling --- .../docs/en/guide/bridge/react/load-component.mdx | 8 +++++--- .../docs/pt-BR/guide/bridge/react/load-component.mdx | 8 +++++--- .../docs/zh/guide/bridge/react/load-component.mdx | 8 +++++--- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/apps/website-new/docs/en/guide/bridge/react/load-component.mdx b/apps/website-new/docs/en/guide/bridge/react/load-component.mdx index c2610253ec8..a8d132e08c2 100644 --- a/apps/website-new/docs/en/guide/bridge/react/load-component.mdx +++ b/apps/website-new/docs/en/guide/bridge/react/load-component.mdx @@ -2,9 +2,9 @@ This chapter introduces how to use `createLazyComponent` to load remote React components on demand in a host application. -`createLazyComponent` is a higher-level loading API for React component scenarios. Compared with directly loading a module and wiring up `React.lazy`, `Suspense`, and error boundaries yourself, it builds those pieces into the API and additionally provides: +`createLazyComponent` is a higher-level loading API for React component scenarios. Compared with directly loading a module and wiring up `React.lazy` and `Suspense` yourself, it builds those pieces into the API and additionally provides: -- **Declarative loading and fallback**: no need to manually wrap `React.Suspense` and error boundaries +- **Declarative loading and failure fallback**: handles the loading state with `React.Suspense` and provides fallback UI for remote module loading or data-fetch failures - **Data prefetching**: use `prefetch` to start dependency requests before the component loads, avoiding request waterfalls where data is requested only after the component is ready - **SSR control**: precisely control whether remote components render on the server, helping avoid CSS flickering issues @@ -181,7 +181,9 @@ Sets the delay time for displaying loading state in milliseconds. If the loading - Required: Yes - Default: `undefined` -The error component rendered when component **loading** or **rendering** fails. +The error component rendered when remote module loading or data fetching fails. + +It does not catch errors thrown while React renders the loaded component or its descendants. To handle client-side render errors, wrap the lazy component in an Error Boundary in the host application. Server-rendering errors must be handled by the server rendering pipeline because React Error Boundaries do not catch them. #### export diff --git a/apps/website-new/docs/pt-BR/guide/bridge/react/load-component.mdx b/apps/website-new/docs/pt-BR/guide/bridge/react/load-component.mdx index 6bbcc925adf..84b2966e9dd 100644 --- a/apps/website-new/docs/pt-BR/guide/bridge/react/load-component.mdx +++ b/apps/website-new/docs/pt-BR/guide/bridge/react/load-component.mdx @@ -2,9 +2,9 @@ Este chapter introduces como para usar `createLazyComponent` para carregar remote React componentes on demand em uma aplicação host. -`createLazyComponent` é uma higher-level carregamento API for React componente scenarios. Compared com diretamente carregamento um módulo e wiring up `React.lazy`, `Suspense`, e erro boundaries yourself, it builds those pieces no API e additionally fornece: +`createLazyComponent` é uma API de carregamento de alto nível para cenários com componentes React. Em comparação com carregar um módulo diretamente e configurar `React.lazy` e `Suspense` manualmente, ela incorpora esses recursos à API e também oferece: -- **Declarative carregamento e fallback**: no precisa manually wrap `React.Suspense` e erro boundaries +- **Carregamento declarativo e fallback de erro**: gerencia o estado de carregamento com `React.Suspense` e fornece um fallback para falhas ao carregar o módulo remoto ou buscar dados - **Dados prefetching**: use `prefetch` para começa dependência requests antes o componente carrega, avoiding request waterfalls onde dados é requested apenas depois o componente é ready - **SSR control**: precisely control whether remote componentes render no servidor, helping avoid CSS flickering issues @@ -181,7 +181,9 @@ Sets o delay time for displaying estado de carregamento em milliseconds. Se o ca - Obrigatório: Yes - Padrão: `undefined` -O erro componente rendered quando componente **carregamento** ou **renderização** fails. +O componente de erro renderizado quando o carregamento do módulo remoto ou a busca de dados falha. + +Ele não captura erros lançados durante a renderização React do componente carregado ou de seus descendentes. Para tratar erros de renderização no cliente, envolva o componente lazy em um Error Boundary no aplicativo host. Erros de renderização no servidor devem ser tratados pelo pipeline de renderização do servidor, pois Error Boundaries do React não os capturam. #### exporte diff --git a/apps/website-new/docs/zh/guide/bridge/react/load-component.mdx b/apps/website-new/docs/zh/guide/bridge/react/load-component.mdx index e84e62565c8..872f6acc7c5 100644 --- a/apps/website-new/docs/zh/guide/bridge/react/load-component.mdx +++ b/apps/website-new/docs/zh/guide/bridge/react/load-component.mdx @@ -2,9 +2,9 @@ 本章介绍如何使用 `createLazyComponent` 在宿主应用中按需加载远程 React 组件。 -`createLazyComponent` 是面向 React 组件场景的高阶加载方式。相比直接使用模块后再自己接 `React.lazy` / `Suspense` / 错误边界，它把这些工作内置在 API 中，并额外提供： +`createLazyComponent` 是面向 React 组件场景的高阶加载方式。相比直接加载模块后再自行接入 `React.lazy` 与 `Suspense`，它把这些能力内置在 API 中，并额外提供： -- **声明式 loading 与 fallback**：无需手动包 `React.Suspense` 与错误边界 +- **声明式 loading 与失败 fallback**：通过 `React.Suspense` 处理 loading 状态，并为远程模块加载或数据获取失败提供 fallback - **数据预取**：配合 `prefetch` 在组件加载前发起依赖请求，避免组件就绪后才串行请求数据带来的瀑布 - **SSR 控制**：可精细控制远程组件是否在服务端渲染，避免出现 CSS 闪烁问题 @@ -182,7 +182,9 @@ export default App; - 是否必填：是 - 默认值：`undefined` -当组件**加载**或**渲染**失败时，所渲染的容错组件。 +远程模块加载或数据获取失败时所渲染的容错组件。 + +它不会捕获已加载组件或其后代在 React 渲染期间抛出的错误。若要处理客户端渲染错误，请在宿主应用中使用 Error Boundary 包裹该懒加载组件。服务端渲染错误需要由服务端渲染流程处理，因为 React Error Boundary 无法捕获这类错误。 #### export