From d24840eae752c7136f2fe5d6c7d7d5390fc1a937 Mon Sep 17 00:00:00 2001 From: mynolog Date: Fri, 8 Aug 2025 23:06:43 +0900 Subject: [PATCH 1/7] docs: translate 'Error logging in production' section of the hydrateRoot page --- .../reference/react-dom/client/createRoot.md | 14 ++++++------ .../reference/react-dom/client/hydrateRoot.md | 22 +++++++++---------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 8ccf5fab8..6bc90932d 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -373,8 +373,8 @@ const root = createRoot(container, { onCaughtError 옵션은 다음 두 개의 인자를 받는 함수입니다. -1. 발생한 error 객체입니다. -2. errorInfo 객체는 오류의 componentStack 정보를 포함합니다. +1. 발생한 error 객체 +2. componentStack 속성이 포함된 errorInfo 객체 `onUncaughtError`와 `onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다. @@ -382,8 +382,8 @@ const root = createRoot(container, { ```js src/reportError.js function reportError({ type, error, errorInfo }) { - // The specific implementation is up to you. - // `console.error()` is only used for demonstration purposes. + // 구체적인 구현은 여러분에게 맡깁니다. + // `console.error()`는 설명을 위한 용도입니다. console.error(type, error, "Component Stack: "); console.error("Component Stack: ", errorInfo.componentStack); } @@ -414,9 +414,9 @@ import { const container = document.getElementById("root"); const root = createRoot(container, { - // Keep in mind to remove these options in development to leverage - // React's default handlers or implement your own overlay for development. - // The handlers are only specfied unconditionally here for demonstration purposes. + // 개발 환경에서는 이 옵션들을 제거하고 + // React의 기본 핸들러를 사용하거나 직접 오버레이를 구현하는 것을 권장합니다. + // 여기서는 편의를 위해 조건 없이 핸들러를 지정했습니다. onCaughtError: onCaughtErrorProd, onRecoverableError: onRecoverableErrorProd, onUncaughtError: onUncaughtErrorProd, diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 004112fcf..3ac7ba430 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -370,9 +370,9 @@ export default function App({counter}) { Hydration된 루트에서 [`root.render`](#root-render)를 호출하는 것은 흔한 일은 아닙니다. 내부 컴포넌트 중 한 곳에서 [useState](/reference/react/useState)를 사용하는 것이 일반적입니다. -### Error logging in production {/*error-logging-in-production*/} +### 프로덕션 환경에서 오류 로깅하기 {/*error-logging-in-production*/} -By default, React will log all errors to the console. To implement your own error reporting, you can provide the optional error handler root options `onUncaughtError`, `onCaughtError` and `onRecoverableError`: +React는 기본적으로 모든 오류를 콘솔에 출력합니다. 사용자 정의 오류 보고 기능을 구현하기 위해서 `onUncaughtError`, `onCaughtError`, `onRecoverableError`와 같은 에러 핸들러 루트 옵션을 제공할 수 있습니다. ```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack", 15]] import { hydrateRoot } from "react-dom/client"; @@ -392,19 +392,19 @@ const root = hydrateRoot(container, , { }); ``` -The onCaughtError option is a function called with two arguments: +onCaughtError 옵션은 다음 두 개의 인자를 받는 함수입니다. -1. The error that was thrown. -2. An errorInfo object that contains the componentStack of the error. +1. 발생한 error 객체 +2. componentStack 속성이 포함된 errorInfo 객체 -Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system: +`onUncaughtError`와 `onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다. ```js src/reportError.js function reportError({ type, error, errorInfo }) { - // The specific implementation is up to you. - // `console.error()` is only used for demonstration purposes. + // 구체적인 구현은 여러분에게 맡깁니다. + // `console.error()`는 설명을 위한 용도입니다. console.error(type, error, "Component Stack: "); console.error("Component Stack: ", errorInfo.componentStack); } @@ -435,9 +435,9 @@ import { const container = document.getElementById("root"); hydrateRoot(container, , { - // Keep in mind to remove these options in development to leverage - // React's default handlers or implement your own overlay for development. - // The handlers are only specfied unconditionally here for demonstration purposes. + // 개발 환경에서는 이 옵션들을 제거하고 + // React의 기본 핸들러를 사용하거나 직접 오버레이를 구현하는 것을 권장합니다. + // 여기서는 편의를 위해 조건 없이 핸들러를 지정했습니다. onCaughtError: onCaughtErrorProd, onRecoverableError: onRecoverableErrorProd, onUncaughtError: onUncaughtErrorProd, From 6bfa4fc730127e9d039254cd5b334b66474bf9e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Fri, 8 Aug 2025 23:28:57 +0900 Subject: [PATCH 2/7] Update createRoot.md --- src/content/reference/react-dom/client/createRoot.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 6bc90932d..a33dcae9d 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -373,8 +373,8 @@ const root = createRoot(container, { onCaughtError 옵션은 다음 두 개의 인자를 받는 함수입니다. -1. 발생한 error 객체 -2. componentStack 속성이 포함된 errorInfo 객체 +1. 발생한 error 객체. +2. componentStack 속성이 포함된 errorInfo 객체. `onUncaughtError`와 `onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다. From 00f1249bd64df2680514efd4c7f54b3b74a3d766 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Fri, 8 Aug 2025 23:29:16 +0900 Subject: [PATCH 3/7] Update hydrateRoot.md --- src/content/reference/react-dom/client/hydrateRoot.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 3ac7ba430..cbdec2d6b 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -394,8 +394,8 @@ const root = hydrateRoot(container, , { onCaughtError 옵션은 다음 두 개의 인자를 받는 함수입니다. -1. 발생한 error 객체 -2. componentStack 속성이 포함된 errorInfo 객체 +1. 발생한 error 객체. +2. componentStack 속성이 포함된 errorInfo 객체. `onUncaughtError`와 `onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다. From b6154e4abe1eef6894d7179335c807870b9ab9b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Fri, 8 Aug 2025 23:31:46 +0900 Subject: [PATCH 4/7] Update hydrateRoot.md --- src/content/reference/react-dom/client/hydrateRoot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index cbdec2d6b..1529aebd5 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -395,7 +395,7 @@ const root = hydrateRoot(container, , { onCaughtError 옵션은 다음 두 개의 인자를 받는 함수입니다. 1. 발생한 error 객체. -2. componentStack 속성이 포함된 errorInfo 객체. +2. 오류의 componentStack 속성을 포함한 errorInfo 객체. `onUncaughtError`와 `onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다. From e27c08875e6646b5c56bfc16408a06537c6f1dc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Fri, 8 Aug 2025 23:32:11 +0900 Subject: [PATCH 5/7] Update createRoot.md --- src/content/reference/react-dom/client/createRoot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index a33dcae9d..3c8d2baef 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -374,7 +374,7 @@ const root = createRoot(container, { onCaughtError 옵션은 다음 두 개의 인자를 받는 함수입니다. 1. 발생한 error 객체. -2. componentStack 속성이 포함된 errorInfo 객체. +2. 오류의 componentStack 속성을 포함한 errorInfo 객체. `onUncaughtError`와 `onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다. From 9f2482d0d2054d88b07bdd427abc1f3bfc74c267 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Fri, 8 Aug 2025 23:33:22 +0900 Subject: [PATCH 6/7] Update hydrateRoot.md --- src/content/reference/react-dom/client/hydrateRoot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 1529aebd5..172bbffd4 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -395,7 +395,7 @@ const root = hydrateRoot(container, , { onCaughtError 옵션은 다음 두 개의 인자를 받는 함수입니다. 1. 발생한 error 객체. -2. 오류의 componentStack 속성을 포함한 errorInfo 객체. +2. 오류의 componentStack 정보를 포함한 errorInfo 객체. `onUncaughtError`와 `onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다. From 0af87c7f461e9eab0ea4152cb79cd655abe6c81f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Fri, 8 Aug 2025 23:33:42 +0900 Subject: [PATCH 7/7] Update createRoot.md --- src/content/reference/react-dom/client/createRoot.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 3c8d2baef..e57dcbb31 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -374,7 +374,7 @@ const root = createRoot(container, { onCaughtError 옵션은 다음 두 개의 인자를 받는 함수입니다. 1. 발생한 error 객체. -2. 오류의 componentStack 속성을 포함한 errorInfo 객체. +2. 오류의 componentStack 정보를 포함한 errorInfo 객체. `onUncaughtError`와 `onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다.