From d8d74ae45c99c3ff7e35e4879a10aa4612612117 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Fri, 13 Feb 2026 09:03:12 +0000
Subject: [PATCH] Merge pull request #31509 from
 overleaf/mj-chat-error-handling

[web] Add error boundary to chat

GitOrigin-RevId: e3a204ab1469f99dc1fc3e2cd96b8fd0cbc87e99
---
 .../chat/components/chat-fallback-error.tsx   | 28 +++++++++++--------
 .../js/features/chat/components/chat-pane.tsx |  3 +-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx b/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx
index 04dca10885..8dd18824e1 100644
--- a/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx
+++ b/services/web/frontend/js/features/chat/components/chat-fallback-error.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import OLNotification from '@/shared/components/ol/ol-notification'
 import OLButton from '@/shared/components/ol/ol-button'
+import RailPanelHeader from '@/features/ide-react/components/rail/rail-panel-header'
 
 interface ChatFallbackErrorProps {
   reconnect?: () => void
@@ -10,18 +11,23 @@ function ChatFallbackError({ reconnect }: ChatFallbackErrorProps) {
   const { t } = useTranslation()
 
   return (
-    <aside className="chat">
-      <div className="chat-error">
-        <OLNotification type="error" content={t('chat_error')} />
-        {reconnect && (
-          <p className="text-center">
-            <OLButton variant="secondary" onClick={reconnect}>
-              {t('reconnect')}
-            </OLButton>
-          </p>
-        )}
+    <div className="chat-panel">
+      <RailPanelHeader title={t('collaborator_chat')} />
+      <div className="chat-wrapper">
+        <aside className="chat" aria-label={t('chat')}>
+          <div className="chat-error">
+            <OLNotification type="error" content={t('chat_error')} />
+            {reconnect && (
+              <p className="text-center">
+                <OLButton variant="secondary" onClick={reconnect}>
+                  {t('reconnect')}
+                </OLButton>
+              </p>
+            )}
+          </div>
+        </aside>
       </div>
-    </aside>
+    </div>
   )
 }
 
diff --git a/services/web/frontend/js/features/chat/components/chat-pane.tsx b/services/web/frontend/js/features/chat/components/chat-pane.tsx
index 60d5d0a391..c1aa2b999d 100644
--- a/services/web/frontend/js/features/chat/components/chat-pane.tsx
+++ b/services/web/frontend/js/features/chat/components/chat-pane.tsx
@@ -10,6 +10,7 @@ import { lazy, Suspense, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
 import RailPanelHeader from '@/features/ide-react/components/rail/rail-panel-header'
+import withErrorBoundary from '@/infrastructure/error-boundary'
 
 const MessageList = lazy(() => import('./message-list'))
 
@@ -104,4 +105,4 @@ function Placeholder() {
   )
 }
 
-export default ChatPane
+export default withErrorBoundary(ChatPane, () => <ChatFallbackError />)