From 028a8660c114a9b52236bba4e2fa466b3cfbf55d Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sat, 25 Dec 2021 16:03:05 +0000
Subject: [PATCH] feat: handle errors for message renderer separately

---
 src/lib/ErrorBoundary.tsx      | 27 +++++++++++++++++++++------
 src/pages/app.tsx              |  2 +-
 src/pages/channels/Channel.tsx | 19 +++++++++++--------
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/lib/ErrorBoundary.tsx b/src/lib/ErrorBoundary.tsx
index ff6b4a35..3f58bcba 100644
--- a/src/lib/ErrorBoundary.tsx
+++ b/src/lib/ErrorBoundary.tsx
@@ -22,11 +22,12 @@ const CrashContainer = styled.div`
 
 interface Props {
     children: Children;
+    section: "client" | "renderer";
 }
 
 const ERROR_URL = "https://reporting.revolt.chat";
 
-export default function ErrorBoundary({ children }: Props) {
+export default function ErrorBoundary({ children, section }: Props) {
     const [error, ignoreError] = useErrorBoundary();
 
     useEffect(() => {
@@ -38,6 +39,7 @@ export default function ErrorBoundary({ children }: Props) {
                     origin: window.origin,
                     commitSHA: GIT_REVISION,
                     userAgent: navigator.userAgent,
+                    section,
                 }),
             );
         }
@@ -46,11 +48,24 @@ export default function ErrorBoundary({ children }: Props) {
     if (error) {
         return (
             <CrashContainer>
-                <h3>Client Crash Report</h3>
-                <button onClick={ignoreError}>
-                    Ignore error and try to reload app
-                </button>
-                <button onClick={() => location.reload()}>Refresh page</button>
+                {section === "client" ? (
+                    <>
+                        <h3>Client Crash Report</h3>
+                        <button onClick={ignoreError}>
+                            Ignore error and try to reload app
+                        </button>
+                        <button onClick={() => location.reload()}>
+                            Refresh page
+                        </button>
+                    </>
+                ) : (
+                    <>
+                        <h3>Component Error</h3>
+                        <button onClick={ignoreError}>
+                            Ignore error and try render again
+                        </button>
+                    </>
+                )}
                 <pre>
                     <code>{error?.stack}</code>
                 </pre>
diff --git a/src/pages/app.tsx b/src/pages/app.tsx
index f3d7c8a4..ab11eb89 100644
--- a/src/pages/app.tsx
+++ b/src/pages/app.tsx
@@ -17,7 +17,7 @@ const RevoltApp = lazy(() => import("./RevoltApp"));
 
 export function App() {
     return (
-        <ErrorBoundary>
+        <ErrorBoundary section="client">
             <Context>
                 <Masks />
                 {/* 
diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx
index b177463f..1e0b4f99 100644
--- a/src/pages/channels/Channel.tsx
+++ b/src/pages/channels/Channel.tsx
@@ -9,6 +9,7 @@ import styled from "styled-components";
 import { Text } from "preact-i18n";
 import { useEffect, useMemo } from "preact/hooks";
 
+import ErrorBoundary from "../../lib/ErrorBoundary";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../mobx/State";
@@ -159,14 +160,16 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
             }>
             <ChannelHeader channel={channel} />
             <ChannelMain>
-                <ChannelContent>
-                    <VoiceHeader id={channel._id} />
-                    <NewMessages channel={channel} last_id={last_id} />
-                    <MessageArea channel={channel} last_id={last_id} />
-                    <TypingIndicator channel={channel} />
-                    <JumpToBottom channel={channel} />
-                    <MessageBox channel={channel} />
-                </ChannelContent>
+                <ErrorBoundary section="renderer">
+                    <ChannelContent>
+                        <VoiceHeader id={channel._id} />
+                        <NewMessages channel={channel} last_id={last_id} />
+                        <MessageArea channel={channel} last_id={last_id} />
+                        <TypingIndicator channel={channel} />
+                        <JumpToBottom channel={channel} />
+                        <MessageBox channel={channel} />
+                    </ChannelContent>
+                </ErrorBoundary>
                 {!isTouchscreenDevice &&
                     layout.getSectionState(SIDEBAR_MEMBERS, true) && (
                         <RightSidebar />