From 1b8573228eb2f60043ebfd2c7fe7cf59ff357b1e Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Wed, 11 Mar 2026 11:11:41 +0100
Subject: [PATCH] fix: add ErrorBoundary to Search modal and fix MobileMenu
 error recovery

The SearchModal is dynamically imported and can fail with ChunkLoadError
when the webpack runtime references stale chunk hashes after a deploy
(Next.js 14 App Router bug: vercel/next.js#78756). Without an error
boundary, this crashes the entire React tree and shows a black screen.

- Wrap SearchModal with ErrorBoundary showing a recovery dialog
- Fix MobileMenu error fallback to use page reload instead of reset,
  since reset just re-triggers the same failed import
---
 .../Nav/MobileMenu/MobileMenuClient.tsx       |  6 ++--
 src/components/Search/index.tsx               | 30 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/Nav/MobileMenu/MobileMenuClient.tsx b/src/components/Nav/MobileMenu/MobileMenuClient.tsx
index 3926cfba414..9907d748371 100644
--- a/src/components/Nav/MobileMenu/MobileMenuClient.tsx
+++ b/src/components/Nav/MobileMenu/MobileMenuClient.tsx
@@ -107,15 +107,15 @@ const MobileMenuClient = ({ className, side }: MobileMenuClientProps) => {
       >
         {hasBeenOpened && (
           <ErrorBoundary
-            fallback={({ reset }) => (
+            fallback={() => (
               <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
                 <p className="text-body-medium">{t("loading-error")}</p>
                 <div className="flex gap-3">
                   <button
                     className="rounded-md bg-primary px-4 py-2 text-sm text-white hover:bg-primary-hover"
-                    onClick={reset}
+                    onClick={() => window.location.reload()}
                   >
-                    {t("try-again")}
+                    {t("refresh")}
                   </button>
                   <button
                     className="rounded-md border border-body-light px-4 py-2 text-sm text-body hover:bg-background-highlight"
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 503169a40ee..9a34c79bad4 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -7,6 +7,8 @@ import { type DocSearchHit, useDocSearchKeyboardEvents } from "@docsearch/react"
 import * as Portal from "@radix-ui/react-portal"
 import { Slot } from "@radix-ui/react-slot"
 
+import { ErrorBoundary } from "@/components/ui/error-boundary"
+
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { sanitizeHitTitle } from "@/lib/utils/sanitizeHitTitle"
 import { sanitizeHitUrl } from "@/lib/utils/url"
@@ -134,7 +136,33 @@ const Search = ({ asChild = false, children }: SearchProps) => {
         </>
       )}
       <Portal.Root>
-        {isOpen && <SearchModal {...searchModalProps} />}
+        {isOpen && (
+          <ErrorBoundary
+            fallback={() => (
+              <div className="fixed inset-0 z-modal flex items-center justify-center bg-black/50">
+                <div className="mx-4 flex flex-col items-center gap-4 rounded-lg bg-background p-8 text-center shadow-lg">
+                  <p className="text-body-medium">{t("loading-error")}</p>
+                  <div className="flex gap-3">
+                    <button
+                      className="rounded-md bg-primary px-4 py-2 text-sm text-white hover:bg-primary-hover"
+                      onClick={() => window.location.reload()}
+                    >
+                      {t("refresh")}
+                    </button>
+                    <button
+                      className="rounded-md border border-body-light px-4 py-2 text-sm text-body hover:bg-background-highlight"
+                      onClick={onClose}
+                    >
+                      {t("close")}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+          >
+            <SearchModal {...searchModalProps} />
+          </ErrorBoundary>
+        )}
       </Portal.Root>
     </>
   )