fix: add page error boundary

Signed-off-by: Innei <i@innei.in>
RSSNext · Aug 6, 2024 · 86d366d · 86d366d
1 parent 20ef773
commit 86d366d
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 35 deletions.
diff --git a/src/renderer/src/components/common/ErrorElement.tsx b/src/renderer/src/components/common/ErrorElement.tsx
@@ -83,21 +83,7 @@ export function ErrorElement() {
         </StyledButton>
       </div>
 
-      <p className="mt-8">
-        Still having this issue? Please give feedback in Github, thanks!
-        <a
-          className="ml-2 cursor-pointer text-theme-accent-500 duration-200 hover:text-theme-accent"
-          href={getNewIssueUrl({
-            title: `Error: ${message}`,
-            body: `### Error\n\n${message}\n\n### Stack\n\n\`\`\`\n${stack}\n\`\`\``,
-            label: "bug",
-          })}
-          target="_blank"
-          rel="noreferrer"
-        >
-          Submit Issue
-        </a>
-      </p>
+      <FallbackIssue message={message} stack={stack} />
       <div className="grow" />
       <footer className="center mt-12 flex gap-2">
         Powered by
@@ -116,3 +102,27 @@ export function ErrorElement() {
     </div>
   )
 }
+
+export const FallbackIssue = ({
+  message,
+  stack,
+}: {
+  message: string
+  stack: string | null | undefined
+}) => (
+  <p className="mt-8">
+    Still having this issue? Please give feedback in Github, thanks!
+    <a
+      className="ml-2 cursor-pointer text-theme-accent-500 duration-200 hover:text-theme-accent"
+      href={getNewIssueUrl({
+        title: `Error: ${message}`,
+        body: `### Error\n\n${message}\n\n### Stack\n\n\`\`\`\n${stack}\n\`\`\``,
+        label: "bug",
+      })}
+      target="_blank"
+      rel="noreferrer"
+    >
+      Submit Issue
+    </a>
+  </p>
+)
diff --git a/src/renderer/src/components/errors/ModalError.tsx b/src/renderer/src/components/errors/ModalError.tsx
@@ -1,8 +1,8 @@
 import { attachOpenInEditor } from "@renderer/lib/dev"
-import { getNewIssueUrl } from "@renderer/lib/issues"
 import type { FallbackRender } from "@sentry/react"
 import type { FC } from "react"
 
+import { FallbackIssue } from "../common/ErrorElement"
 import { m } from "../common/Motion"
 import { StyledButton } from "../ui/button"
 import { useCurrentModal } from "../ui/modal"
@@ -49,21 +49,7 @@ export const ModalErrorFallback: FC<Parameters<FallbackRender>[0]> = (
           </StyledButton>
         </div>
 
-        <p className="mt-8">
-          Still having this issue? Please give feedback in Github, thanks!
-          <a
-            className="ml-2 cursor-pointer text-theme-accent-500 duration-200 hover:text-theme-accent"
-            href={getNewIssueUrl({
-              title: `Error: ${message}`,
-              body: `### Error\n\n${message}\n\n### Stack\n\n\`\`\`\n${stack}\n\`\`\``,
-              label: "bug",
-            })}
-            target="_blank"
-            rel="noreferrer"
-          >
-            Submit Issue
-          </a>
-        </p>
+        <FallbackIssue message={message!} stack={stack} />
       </div>
     </m.div>
   )

diff --git a/src/renderer/src/components/errors/PageError.tsx b/src/renderer/src/components/errors/PageError.tsx
@@ -0,0 +1,47 @@
+import { attachOpenInEditor } from "@renderer/lib/dev"
+import type { FallbackRender } from "@sentry/react"
+import type { FC } from "react"
+
+import { FallbackIssue } from "../common/ErrorElement"
+import { StyledButton } from "../ui/button"
+import { parseError } from "./helper"
+
+export const PageErrorFallback: FC<Parameters<FallbackRender>[0]> = (props) => {
+  const { message, stack } = parseError(props.error)
+
+  return (
+    <div className="flex w-full flex-col items-center justify-center rounded-md bg-theme-modal-background-opaque p-2">
+      <div className="m-auto max-w-prose text-center">
+        <div className="mb-4">
+          <i className="i-mgc-bug-cute-re text-4xl text-red-500" />
+        </div>
+        <div className="text-lg font-bold">{message}</div>
+        {import.meta.env.DEV && stack ? (
+          <div className="mt-4 cursor-text overflow-auto whitespace-pre rounded-md bg-red-50 p-4 text-left font-mono text-sm text-red-600">
+            {attachOpenInEditor(stack)}
+          </div>
+        ) : null}
+
+        <p className="my-8">
+          The App has a temporary problem, click the button below to try
+          reloading the app or another solution?
+        </p>
+
+        <div className="center gap-4">
+          <StyledButton onClick={() => props.resetError()} variant="primary">
+            Reset
+          </StyledButton>
+
+          <StyledButton
+            onClick={() => window.location.reload()}
+            variant="outline"
+          >
+            Reload
+          </StyledButton>
+        </div>
+
+        <FallbackIssue message={message!} stack={stack} />
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/errors/index.ts b/src/renderer/src/components/errors/index.ts
@@ -1,11 +1,15 @@
 import { ModalErrorFallback } from "./ModalError"
+import { PageErrorFallback } from "./PageError"
 
 export enum ErrorComponentType {
   Modal = "Modal",
+  Page = "Page",
 }
 
 export const ErrorFallbackMap = {
   [ErrorComponentType.Modal]: ModalErrorFallback,
+  [ErrorComponentType.Page]: PageErrorFallback,
 }
 
-export const getErrorFallback = (type: ErrorComponentType) => ErrorFallbackMap[type]
+export const getErrorFallback = (type: ErrorComponentType) =>
+  ErrorFallbackMap[type]
diff --git a/src/renderer/src/modules/entry-column/date-item.tsx b/src/renderer/src/modules/entry-column/date-item.tsx
@@ -1,10 +1,11 @@
 import { FeedViewType } from "@renderer/lib/enum"
 import { cn } from "@renderer/lib/utils"
+import { memo } from "react"
 
 import { MarkAllButton } from "./mark-all-button"
 import { SocialMediaDateItem } from "./social-media-item"
 
-export const DateItem = ({
+export const DateItem = memo(({
   date,
   view,
   isFirst,
@@ -36,4 +37,5 @@ export const DateItem = ({
       {dateString}
     </div>
   )
-}
+},
+)
diff --git a/src/renderer/src/pages/(main)/layout.tsx b/src/renderer/src/pages/(main)/layout.tsx
@@ -3,6 +3,8 @@ import { useFeedColumnShow } from "@renderer/atoms/app"
 import { setMainContainerElement } from "@renderer/atoms/dom"
 import { getUISettings, setUISetting } from "@renderer/atoms/settings/ui"
 import { useLoginModalShow, useMe } from "@renderer/atoms/user"
+import { AppErrorBoundary } from "@renderer/components/common/AppErrorBoundary"
+import { ErrorComponentType } from "@renderer/components/errors"
 import { PanelSplitter } from "@renderer/components/ui/divider"
 import { DeclarativeModal } from "@renderer/components/ui/modal/stacked/declarative-modal"
 import { NoopChildren } from "@renderer/components/ui/modal/stacked/utils"
@@ -80,7 +82,9 @@ export function Component() {
         // NOTE: tabIndex for main element can get by `document.activeElement`
         tabIndex={-1}
       >
-        <Outlet />
+        <AppErrorBoundary errorType={ErrorComponentType.Page}>
+          <Outlet />
+        </AppErrorBoundary>
       </main>
 
       <SearchCmdK />