diff --git a/src/components/Icon/IconCanary.tsx b/src/components/Icon/IconCanary.tsx
index a7782b1415..7f584fed76 100644
--- a/src/components/Icon/IconCanary.tsx
+++ b/src/components/Icon/IconCanary.tsx
@@ -4,29 +4,35 @@
 
 import {memo} from 'react';
 
-export const IconCanary = memo<JSX.IntrinsicElements['svg'] & {title?: string}>(
-  function IconCanary({className, title}) {
-    return (
-      <svg
-        className={className}
-        width="20px"
-        height="20px"
-        viewBox="0 0 20 20"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg">
-        {title && <title>{title}</title>}
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-          <g
-            id="noun-labs-1201738-(2)"
-            transform="translate(2, 0)"
-            fill="currentColor"
-            fillRule="nonzero">
-            <path
-              d="M10.2865804,5.55665262 L10.2865804,2.22331605 L10.8591544,2.22331605 C11.0103911,2.22244799 11.1551447,2.16342155 11.2617505,2.05914367 C11.3684534,1.95486857 11.4282767,1.81370176 11.4282767,1.66667106 L11.4282767,0.556642208 C11.4282767,0.40907262 11.3678934,0.26747526 11.2605218,0.16308627 C11.1531503,0.0587028348 11.0074938,0 10.8556998,0 L5.14338868,0 C4.9915947,0 4.84594391,0.0587028348 4.73856664,0.16308627 C4.63119507,0.267469704 4.57081178,0.40907262 4.57081178,0.556642208 L4.57081178,1.66667106 C4.57081178,1.81434899 4.63119507,1.95594912 4.73856664,2.06033811 C4.8459382,2.16472155 4.9915947,2.22331605 5.14338868,2.22331605 L5.71596273,2.22331605 L5.71596273,5.55665262 C5.71596273,8.38665538 2.97295619,9.88999017 0.651686904,15.5566623 C-0.0957823782,17.360053 -2.00560068,20 7.99951567,20 C18.004632,20 16.0948137,17.3600252 15.3507732,15.5566623 C13.0124432,9.88999017 10.2865804,8.38665538 10.2865804,5.55665262 Z M9.89570197,10.709991 C10.0921412,10.709991 10.2805515,10.7858383 10.4193876,10.9209301 C10.5583466,11.0559135 10.6363652,11.2390693 10.6363652,11.4300417 C10.6363652,11.6210141 10.5583466,11.8040698 10.4193876,11.9391533 C10.2805401,12.0741367 10.0921412,12.1499813 9.89570197,12.1499813 C9.6992627,12.1499813 9.51096673,12.074134 9.37201631,11.9391533 C9.23316875,11.8040615 9.15515307,11.6210141 9.15515307,11.4300417 C9.15515307,11.2390693 9.2331716,11.0559024 9.37201631,10.9209301 C9.57264221,10.7258996 9.61239426,10.709991 9.89570197,10.709991 Z M8.98919546,9.04212824 C9.09790709,9.14792278 9.15884755,9.29158681 9.1585213,9.44110085 C9.15829001,9.59073155 9.09678989,9.73407335 8.98763252,9.83954568 C8.87847514,9.945018 8.73069852,10.0039347 8.57678157,10.0033977 C8.42286747,10.0027392 8.27565088,9.94273467 8.16727355,9.83639845 C8.05900765,9.73006224 7.99873866,9.58628988 7.99963013,9.43664806 C8.00052304,9.28788403 8.0620221,9.14542556 8.17051087,9.04048101 C8.27911107,8.93555591 8.42599335,8.87663641 8.57913312,8.87663641 C8.73291864,8.87665585 8.88047525,8.93622535 8.98919546,9.04212824 Z M7.99965585,17.9999981 C4.91377349,17.9999981 3.29882839,17.7332867 2.51364277,17.4999976 C2.37780966,17.4476975 2.26954376,17.3439641 2.21396931,17.2125528 C2.15838628,17.0811499 2.16006066,16.9334692 2.21876871,16.8033858 C2.6144474,15.5921346 3.14916224,14.4280501 3.81316983,13.3333824 C5.980145,9.82337899 8.22941036,13.8867718 10.0980836,13.8867718 C11.9666996,13.8867718 11.4695868,12.1534924 12.1827971,13.3333824 C12.8511505,14.4269112 13.3916656,15.5896902 13.794259,16.8000524 C13.8533022,16.9322137 13.8537479,17.0822749 13.7952635,17.2147751 C13.7368889,17.3472613 13.6248314,17.4504531 13.4856467,17.5000531 C12.6833967,17.7332867 11.0855382,17.9999981 7.99965585,17.9999981 Z"
-              id="Shape"></path>
-          </g>
-        </g>
-      </svg>
-    );
+export const IconCanary = memo<
+  JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
+>(function IconCanary(
+  {className, title, size} = {
+    className: undefined,
+    title: undefined,
+    size: 'md',
   }
-);
+) {
+  return (
+    <svg
+      className={className}
+      width={size === 's' ? '12px' : '20px'}
+      height={size === 's' ? '12px' : '20px'}
+      viewBox="0 0 20 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      {title && <title>{title}</title>}
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g
+          id="noun-labs-1201738-(2)"
+          transform="translate(2, 0)"
+          fill="currentColor"
+          fillRule="nonzero">
+          <path
+            d="M10.2865804,5.55665262 L10.2865804,2.22331605 L10.8591544,2.22331605 C11.0103911,2.22244799 11.1551447,2.16342155 11.2617505,2.05914367 C11.3684534,1.95486857 11.4282767,1.81370176 11.4282767,1.66667106 L11.4282767,0.556642208 C11.4282767,0.40907262 11.3678934,0.26747526 11.2605218,0.16308627 C11.1531503,0.0587028348 11.0074938,0 10.8556998,0 L5.14338868,0 C4.9915947,0 4.84594391,0.0587028348 4.73856664,0.16308627 C4.63119507,0.267469704 4.57081178,0.40907262 4.57081178,0.556642208 L4.57081178,1.66667106 C4.57081178,1.81434899 4.63119507,1.95594912 4.73856664,2.06033811 C4.8459382,2.16472155 4.9915947,2.22331605 5.14338868,2.22331605 L5.71596273,2.22331605 L5.71596273,5.55665262 C5.71596273,8.38665538 2.97295619,9.88999017 0.651686904,15.5566623 C-0.0957823782,17.360053 -2.00560068,20 7.99951567,20 C18.004632,20 16.0948137,17.3600252 15.3507732,15.5566623 C13.0124432,9.88999017 10.2865804,8.38665538 10.2865804,5.55665262 Z M9.89570197,10.709991 C10.0921412,10.709991 10.2805515,10.7858383 10.4193876,10.9209301 C10.5583466,11.0559135 10.6363652,11.2390693 10.6363652,11.4300417 C10.6363652,11.6210141 10.5583466,11.8040698 10.4193876,11.9391533 C10.2805401,12.0741367 10.0921412,12.1499813 9.89570197,12.1499813 C9.6992627,12.1499813 9.51096673,12.074134 9.37201631,11.9391533 C9.23316875,11.8040615 9.15515307,11.6210141 9.15515307,11.4300417 C9.15515307,11.2390693 9.2331716,11.0559024 9.37201631,10.9209301 C9.57264221,10.7258996 9.61239426,10.709991 9.89570197,10.709991 Z M8.98919546,9.04212824 C9.09790709,9.14792278 9.15884755,9.29158681 9.1585213,9.44110085 C9.15829001,9.59073155 9.09678989,9.73407335 8.98763252,9.83954568 C8.87847514,9.945018 8.73069852,10.0039347 8.57678157,10.0033977 C8.42286747,10.0027392 8.27565088,9.94273467 8.16727355,9.83639845 C8.05900765,9.73006224 7.99873866,9.58628988 7.99963013,9.43664806 C8.00052304,9.28788403 8.0620221,9.14542556 8.17051087,9.04048101 C8.27911107,8.93555591 8.42599335,8.87663641 8.57913312,8.87663641 C8.73291864,8.87665585 8.88047525,8.93622535 8.98919546,9.04212824 Z M7.99965585,17.9999981 C4.91377349,17.9999981 3.29882839,17.7332867 2.51364277,17.4999976 C2.37780966,17.4476975 2.26954376,17.3439641 2.21396931,17.2125528 C2.15838628,17.0811499 2.16006066,16.9334692 2.21876871,16.8033858 C2.6144474,15.5921346 3.14916224,14.4280501 3.81316983,13.3333824 C5.980145,9.82337899 8.22941036,13.8867718 10.0980836,13.8867718 C11.9666996,13.8867718 11.4695868,12.1534924 12.1827971,13.3333824 C12.8511505,14.4269112 13.3916656,15.5896902 13.794259,16.8000524 C13.8533022,16.9322137 13.8537479,17.0822749 13.7952635,17.2147751 C13.7368889,17.3472613 13.6248314,17.4504531 13.4856467,17.5000531 C12.6833967,17.7332867 11.0855382,17.9999981 7.99965585,17.9999981 Z"
+            id="Shape"></path>
+        </g>
+      </g>
+    </svg>
+  );
+});
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 25f5d28314..031020e67e 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -142,10 +142,11 @@ export default function TopNav({
   breadcrumbs: RouteItem[];
   section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
 }) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
   const scrollParentRef = useRef<HTMLDivElement>(null);
   const {asPath} = useRouter();
-  const [isScrolled, setIsScrolled] = useState(false);
 
   // HACK. Fix up the data structures instead.
   if ((routeTree as any).routes.length === 1) {
@@ -154,18 +155,18 @@ export default function TopNav({
 
   // While the overlay is open, disable body scroll.
   useEffect(() => {
-    if (isOpen) {
+    if (isMenuOpen) {
       const preferredScrollParent = scrollParentRef.current!;
       disableBodyScroll(preferredScrollParent);
       return () => enableBodyScroll(preferredScrollParent);
     } else {
       return undefined;
     }
-  }, [isOpen]);
+  }, [isMenuOpen]);
 
   // Close the overlay on any navigation.
   useEffect(() => {
-    setIsOpen(false);
+    setIsMenuOpen(false);
   }, [asPath]);
 
   // Also close the overlay if the window gets resized past mobile layout.
@@ -175,7 +176,7 @@ export default function TopNav({
 
     function closeIfNeeded() {
       if (!media.matches) {
-        setIsOpen(false);
+        setIsMenuOpen(false);
       }
     }
 
@@ -204,7 +205,6 @@ export default function TopNav({
     return () => observer.disconnect();
   }, []);
 
-  const [showSearch, setShowSearch] = useState(false);
   const onOpenSearch = useCallback(() => {
     startTransition(() => {
       setShowSearch(true);
@@ -224,28 +224,28 @@ export default function TopNav({
       <div ref={scrollDetectorRef} />
       <div
         className={cn(
-          isOpen
+          isMenuOpen
             ? 'h-screen sticky top-0 lg:bottom-0 lg:h-screen flex flex-col shadow-nav dark:shadow-nav-dark z-20'
             : 'z-50 sticky top-0'
         )}>
         <nav
           className={cn(
             'duration-300 backdrop-filter backdrop-blur-lg backdrop-saturate-200 transition-shadow bg-opacity-90 items-center w-full flex justify-between bg-wash dark:bg-wash-dark dark:bg-opacity-95 px-1.5 lg:pe-5 lg:ps-4 z-50',
-            {'dark:shadow-nav-dark shadow-nav': isScrolled || isOpen}
+            {'dark:shadow-nav-dark shadow-nav': isScrolled || isMenuOpen}
           )}>
           <div className="flex items-center justify-between w-full h-16 gap-0 sm:gap-3">
             <div className="flex flex-row 3xl:flex-1 ">
               <button
                 type="button"
                 aria-label="Menu"
-                onClick={() => setIsOpen(!isOpen)}
+                onClick={() => setIsMenuOpen(!isMenuOpen)}
                 className={cn(
                   'active:scale-95 transition-transform flex lg:hidden w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link',
                   {
-                    'text-link dark:text-link-dark': isOpen,
+                    'text-link dark:text-link-dark': isMenuOpen,
                   }
                 )}>
-                {isOpen ? <IconClose /> : <IconHamburger />}
+                {isMenuOpen ? <IconClose /> : <IconHamburger />}
               </button>
               <div className="flex 3xl:flex-1 align-center">
                 <NextLink
@@ -343,14 +343,14 @@ export default function TopNav({
           </div>
         </nav>
 
-        {isOpen && (
+        {isMenuOpen && (
           <div
             ref={scrollParentRef}
             className="overflow-y-scroll isolate no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
             <aside
               className={cn(
                 `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-custom-xs z-50`,
-                isOpen ? 'block z-40' : 'hidden lg:block'
+                isMenuOpen ? 'block z-40' : 'hidden lg:block'
               )}>
               <nav
                 role="navigation"
@@ -383,10 +383,10 @@ export default function TopNav({
                   <SidebarRouteTree
                     // Don't share state between the desktop and mobile versions.
                     // This avoids unnecessary animations and visual flicker.
-                    key={isOpen ? 'mobile-overlay' : 'desktop-or-hidden'}
+                    key={isMenuOpen ? 'mobile-overlay' : 'desktop-or-hidden'}
                     routeTree={routeTree}
                     breadcrumbs={breadcrumbs}
-                    isForceExpanded={isOpen}
+                    isForceExpanded={isMenuOpen}
                   />
                 </Suspense>
                 <div className="h-16" />
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index e330ad91ed..8354160a7b 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/src/components/MDX/ExpandableCallout.tsx
@@ -2,7 +2,6 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {useRef} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 import {IconNote} from '../Icon/IconNote';
@@ -63,7 +62,6 @@ const variantMap = {
 };
 
 function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
-  const contentRef = useRef<HTMLDivElement>(null);
   const variant = variantMap[type];
 
   return (
@@ -80,9 +78,7 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
         {variant.title}
       </h3>
       <div className="relative">
-        <div ref={contentRef} className="py-2">
-          {children}
-        </div>
+        <div className="py-2">{children}</div>
       </div>
     </div>
   );
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index 85246378f2..db85a6398d 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -33,6 +33,7 @@ import type {Toc, TocItem} from './TocContext';
 import {TeamMember} from './TeamMember';
 
 import ErrorDecoder from './ErrorDecoder';
+import {IconCanary} from '../Icon/IconCanary';
 
 function CodeStep({children, step}: {children: any; step: number}) {
   return (
@@ -94,6 +95,20 @@ const Canary = ({children}: {children: React.ReactNode}) => (
   <ExpandableCallout type="canary">{children}</ExpandableCallout>
 );
 
+const CanaryBadge = ({title}: {title: string}) => (
+  <span
+    title={title}
+    className={
+      'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded'
+    }>
+    <IconCanary
+      size="s"
+      className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
+    />
+    Canary only
+  </span>
+);
+
 const Blockquote = ({
   children,
   ...props
@@ -191,7 +206,7 @@ function Recipes(props: any) {
 
 function AuthorCredit({
   author = 'Rachel Lee Nabors',
-  authorLink = 'http://rachelnabors.com/',
+  authorLink = 'https://nearestnabors.com/',
 }: {
   author: string;
   authorLink: string;
@@ -430,6 +445,7 @@ export const MDXComponents = {
   MathI,
   Note,
   Canary,
+  CanaryBadge,
   PackageImport,
   ReadBlogPost,
   Recap,
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 8bc47297a1..cff7f88529 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -110,7 +110,6 @@ export function Search({
         createPortal(
           <DocSearchModal
             {...options}
-            initialScrollY={window.scrollY}
             searchParameters={searchParameters}
             onClose={onClose}
             navigator={{
diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index 4e1bf8e3db..2db62c994c 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -7,7 +7,7 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-const bannerText = 'Join us for React Conf on May 15-16.';
+const bannerText = 'Stream React Conf on May 15-16.';
 const bannerLink = 'https://conf.react.dev/';
 const bannerLinkText = 'Learn more.';
 
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index 6647a2e4f1..b3b6687cdc 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -45,8 +45,15 @@ root.render(<App />);
 
 * **可选** `options`：用于配置这个 React 根节点的对象。
 
+<<<<<<< HEAD
   * **可选** `onRecoverableError`：回调函数，在 React 从异常错误中恢复时自动调用。
   * **可选** `identifierPrefix`：一个 React 用来配合 [`useId`](/reference/react/useId) 生成 id 的字符串前缀。在同一个页面上使用多个根节点的场景下，这将能有效避免冲突。
+=======
+  * <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+  * <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
+>>>>>>> 37a8d646bfab5b11a583e963f3bc0429270c0b36
 
 #### 返回值 {/*returns*/}
 
@@ -342,6 +349,797 @@ export default function App({counter}) {
 
 多次调用 `render` 是一个不常见的事情。通常情况下，你的组件将通过 [更新 state](/reference/react/useState) 达到同样的效果。
 
+### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/}
+
+<Canary>
+
+`onUncaughtError` is only available in the latest React Canary release.
+
+</Canary>
+
+By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
+
+```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+  document.getElementById('root'),
+  {
+    onUncaughtError: (error, errorInfo) => {
+      console.error(
+        'Uncaught error',
+        error,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was thrown.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onUncaughtError` root option to display error dialogs:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!-- This is the DOM node -->
+<div id="root"></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+  
+  // Set the title
+  errorTitle.innerText = title;
+  
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+  
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+  
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportUncaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+  onUncaughtError: (error, errorInfo) => {
+    if (error.message !== 'Known error') {
+      reportUncaughtError({
+        error,
+        componentStack: errorInfo.componentStack
+      });
+    }
+  }
+});
+root.render(<App />);
+```
+
+```js src/App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [throwError, setThrowError] = useState(false);
+  
+  if (throwError) {
+    foo.bar = 'baz';
+  }
+  
+  return (
+    <div>
+      <span>This error shows the error dialog:</span>
+      <button onClick={() => setThrowError(true)}>
+        Throw error
+      </button>
+    </div>
+  );
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+
+### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
+
+<Canary>
+
+`onCaughtError` is only available in the latest React Canary release.
+
+</Canary>
+
+By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
+
+```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+  document.getElementById('root'),
+  {
+    onCaughtError: (error, errorInfo) => {
+      console.error(
+        'Caught error',
+        error,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was caught by the boundary.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!-- This is the DOM node -->
+<div id="root"></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+  // Set the title
+  errorTitle.innerText = title;
+
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportCaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+  onCaughtError: (error, errorInfo) => {
+    if (error.message !== 'Known error') {
+      reportCaughtError({
+        error, 
+        componentStack: errorInfo.componentStack,
+      });
+    }
+  }
+});
+root.render(<App />);
+```
+
+```js src/App.js
+import { useState } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+export default function App() {
+  const [error, setError] = useState(null);
+  
+  function handleUnknown() {
+    setError("unknown");
+  }
+
+  function handleKnown() {
+    setError("known");
+  }
+  
+  return (
+    <>
+      <ErrorBoundary
+        fallbackRender={fallbackRender}
+        onReset={(details) => {
+          setError(null);
+        }}
+      >
+        {error != null && <Throw error={error} />}
+        <span>This error will not show the error dialog:</span>
+        <button onClick={handleKnown}>
+          Throw known error
+        </button>
+        <span>This error will show the error dialog:</span>
+        <button onClick={handleUnknown}>
+          Throw unknown error
+        </button>
+      </ErrorBoundary>
+      
+    </>
+  );
+}
+
+function fallbackRender({ resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <h3>Error Boundary</h3>
+      <p>Something went wrong.</p>
+      <button onClick={resetErrorBoundary}>Reset</button>
+    </div>
+  );
+}
+
+function Throw({error}) {
+  if (error === "known") {
+    throw new Error('Known error')
+  } else {
+    foo.bar = 'baz';
+  }
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+### Displaying a dialog for recoverable errors {/*displaying-a-dialog-for-recoverable-errors*/}
+
+React may automatically render a component a second time to attempt to recover from an error thrown in render. If successful, React will log a recoverable error to the console to notify the developer. To override this behavior, you can provide the optional `onRecoverableError` root option:
+
+```js [[1, 6, "onRecoverableError"], [2, 6, "error", 1], [3, 10, "error.cause"], [4, 6, "errorInfo"], [5, 11, "componentStack"]]
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(
+  document.getElementById('root'),
+  {
+    onRecoverableError: (error, errorInfo) => {
+      console.error(
+        'Recoverable error',
+        error,
+        error.cause,
+        errorInfo.componentStack,
+      );
+    }
+  }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that React throws. Some errors may include the original cause as <CodeStep step={3}>error.cause</CodeStep>. 
+2. An <CodeStep step={4}>errorInfo</CodeStep> object that contains the <CodeStep step={5}>componentStack</CodeStep> of the error.
+
+You can use the `onRecoverableError` root option to display error dialogs:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!-- This is the DOM node -->
+<div id="root"></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+
+  // Set the title
+  errorTitle.innerText = title;
+
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportRecoverableError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container, {
+  onRecoverableError: (error, errorInfo) => {
+    reportRecoverableError({
+      error,
+      cause: error.cause,
+      componentStack: errorInfo.componentStack,
+    });
+  }
+});
+root.render(<App />);
+```
+
+```js src/App.js
+import { useState } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+// 🚩 Bug: Never do this. This will force an error.
+let errorThrown = false;
+export default function App() {
+  return (
+    <>
+      <ErrorBoundary
+        fallbackRender={fallbackRender}
+      >
+        {!errorThrown && <Throw />}
+        <p>This component threw an error, but recovered during a second render.</p>
+        <p>Since it recovered, no Error Boundary was shown, but <code>onRecoverableError</code> was used to show an error dialog.</p>
+      </ErrorBoundary>
+      
+    </>
+  );
+}
+
+function fallbackRender() {
+  return (
+    <div role="alert">
+      <h3>Error Boundary</h3>
+      <p>Something went wrong.</p>
+    </div>
+  );
+}
+
+function Throw({error}) {
+  // Simulate an external value changing during concurrent render.
+  errorThrown = true;
+  foo.bar = 'baz';
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+
 ---
 ## 错误排查 {/*troubleshooting*/}
 
@@ -361,7 +1159,33 @@ root.render(<App />);
 
 ---
 
+<<<<<<< HEAD
 ### 我得到了一个异常报错信息：“目标容器不是一个 DOM 元素（Target container is not a DOM element）” {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
+=======
+### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/}
+
+A common mistake is to pass the options for `createRoot` to `root.render(...)`:
+
+<ConsoleBlock level="error">
+
+Warning: You passed a second argument to root.render(...) but it only accepts one argument.
+
+</ConsoleBlock>
+
+To fix, pass the root options to `createRoot(...)`, not `root.render(...)`:
+```js {2,5}
+// 🚩 Wrong: root.render only takes one argument.
+root.render(App, {onUncaughtError});
+
+// ✅ Correct: pass options to createRoot.
+const root = createRoot(container, {onUncaughtError}); 
+root.render(<App />);
+```
+
+---
+
+### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/}
+>>>>>>> 37a8d646bfab5b11a583e963f3bc0429270c0b36
 
 这个异常错误即字面意思，你传递给 `createRoot` 的内容不是一个 DOM 元素。
 
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index fd4ca38939..3977731dbd 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -43,8 +43,15 @@ React 将会连接到内部有 `domNode` 的 HTML 上，然后接管其中的 `d
 
 * **可选**  `options`：一个包含此 React 根元素选项的对象。
 
+<<<<<<< HEAD
   * **可选**  `onRecoverableError`：当 React 自动从错误中恢复时调用的回调函数。
   * **可选**  `identifierPrefix`：字符串前缀，用于标识由 [`useId`](/reference/react/useId) 生成的 ID ，可以避免在同一页面上使用多个 React 根元素时出现冲突。必须与服务端使用的前缀相同。
+=======
+  * <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+  * <CanaryBadge title="This feature is only available in the Canary channel" /> **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
+  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
+>>>>>>> 37a8d646bfab5b11a583e963f3bc0429270c0b36
 
 
 #### 返回值 {/*returns*/}
@@ -372,4 +379,831 @@ export default function App({counter}) {
 
 </Sandpack>
 
+<<<<<<< HEAD
 在 hydrate 过的根组件上调用 `root.render` 是不常见的。通常情况下，你可以在组件的内部 [更新 state](/reference/react/useState)。
+=======
+It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually, you'll [update state](/reference/react/useState) inside one of the components instead.
+
+### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/}
+
+<Canary>
+
+`onUncaughtError` is only available in the latest React Canary release.
+
+</Canary>
+
+By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
+
+```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
+import { hydrateRoot } from 'react-dom/client';
+
+const root = hydrateRoot(
+  document.getElementById('root'),
+  <App />,
+  {
+    onUncaughtError: (error, errorInfo) => {
+      console.error(
+        'Uncaught error',
+        error,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onUncaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was thrown.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onUncaughtError` root option to display error dialogs:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><div><span>This error shows the error dialog:</span><button>Throw error</button></div></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+  
+  // Set the title
+  errorTitle.innerText = title;
+  
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+  
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+  
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { hydrateRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportUncaughtError} from "./reportError";
+import "./styles.css";
+import {renderToString} from 'react-dom/server';
+
+const container = document.getElementById("root");
+const root = hydrateRoot(container, <App />, {
+  onUncaughtError: (error, errorInfo) => {
+    if (error.message !== 'Known error') {
+      reportUncaughtError({
+        error,
+        componentStack: errorInfo.componentStack
+      });
+    }
+  }
+});
+```
+
+```js src/App.js
+import { useState } from 'react';
+
+export default function App() {
+  const [throwError, setThrowError] = useState(false);
+  
+  if (throwError) {
+    foo.bar = 'baz';
+  }
+  
+  return (
+    <div>
+      <span>This error shows the error dialog:</span>
+      <button onClick={() => setThrowError(true)}>
+        Throw error
+      </button>
+    </div>
+  );
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "^5.0.0"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+
+### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
+
+<Canary>
+
+`onCaughtError` is only available in the latest React Canary release.
+
+</Canary>
+
+By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option for errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
+
+```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
+import { hydrateRoot } from 'react-dom/client';
+
+const root = hydrateRoot(
+  document.getElementById('root'),
+  <App />,
+  {
+    onCaughtError: (error, errorInfo) => {
+      console.error(
+        'Caught error',
+        error,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+root.render(<App />);
+```
+
+The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> that was caught by the boundary.
+2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
+
+You can use the `onCaughtError` root option to display error dialogs or filter known errors from logging:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><span>This error will not show the error dialog:</span><button>Throw known error</button><span>This error will show the error dialog:</span><button>Throw unknown error</button></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+  
+  // Set the title
+  errorTitle.innerText = title;
+  
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+  
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+  
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { hydrateRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportCaughtError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = hydrateRoot(container, <App />, {
+  onCaughtError: (error, errorInfo) => {
+    if (error.message !== 'Known error') {
+      reportCaughtError({
+        error,
+        componentStack: errorInfo.componentStack
+      });
+    }
+  }
+});
+```
+
+```js src/App.js
+import { useState } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+export default function App() {
+  const [error, setError] = useState(null);
+  
+  function handleUnknown() {
+    setError("unknown");
+  }
+
+  function handleKnown() {
+    setError("known");
+  }
+  
+  return (
+    <>
+      <ErrorBoundary
+        fallbackRender={fallbackRender}
+        onReset={(details) => {
+          setError(null);
+        }}
+      >
+        {error != null && <Throw error={error} />}
+        <span>This error will not show the error dialog:</span>
+        <button onClick={handleKnown}>
+          Throw known error
+        </button>
+        <span>This error will show the error dialog:</span>
+        <button onClick={handleUnknown}>
+          Throw unknown error
+        </button>
+      </ErrorBoundary>
+      
+    </>
+  );
+}
+
+function fallbackRender({ resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <h3>Error Boundary</h3>
+      <p>Something went wrong.</p>
+      <button onClick={resetErrorBoundary}>Reset</button>
+    </div>
+  );
+}
+
+function Throw({error}) {
+  if (error === "known") {
+    throw new Error('Known error')
+  } else {
+    foo.bar = 'baz';
+  }
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+### Show a dialog for recoverable hydration mismatch errors {/*show-a-dialog-for-recoverable-hydration-mismatch-errors*/}
+
+When React encounters a hydration mismatch, it will automatically attempt to recover by rendering on the client. By default, React will log hydration mismatch errors to `console.error`. To override this behavior, you can provide the optional `onRecoverableError` root option:
+
+```js [[1, 7, "onRecoverableError"], [2, 7, "error", 1], [3, 11, "error.cause", 1], [4, 7, "errorInfo"], [5, 12, "componentStack"]]
+import { hydrateRoot } from 'react-dom/client';
+
+const root = hydrateRoot(
+  document.getElementById('root'),
+  <App />,
+  {
+    onRecoverableError: (error, errorInfo) => {
+      console.error(
+        'Caught error',
+        error,
+        error.cause,
+        errorInfo.componentStack
+      );
+    }
+  }
+);
+```
+
+The <CodeStep step={1}>onRecoverableError</CodeStep> option is a function called with two arguments:
+
+1. The <CodeStep step={2}>error</CodeStep> React throws. Some errors may include the original cause as <CodeStep step={3}>error.cause</CodeStep>.
+2. An <CodeStep step={4}>errorInfo</CodeStep> object that contains the <CodeStep step={5}>componentStack</CodeStep> of the error.
+
+You can use the `onRecoverableError` root option to display error dialogs for hydration mismatches:
+
+<Sandpack>
+
+```html index.html hidden
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My app</title>
+</head>
+<body>
+<!--
+  Error dialog in raw HTML
+  since an error in the React app may crash.
+-->
+<div id="error-dialog" class="hidden">
+  <h1 id="error-title" class="text-red"></h1>
+  <h3>
+    <pre id="error-message"></pre>
+  </h3>
+  <p>
+    <pre id="error-body"></pre>
+  </p>
+  <h4 class="-mb-20">This error occurred at:</h4>
+  <pre id="error-component-stack" class="nowrap"></pre>
+  <h4 class="mb-0">Call stack:</h4>
+  <pre id="error-stack" class="nowrap"></pre>
+  <div id="error-cause">
+    <h4 class="mb-0">Caused by:</h4>
+    <pre id="error-cause-message"></pre>
+    <pre id="error-cause-stack" class="nowrap"></pre>
+  </div>
+  <button
+    id="error-close"
+    class="mb-10"
+    onclick="document.getElementById('error-dialog').classList.add('hidden')"
+  >
+    Close
+  </button>
+  <h3 id="error-not-dismissible">This error is not dismissible.</h3>
+</div>
+<!--
+  HTML content inside <div id="root">...</div>
+  was generated from App by react-dom/server.
+-->
+<div id="root"><span>Server</span></div>
+</body>
+</html>
+```
+
+```css src/styles.css active
+label, button { display: block; margin-bottom: 20px; }
+html, body { min-height: 300px; }
+
+#error-dialog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  padding: 15px;
+  opacity: 0.9;
+  text-wrap: wrap;
+  overflow: scroll;
+}
+
+.text-red {
+  color: red;
+}
+
+.-mb-20 {
+  margin-bottom: -20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+pre {
+  text-wrap: wrap;
+}
+
+pre.nowrap {
+  text-wrap: nowrap;
+}
+
+.hidden {
+ display: none;  
+}
+```
+
+```js src/reportError.js hidden
+function reportError({ title, error, componentStack, dismissable }) {
+  const errorDialog = document.getElementById("error-dialog");
+  const errorTitle = document.getElementById("error-title");
+  const errorMessage = document.getElementById("error-message");
+  const errorBody = document.getElementById("error-body");
+  const errorComponentStack = document.getElementById("error-component-stack");
+  const errorStack = document.getElementById("error-stack");
+  const errorClose = document.getElementById("error-close");
+  const errorCause = document.getElementById("error-cause");
+  const errorCauseMessage = document.getElementById("error-cause-message");
+  const errorCauseStack = document.getElementById("error-cause-stack");
+  const errorNotDismissible = document.getElementById("error-not-dismissible");
+  
+  // Set the title
+  errorTitle.innerText = title;
+  
+  // Display error message and body
+  const [heading, body] = error.message.split(/\n(.*)/s);
+  errorMessage.innerText = heading;
+  if (body) {
+    errorBody.innerText = body;
+  } else {
+    errorBody.innerText = '';
+  }
+
+  // Display component stack
+  errorComponentStack.innerText = componentStack;
+
+  // Display the call stack
+  // Since we already displayed the message, strip it, and the first Error: line.
+  errorStack.innerText = error.stack.replace(error.message, '').split(/\n(.*)/s)[1];
+  
+  // Display the cause, if available
+  if (error.cause) {
+    errorCauseMessage.innerText = error.cause.message;
+    errorCauseStack.innerText = error.cause.stack;
+    errorCause.classList.remove('hidden');
+  } else {
+    errorCause.classList.add('hidden');
+  }
+  // Display the close button, if dismissible
+  if (dismissable) {
+    errorNotDismissible.classList.add('hidden');
+    errorClose.classList.remove("hidden");
+  } else {
+    errorNotDismissible.classList.remove('hidden');
+    errorClose.classList.add("hidden");
+  }
+  
+  // Show the dialog
+  errorDialog.classList.remove("hidden");
+}
+
+export function reportCaughtError({error, cause, componentStack}) {
+  reportError({ title: "Caught Error", error, componentStack,  dismissable: true});
+}
+
+export function reportUncaughtError({error, cause, componentStack}) {
+  reportError({ title: "Uncaught Error", error, componentStack, dismissable: false });
+}
+
+export function reportRecoverableError({error, cause, componentStack}) {
+  reportError({ title: "Recoverable Error", error, componentStack,  dismissable: true });
+}
+```
+
+```js src/index.js active
+import { hydrateRoot } from "react-dom/client";
+import App from "./App.js";
+import {reportRecoverableError} from "./reportError";
+import "./styles.css";
+
+const container = document.getElementById("root");
+const root = hydrateRoot(container, <App />, {
+  onRecoverableError: (error, errorInfo) => {
+    reportRecoverableError({
+      error,
+      cause: error.cause,
+      componentStack: errorInfo.componentStack
+    });
+  }
+});
+```
+
+```js src/App.js
+import { useState } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+export default function App() {
+  const [error, setError] = useState(null);
+  
+  function handleUnknown() {
+    setError("unknown");
+  }
+
+  function handleKnown() {
+    setError("known");
+  }
+  
+  return (
+    <span>{typeof window !== 'undefined' ? 'Client' : 'Server'}</span>
+  );
+}
+
+function fallbackRender({ resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <h3>Error Boundary</h3>
+      <p>Something went wrong.</p>
+      <button onClick={resetErrorBoundary}>Reset</button>
+    </div>
+  );
+}
+
+function Throw({error}) {
+  if (error === "known") {
+    throw new Error('Known error')
+  } else {
+    foo.bar = 'baz';
+  }
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-scripts": "^5.0.0",
+    "react-error-boundary": "4.0.3"
+  },
+  "main": "/index.js"
+}
+```
+
+</Sandpack>
+
+## Troubleshooting {/*troubleshooting*/}
+
+
+### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/}
+
+A common mistake is to pass the options for `hydrateRoot` to `root.render(...)`:
+
+<ConsoleBlock level="error">
+
+Warning: You passed a second argument to root.render(...) but it only accepts one argument.
+
+</ConsoleBlock>
+
+To fix, pass the root options to `hydrateRoot(...)`, not `root.render(...)`:
+```js {2,5}
+// 🚩 Wrong: root.render only takes one argument.
+root.render(App, {onUncaughtError});
+
+// ✅ Correct: pass options to createRoot.
+const root = hydrateRoot(container, <App />, {onUncaughtError});
+```
+>>>>>>> 37a8d646bfab5b11a583e963f3bc0429270c0b36
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index 779000dbf8..2806409ce8 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -1741,7 +1741,11 @@ function Router() {
   // ...
 ```
 
+<<<<<<< HEAD
 这告诉 React 此 state Transition 是不紧急的，最好继续显示上一页，而不是隐藏任何已经显示的内容。现在点击按钮并等待 `Biography` 加载：
+=======
+This tells React that the state transition is not urgent, and it's better to keep showing the previous page instead of hiding any already revealed content. Now clicking the button "waits" for the `Biography` to load:
+>>>>>>> 37a8d646bfab5b11a583e963f3bc0429270c0b36
 
 <Sandpack>
 
diff --git a/src/pages/errors/[errorCode].tsx b/src/pages/errors/[errorCode].tsx
index f1a54a3d63..519af3b07b 100644
--- a/src/pages/errors/[errorCode].tsx
+++ b/src/pages/errors/[errorCode].tsx
@@ -36,7 +36,7 @@ export default function ErrorDecoderPage({
         }}
         routeTree={sidebarLearn as RouteItem}
         section="unknown">
-        {parsedContent}
+        <div className="whitespace-pre-line">{parsedContent}</div>
         {/* <MaxWidth>
           <P>
             We highly recommend using the development build locally when debugging