From c0af2d01cba44225dece12fa9e71476ce30a4af3 Mon Sep 17 00:00:00 2001 From: Johanna Kveton Date: Wed, 29 Oct 2025 19:49:24 +0100 Subject: [PATCH 1/4] Add note on error boundary limitations (#8108) --- src/content/reference/react/Component.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 9d2d1007b..2509aa759 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1271,6 +1271,16 @@ We recommend defining components as functions instead of classes. [See how to mi By default, if your application throws an error during rendering, React will remove its UI from the screen. To prevent this, you can wrap a part of your UI into an *Error Boundary*. An Error Boundary is a special component that lets you display some fallback UI instead of the part that crashed--for example, an error message. + +Error boundaries do not catch errors for: + +- Event handlers [(learn more)](/learn/responding-to-events) +- [Server side rendering](/reference/react-dom/server) +- Errors thrown in the error boundary itself (rather than its children) +- Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks); an exception is the usage of the [`startTransition`](/reference/react/useTransition#starttransition) function returned by the [`useTransition`](/reference/react/useTransition) Hook. Errors thrown inside the transition function are caught by error boundaries [(learn more)](/reference/react/useTransition#displaying-an-error-to-users-with-error-boundary) + + + To implement an Error Boundary component, you need to provide [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. You can also optionally implement [`componentDidCatch`](#componentdidcatch) to add some extra logic, for example, to log the error to an analytics service. With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development. From e57e9122852b5c64129dd71b5beb1e982be6708d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=8A=B9=EC=A7=84?= Date: Fri, 31 Oct 2025 20:04:05 +0900 Subject: [PATCH 2/4] docs(blog): Add 'React 19.2' to blog sidebar (#8113) --- src/sidebarBlog.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index 7bcd4a000..3497fdd0b 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -32,6 +32,13 @@ "date": "October 7, 2025", "path": "/blog/2025/10/07/introducing-the-react-foundation" }, + { + "title": "React 19.2", + "titleForHomepage": "React 19.2", + "icon": "blog", + "date": "October 1, 2025", + "path": "/blog/2025/10/01/react-19-2" + }, { "title": "React Labs: View Transitions, Activity, and more", "titleForHomepage": "View Transitions and Activity", From f9e2c1396769bb5da87db60f9ff03683d18711e2 Mon Sep 17 00:00:00 2001 From: Joshua Comeau Date: Sat, 1 Nov 2025 00:11:49 -0400 Subject: [PATCH 3/4] Remove 'esquery' hack to potentially enable Turbopack (#8115) * Remove esquery hack * Add comment explaining next.config change --- next.config.js | 8 ++++++++ src/components/MDX/Sandpack/runESLint.tsx | 7 ------- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/next.config.js b/next.config.js index 5a5755307..fe88a09a0 100644 --- a/next.config.js +++ b/next.config.js @@ -36,6 +36,14 @@ const nextConfig = { // Don't bundle the shim unnecessarily. config.resolve.alias['use-sync-external-store/shim'] = 'react'; + // ESLint depends on the CommonJS version of esquery, + // but Webpack loads the ESM version by default. This + // alias ensures the correct version is used. + // + // More info: + // https://github.com/reactjs/react.dev/pull/8115 + config.resolve.alias['esquery'] = 'esquery/dist/esquery.min.js'; + const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack'); config.plugins.push( new NormalModuleReplacementPlugin( diff --git a/src/components/MDX/Sandpack/runESLint.tsx b/src/components/MDX/Sandpack/runESLint.tsx index a0b835461..667b22d7e 100644 --- a/src/components/MDX/Sandpack/runESLint.tsx +++ b/src/components/MDX/Sandpack/runESLint.tsx @@ -21,13 +21,6 @@ const getCodeMirrorPosition = ( const linter = new Linter(); -// HACK! Eslint requires 'esquery' using `require`, but there's no commonjs interop. -// because of this it tries to run `esquery.parse()`, while there's only `esquery.default.parse()`. -// This hack places the functions in the right place. -const esquery = require('esquery'); -esquery.parse = esquery.default?.parse; -esquery.matches = esquery.default?.matches; - const reactRules = require('eslint-plugin-react-hooks').rules; linter.defineRules({ 'react-hooks/rules-of-hooks': reactRules['rules-of-hooks'], From c09592145c84c0789211844411a008251884e4b0 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Tue, 4 Nov 2025 19:42:58 +0900 Subject: [PATCH 4/4] Resolve conflicts --- src/content/reference/react/Component.md | 16 ++++++---------- src/sidebarBlog.json | 9 ++------- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index f23e8da4f..5ee7a6a84 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1271,21 +1271,17 @@ button { margin-left: 10px; } デフォルトでは、アプリケーションがレンダー中にエラーをスローすると、React はその UI を画面から削除します。これを防ぐために、UI を*エラーバウンダリ*にラップすることができます。エラーバウンダリは、クラッシュした部位の代わりに、例えばエラーメッセージなどのフォールバック UI を表示するための、特別なコンポーネントです。 -<<<<<<< HEAD -エラーバウンダリコンポーネントを実装するためには、エラーに反応して state を更新し、ユーザにエラーメッセージを表示するための [`static getDerivedStateFromError`](#static-getderivedstatefromerror) を提供する必要があります。またオプションで、例えばエラーを分析サービスに記録するなどの追加のロジックを追加するために [`componentDidCatch`](#componentdidcatch) を実装することもできます。 -======= -Error boundaries do not catch errors for: +以下の場合、エラーバウンダリはエラーをキャッチしません。 -- Event handlers [(learn more)](/learn/responding-to-events) -- [Server side rendering](/reference/react-dom/server) -- Errors thrown in the error boundary itself (rather than its children) -- Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks); an exception is the usage of the [`startTransition`](/reference/react/useTransition#starttransition) function returned by the [`useTransition`](/reference/react/useTransition) Hook. Errors thrown inside the transition function are caught by error boundaries [(learn more)](/reference/react/useTransition#displaying-an-error-to-users-with-error-boundary) +- イベントハンドラ[（詳細）](/learn/responding-to-events) +- [サーバサイドレンダリング](/reference/react-dom/server) +- エラーバウンダリ自身（子ではなく）でスローされたエラー +- 非同期コード（例えば `setTimeout` や `requestAnimationFrame` のコールバック）。ただし [`useTransition`](/reference/react/useTransition) フックが返す [`startTransition`](/reference/react/useTransition#starttransition) 関数の使用は例外です。トランジション関数内でスローされたエラーはエラーバウンダリでキャッチされます[（詳細）](/reference/react/useTransition#displaying-an-error-to-users-with-error-boundary)。 -To implement an Error Boundary component, you need to provide [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. You can also optionally implement [`componentDidCatch`](#componentdidcatch) to add some extra logic, for example, to log the error to an analytics service. ->>>>>>> f9e2c1396769bb5da87db60f9ff03683d18711e2 +エラーバウンダリコンポーネントを実装するためには、エラーに反応して state を更新し、ユーザにエラーメッセージを表示するための [`static getDerivedStateFromError`](#static-getderivedstatefromerror) を提供する必要があります。またオプションで、例えばエラーを分析サービスに記録するなどの追加のロジックを追加するために [`componentDidCatch`](#componentdidcatch) を実装することもできます。 [`captureOwnerStack`](/reference/react/captureOwnerStack) を使うことで開発中にオーナーのスタックトレースを含めることが可能です。 diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index a7cdee369..46b8f719d 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -33,10 +33,6 @@ "path": "/blog/2025/10/07/introducing-the-react-foundation" }, { -<<<<<<< HEAD - "title": "React Labs: ビュー遷移、Activity、その他もろもろ", - "titleForHomepage": "ビュー遷移と Activity", -======= "title": "React 19.2", "titleForHomepage": "React 19.2", "icon": "blog", @@ -44,9 +40,8 @@ "path": "/blog/2025/10/01/react-19-2" }, { - "title": "React Labs: View Transitions, Activity, and more", - "titleForHomepage": "View Transitions and Activity", ->>>>>>> f9e2c1396769bb5da87db60f9ff03683d18711e2 + "title": "React Labs: ビュー遷移、Activity、その他もろもろ", + "titleForHomepage": "ビュー遷移と Activity", "icon": "blog", "date": "April 23, 2025", "path": "/blog/2025/04/23/react-labs-view-transitions-activity-and-more"