fix: address error boundary review feedback

Keep the routeChangeComplete listener in sync when resetOnRouteChange
changes at runtime and always detach it on unmount.

Use a ContextualErrorFallback for content-level boundaries via a new
ContentErrorBoundary wrapper, so a failed content region keeps a local
inline recovery UI instead of the full-page global fallback (which
remains the app-wide safety net in _app.tsx).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: anshgoyalevil

components/error/ContentErrorBoundary.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import ContextualErrorFallback from './ContextualErrorFallback';
+import ErrorBoundary from './ErrorBoundary';
+
+interface IContentErrorBoundaryProps {
+  // The content subtree to protect.
+  children: ReactNode;
+
+  // Short label describing the failed region, e.g. "article" or "page content".
+  label?: string;
+}
+
+/**
+ * @description Convenience boundary for page content regions. It renders the
+ * lightweight ContextualErrorFallback so a crash inside the content keeps its
+ * local recovery UI without taking over the surrounding layout shell.
+ * @param {IContentErrorBoundaryProps} props - The content children and an optional label.
+ */
+export default function ContentErrorBoundary({
+  children,
+  label = 'content'
+}: IContentErrorBoundaryProps): React.JSX.Element {
+  return (
+    <ErrorBoundary
+      fallback={({ error, errorInfo, reset }) => (
+        <ContextualErrorFallback error={error} errorInfo={errorInfo} reset={reset} label={label} />
+      )}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}

components/error/ErrorBoundary.tsx

@@ -68,19 +68,24 @@ export default class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
 
   componentDidUpdate(prevProps: ErrorBoundaryProps): void {
     const { hasError } = this.state;
-    const { resetKeys } = this.props;
+    const { resetKeys, resetOnRouteChange = true } = this.props;
+    const prevResetOnRouteChange = prevProps.resetOnRouteChange ?? true;
+
+    if (resetOnRouteChange !== prevResetOnRouteChange) {
+      if (resetOnRouteChange) {
+        Router.events.on('routeChangeComplete', this.reset);
+      } else {
+        Router.events.off('routeChangeComplete', this.reset);
+      }
+    }
 
     if (hasError && haveResetKeysChanged(prevProps.resetKeys, resetKeys)) {
       this.reset();
     }
   }
 
   componentWillUnmount(): void {
-    const { resetOnRouteChange = true } = this.props;
-
-    if (resetOnRouteChange) {
-      Router.events.off('routeChangeComplete', this.reset);
-    }
+    Router.events.off('routeChangeComplete', this.reset);
   }
 
   /**

components/layout/BlogLayout.tsx

@@ -9,7 +9,7 @@ import type { IPosts } from '@/types/post';
 import BlogContext from '../../context/BlogContext';
 import AuthorAvatars from '../AuthorAvatars';
 import AnnouncementHero from '../campaigns/AnnouncementHero';
-import ErrorBoundary from '../error/ErrorBoundary';
+import ContentErrorBoundary from '../error/ContentErrorBoundary';
 import Head from '../Head';
 import TOC from '../TOC';
 import Container from './Container';
@@ -92,7 +92,7 @@ export default function BlogLayout({ post, children }: IBlogLayoutProps) {
                 </HtmlHead>
               )}
               <img src={post.cover} alt={post.coverCaption} title={post.coverCaption} className='my-6 w-full' />
-              <ErrorBoundary>{children}</ErrorBoundary>
+              <ContentErrorBoundary label='article'>{children}</ContentErrorBoundary>
             </article>
           </main>
         </Container>

components/layout/DocsLayout.tsx

@@ -12,7 +12,7 @@ import DocsContext from '../../context/DocsContext';
 import { getAllPosts } from '../../utils/api';
 import Button from '../buttons/Button';
 import DocsButton from '../buttons/DocsButton';
-import ErrorBoundary from '../error/ErrorBoundary';
+import ContentErrorBoundary from '../error/ContentErrorBoundary';
 import Feedback from '../Feedback';
 import Head from '../Head';
 import ArrowRight from '../icons/ArrowRight';
@@ -113,7 +113,7 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
           {explorerDocMenu && <div className='explorer-menu-wrapper mt-2'>{sidebar}</div>}
         </div>
         <article>
-          <ErrorBoundary>{children}</ErrorBoundary>
+          <ContentErrorBoundary label='content'>{children}</ContentErrorBoundary>
         </article>
       </div>
     );
@@ -203,7 +203,7 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
                   )}
                   <article className='my-12 overflow-x-auto'>
                     <Head title={post.title} description={post.excerpt} image={post.cover} />
-                    <ErrorBoundary>{children}</ErrorBoundary>
+                    <ContentErrorBoundary label='content'>{children}</ContentErrorBoundary>
                   </article>
                   <div>
                     <DocsButton post={post} />

components/layout/Layout.tsx

@@ -6,7 +6,7 @@ import type { IPost, IPosts } from '@/types/post';
 
 import BlogContext from '../../context/BlogContext';
 import { getAllPosts, getDocBySlug, getPostBySlug } from '../../utils/api';
-import ErrorBoundary from '../error/ErrorBoundary';
+import ContentErrorBoundary from '../error/ContentErrorBoundary';
 import BlogLayout from './BlogLayout';
 import DocsLayout from './DocsLayout';
 import GenericPostLayout from './GenericPostLayout';
@@ -58,14 +58,14 @@ export default function Layout({ children }: ILayoutProps): React.JSX.Element {
   if (post) {
     return (
       <GenericPostLayout post={post as unknown as IPosts['blog'][number]}>
-        <ErrorBoundary>{children}</ErrorBoundary>
+        <ContentErrorBoundary label='content'>{children}</ContentErrorBoundary>
       </GenericPostLayout>
     );
   }
 
   return (
     <div className='min-h-screen bg-white dark:bg-dark-background transition-colors duration-300'>
-      <ErrorBoundary>{children}</ErrorBoundary>
+      <ContentErrorBoundary label='page content'>{children}</ContentErrorBoundary>
     </div>
   );
 }