From a9d4a0885c45d272216d26b78f6f29261ae03dd4 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Tue, 3 Dec 2024 11:15:35 +0800
Subject: [PATCH] feat: add MessageErrorBoundary component

---
 src/renderer/src/i18n/locales/en-us.json      |  6 ++-
 src/renderer/src/i18n/locales/ru-ru.json      |  6 ++-
 src/renderer/src/i18n/locales/zh-cn.json      |  6 ++-
 src/renderer/src/i18n/locales/zh-tw.json      |  6 ++-
 .../src/pages/home/Messages/Message.tsx       |  5 ++-
 .../home/Messages/MessageErrorBoundary.tsx    | 41 +++++++++++++++++++
 6 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100644 src/renderer/src/pages/home/Messages/MessageErrorBoundary.tsx

diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json
index ab7dc1c4f5..4307c3d887 100644
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -150,7 +150,11 @@
       "backup.file_format": "Backup file format error",
       "chat.response": "Something went wrong. Please check if you have set your API key in the Settings > Providers",
       "no_api_key": "API key is not configured",
-      "provider_disabled": "Model provider is not enabled"
+      "provider_disabled": "Model provider is not enabled",
+      "render": {
+        "title": "Render Error",
+        "description": "Failed to render formula. Please check if the formula format is correct"
+      }
     },
     "export": {
       "assistant": "Assistant",
diff --git a/src/renderer/src/i18n/locales/ru-ru.json b/src/renderer/src/i18n/locales/ru-ru.json
index c812169f71..1806d0cc68 100644
--- a/src/renderer/src/i18n/locales/ru-ru.json
+++ b/src/renderer/src/i18n/locales/ru-ru.json
@@ -150,7 +150,11 @@
       "backup.file_format": "Ошибка формата файла резервной копии",
       "chat.response": "Что-то пошло не так. Пожалуйста, проверьте, установлен ли ваш ключ API в Настройки > Провайдеры",
       "no_api_key": "Ключ API не настроен",
-      "provider_disabled": "Провайдер моделей не включен"
+      "provider_disabled": "Провайдер моделей не включен",
+      "render": {
+        "title": "Ошибка рендеринга",
+        "description": "Не удалось рендерить формулу. Пожалуйста, проверьте, правильно ли формат формулы"
+      }
     },
     "export": {
       "assistant": "Ассистент",
diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json
index 5a1b70209f..ddf6a3e328 100644
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@@ -150,7 +150,11 @@
       "backup.file_format": "备份文件格式错误",
       "chat.response": "出错了，如果没有配置 API 密钥，请前往设置 > 模型提供商中配置密钥",
       "no_api_key": "API 密钥未配置",
-      "provider_disabled": "模型提供商未启用"
+      "provider_disabled": "模型提供商未启用",
+      "render": {
+        "title": "渲染错误",
+        "description": "渲染公式失败，请检查公式格式是否正确"
+      }
     },
     "export": {
       "assistant": "助手",
diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json
index 02ee268f17..f4b8cc812c 100644
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@@ -150,7 +150,11 @@
       "backup.file_format": "備份文件格式錯誤",
       "chat.response": "出現錯誤。如果尚未配置 API 密鑰，請前往設定 > 模型提供者中配置密鑰",
       "no_api_key": "API 密鑰未配置",
-      "provider_disabled": "模型提供商未啟用"
+      "provider_disabled": "模型提供商未啟用",
+      "render": {
+        "title": "渲染錯誤",
+        "description": "渲染公式失敗，請檢查公式格式是否正確"
+      }
     },
     "export": {
       "assistant": "助手",
diff --git a/src/renderer/src/pages/home/Messages/Message.tsx b/src/renderer/src/pages/home/Messages/Message.tsx
index 574c27ed38..dbc4dc9809 100644
--- a/src/renderer/src/pages/home/Messages/Message.tsx
+++ b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import MessageContent from './MessageContent'
+import MessageErrorBoundary from './MessageErrorBoundary'
 import MessageHeader from './MessageHeader'
 import MessageMenubar from './MessageMenubar'
 import MessageTokens from './MessageTokens'
@@ -151,7 +152,9 @@ const MessageItem: FC<Props> = ({
       <MessageContentContainer
         className="message-content-container"
         style={{ fontFamily, fontSize, background: messageBackground }}>
-        <MessageContent message={message} model={model} />
+        <MessageErrorBoundary>
+          <MessageContent message={message} model={model} />
+        </MessageErrorBoundary>
         {showMenubar && (
           <MessageFooter
             style={{
diff --git a/src/renderer/src/pages/home/Messages/MessageErrorBoundary.tsx b/src/renderer/src/pages/home/Messages/MessageErrorBoundary.tsx
new file mode 100644
index 0000000000..bc6a692776
--- /dev/null
+++ b/src/renderer/src/pages/home/Messages/MessageErrorBoundary.tsx
@@ -0,0 +1,41 @@
+import { Alert } from 'antd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  fallback?: React.ReactNode
+  children: React.ReactNode
+}
+
+interface State {
+  hasError: boolean
+}
+
+const ErrorFallback = ({ fallback }: { fallback?: React.ReactNode }) => {
+  const { t } = useTranslation()
+  return (
+    fallback || (
+      <Alert message={t('error.render.title')} description={t('error.render.description')} type="error" showIcon />
+    )
+  )
+}
+
+class MessageErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ErrorFallback fallback={this.props.fallback} />
+    }
+    return this.props.children
+  }
+}
+
+export default MessageErrorBoundary