feat: handle errors for message renderer separately

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>
+                {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>
+                        <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>

src/pages/app.tsx

@@ -17,7 +17,7 @@ const RevoltApp = lazy(() => import("./RevoltApp"));
 
 export function App() {
     return (
-        <ErrorBoundary>
+        <ErrorBoundary section="client">
             <Context>
                 <Masks />
                 {/* 

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,6 +160,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
             }>
             <ChannelHeader channel={channel} />
             <ChannelMain>
+                <ErrorBoundary section="renderer">
                     <ChannelContent>
                         <VoiceHeader id={channel._id} />
                         <NewMessages channel={channel} last_id={last_id} />
@@ -167,6 +169,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
                         <JumpToBottom channel={channel} />
                         <MessageBox channel={channel} />
                     </ChannelContent>
+                </ErrorBoundary>
                 {!isTouchscreenDevice &&
                     layout.getSectionState(SIDEBAR_MEMBERS, true) && (
                         <RightSidebar />