From 665c009bf8aec87ead601428410f56ba6756a8db Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Thu, 31 Oct 2024 19:56:27 +0800
Subject: [PATCH] fix: add rsshub discover error boundary

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../src/components/errors/RSSHubError.tsx     | 31 +++++++++++++++++++
 apps/renderer/src/components/errors/enum.ts   |  2 ++
 apps/renderer/src/components/errors/index.ts  |  1 +
 .../new-user-guide/guide-modal-content.tsx    |  2 +-
 .../modules/new-user-guide/steps/behavior.tsx |  6 ++++
 .../modules/new-user-guide/steps/rsshub.tsx   | 14 ++++++---
 .../(layer)/(subview)/discover/index.tsx      |  6 +++-
 .../components/src/ui/radio-group/Radio.tsx   | 14 ++++-----
 8 files changed, 61 insertions(+), 15 deletions(-)
 create mode 100644 apps/renderer/src/components/errors/RSSHubError.tsx

diff --git a/apps/renderer/src/components/errors/RSSHubError.tsx b/apps/renderer/src/components/errors/RSSHubError.tsx
new file mode 100644
index 000000000..1bfea7afc
--- /dev/null
+++ b/apps/renderer/src/components/errors/RSSHubError.tsx
@@ -0,0 +1,31 @@
+import type { FC } from "react"
+
+import { attachOpenInEditor } from "~/lib/dev"
+
+import type { AppErrorFallbackProps } from "../common/AppErrorBoundary"
+import { FeedbackIssue } from "../common/ErrorElement"
+import { parseError } from "./helper"
+
+const RSSHubErrorFallback: FC<AppErrorFallbackProps> = (props) => {
+  const { message, stack } = parseError(props.error)
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div className="m-auto max-w-prose text-center">
+        <p className="center my-3 gap-2 font-bold">
+          <i className="i-mgc-bug-cute-re text-red-500" />
+          RSSHub has a temporary problem, please contact the our team.
+        </p>
+        <div className="text-lg">{message}</div>
+        {import.meta.env.DEV && stack ? (
+          <pre className="mt-4 max-h-48 cursor-text overflow-auto whitespace-pre-line rounded-md bg-red-50 p-4 text-left font-mono text-sm text-red-600">
+            {attachOpenInEditor(stack)}
+          </pre>
+        ) : null}
+
+        <FeedbackIssue message={message!} stack={stack} />
+      </div>
+    </div>
+  )
+}
+export default RSSHubErrorFallback
diff --git a/apps/renderer/src/components/errors/enum.ts b/apps/renderer/src/components/errors/enum.ts
index f51325ee5..a0286b574 100644
--- a/apps/renderer/src/components/errors/enum.ts
+++ b/apps/renderer/src/components/errors/enum.ts
@@ -5,4 +5,6 @@ export enum ErrorComponentType {
   // Feed
   FeedFoundCanBeFollow = "FeedFoundCanBeFollow",
   FeedNotFound = "FeedNotFound",
+  // Section
+  RSSHubDiscoverError = "RSSHubDiscoverError",
 }
diff --git a/apps/renderer/src/components/errors/index.ts b/apps/renderer/src/components/errors/index.ts
index f42406d01..265ea424b 100644
--- a/apps/renderer/src/components/errors/index.ts
+++ b/apps/renderer/src/components/errors/index.ts
@@ -9,6 +9,7 @@ const ErrorFallbackMap = {
     () => import("./FeedFoundCanBeFollowErrorFallback"),
   ),
   [ErrorComponentType.FeedNotFound]: lazy(() => import("./FeedNotFound")),
+  [ErrorComponentType.RSSHubDiscoverError]: lazy(() => import("./RSSHubError")),
 }
 
 export const getErrorFallback = (type: ErrorComponentType) => ErrorFallbackMap[type]
diff --git a/apps/renderer/src/modules/new-user-guide/guide-modal-content.tsx b/apps/renderer/src/modules/new-user-guide/guide-modal-content.tsx
index 5ed9752e9..5e3d5b5f0 100644
--- a/apps/renderer/src/modules/new-user-guide/guide-modal-content.tsx
+++ b/apps/renderer/src/modules/new-user-guide/guide-modal-content.tsx
@@ -112,7 +112,7 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
         {
           title: t.app("new_user_guide.step.shortcuts.title"),
           content: (
-            <div className="w-[400px] space-y-2">
+            <div className="space-y-2">
               <p>{t.app("new_user_guide.step.shortcuts.description1")}</p>
               <p>
                 <Trans
diff --git a/apps/renderer/src/modules/new-user-guide/steps/behavior.tsx b/apps/renderer/src/modules/new-user-guide/steps/behavior.tsx
index cf4ff3fda..4880bd3ad 100644
--- a/apps/renderer/src/modules/new-user-guide/steps/behavior.tsx
+++ b/apps/renderer/src/modules/new-user-guide/steps/behavior.tsx
@@ -47,16 +47,22 @@ export function BehaviorGuide() {
             wrapperClassName="border rounded-lg p-3 has-[:checked]:bg-theme-accent has-[:checked]:text-white transition-colors"
             label={t("new_user_guide.step.behavior.unread_question.option1")}
             value="radical"
+            className="hidden"
+            labelClassName="pl-0"
           />
           <Radio
             wrapperClassName="border rounded-lg p-3 has-[:checked]:bg-theme-accent has-[:checked]:text-white transition-colors"
             label={t("new_user_guide.step.behavior.unread_question.option2")}
             value="balanced"
+            className="hidden"
+            labelClassName="pl-0"
           />
           <Radio
             wrapperClassName="border rounded-lg p-3 has-[:checked]:bg-theme-accent has-[:checked]:text-white transition-colors"
             label={t("new_user_guide.step.behavior.unread_question.option3")}
             value="conservative"
+            className="hidden"
+            labelClassName="pl-0"
           />
         </RadioGroup>
       </div>
diff --git a/apps/renderer/src/modules/new-user-guide/steps/rsshub.tsx b/apps/renderer/src/modules/new-user-guide/steps/rsshub.tsx
index d4d211eea..b48920b1b 100644
--- a/apps/renderer/src/modules/new-user-guide/steps/rsshub.tsx
+++ b/apps/renderer/src/modules/new-user-guide/steps/rsshub.tsx
@@ -1,5 +1,7 @@
 import { ScrollArea } from "@follow/components/ui/scroll-area/index.js"
 
+import { AppErrorBoundary } from "~/components/common/AppErrorBoundary"
+import { ErrorComponentType } from "~/components/errors/enum"
 import { useAuthQuery } from "~/hooks/common"
 import { Recommendations } from "~/modules/discover/recommendations"
 import { Queries } from "~/queries"
@@ -27,10 +29,12 @@ export function RSSHubGuide() {
   }
 
   return (
-    <ScrollArea.ScrollArea viewportClassName="h-[450px]">
-      <div className="space-y-3">
-        <Recommendations hideTitle className="grid-cols-4" />
-      </div>
-    </ScrollArea.ScrollArea>
+    <AppErrorBoundary errorType={ErrorComponentType.RSSHubDiscoverError}>
+      <ScrollArea.ScrollArea viewportClassName="h-[450px]">
+        <div className="space-y-3">
+          <Recommendations hideTitle className="grid-cols-4" />
+        </div>
+      </ScrollArea.ScrollArea>
+    </AppErrorBoundary>
   )
 }
diff --git a/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx b/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
index 0d6d40a8a..66b775bd9 100644
--- a/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
+++ b/apps/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
@@ -6,6 +6,8 @@ import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"
 
 import { useUserRole } from "~/atoms/user"
+import { AppErrorBoundary } from "~/components/common/AppErrorBoundary"
+import { ErrorComponentType } from "~/components/errors/enum"
 import { useActivationModal } from "~/modules/activation"
 import { DiscoverForm } from "~/modules/discover/form"
 import { DiscoverImport } from "~/modules/discover/import"
@@ -114,7 +116,9 @@ export function Component() {
           </TabsContent>
         ))}
       </Tabs>
-      <Recommendations />
+      <AppErrorBoundary errorType={ErrorComponentType.RSSHubDiscoverError}>
+        <Recommendations />
+      </AppErrorBoundary>
     </div>
   )
 }
diff --git a/packages/components/src/ui/radio-group/Radio.tsx b/packages/components/src/ui/radio-group/Radio.tsx
index 1db70e0ee..fd36215be 100644
--- a/packages/components/src/ui/radio-group/Radio.tsx
+++ b/packages/components/src/ui/radio-group/Radio.tsx
@@ -9,9 +9,10 @@ export const Radio: FC<
   React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     label: ReactNode
     wrapperClassName?: string
+    labelClassName?: string
   }
 > = (props) => {
-  const { id, label, className, wrapperClassName, value, onChange, ...rest } = props
+  const { id, label, className, wrapperClassName, labelClassName, value, onChange, ...rest } = props
   const { onChange: ctxOnChange } = useRadioContext() || {}
   const fallbackId = useId()
 
@@ -22,7 +23,7 @@ export const Radio: FC<
     onChange?.(e)
   })
   return (
-    <div className={cn("flex items-center", wrapperClassName)}>
+    <label className={cn("flex items-center", wrapperClassName)} htmlFor={id ?? fallbackId}>
       <input
         {...rest}
         type="radio"
@@ -36,12 +37,9 @@ export const Radio: FC<
         onChange={handleChange}
       />
 
-      <label
-        className={cn(rest.disabled ? "text-theme-disabled" : "", "pl-2")}
-        htmlFor={id ?? fallbackId}
-      >
+      <span className={cn(rest.disabled ? "text-theme-disabled" : "", "pl-2", labelClassName)}>
         {label}
-      </label>
-    </div>
+      </span>
+    </label>
   )
 }