cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-10 01:03:36 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat: handle errors for message renderer separately

Browse source
This commit is contained in:
Paul 2021-12-25 16:03:05 +00:00
parent c96b09bb81
commit 028a8660c1
3 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/lib/ErrorBoundary.tsx
View file

@ -22,11 +22,12 @@ const CrashContainer = styled.div`
interface Props { interface Props {
children: Children; children: Children;
section: "client" | "renderer";
} }
const ERROR_URL = "https://reporting.revolt.chat"; const ERROR_URL = "https://reporting.revolt.chat";
export default function ErrorBoundary({ children }: Props) { export default function ErrorBoundary({ children, section }: Props) {
const [error, ignoreError] = useErrorBoundary(); const [error, ignoreError] = useErrorBoundary();
useEffect(() => { useEffect(() => {
@ -38,6 +39,7 @@ export default function ErrorBoundary({ children }: Props) {
origin: window.origin, origin: window.origin,
commitSHA: GIT_REVISION, commitSHA: GIT_REVISION,
userAgent: navigator.userAgent, userAgent: navigator.userAgent,
section,
}), }),
); );
} }
@ -46,11 +48,24 @@ export default function ErrorBoundary({ children }: Props) {
if (error) { if (error) {
return ( return (
<CrashContainer> <CrashContainer>
<h3>Client Crash Report</h3> {section === "client" ? (
<button onClick={ignoreError}> <>
Ignore error and try to reload app <h3>Client Crash Report</h3>
</button> <button onClick={ignoreError}>
<button onClick={() => location.reload()}>Refresh page</button> 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> <pre>
<code>{error?.stack}</code> <code>{error?.stack}</code>
</pre> </pre>

2
src/pages/app.tsx
View file

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

19
src/pages/channels/Channel.tsx
View file

@ -9,6 +9,7 @@ import styled from "styled-components";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useEffect, useMemo } from "preact/hooks"; import { useEffect, useMemo } from "preact/hooks";
import ErrorBoundary from "../../lib/ErrorBoundary";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { useApplicationState } from "../../mobx/State"; import { useApplicationState } from "../../mobx/State";
@ -159,14 +160,16 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
}> }>
<ChannelHeader channel={channel} /> <ChannelHeader channel={channel} />
<ChannelMain> <ChannelMain>
<ChannelContent> <ErrorBoundary section="renderer">
<VoiceHeader id={channel._id} /> <ChannelContent>
<NewMessages channel={channel} last_id={last_id} /> <VoiceHeader id={channel._id} />
<MessageArea channel={channel} last_id={last_id} /> <NewMessages channel={channel} last_id={last_id} />
<TypingIndicator channel={channel} /> <MessageArea channel={channel} last_id={last_id} />
<JumpToBottom channel={channel} /> <TypingIndicator channel={channel} />
<MessageBox channel={channel} /> <JumpToBottom channel={channel} />
</ChannelContent> <MessageBox channel={channel} />
</ChannelContent>
</ErrorBoundary>
{!isTouchscreenDevice && {!isTouchscreenDevice &&
layout.getSectionState(SIDEBAR_MEMBERS, true) && ( layout.getSectionState(SIDEBAR_MEMBERS, true) && (
<RightSidebar /> <RightSidebar />