cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-09-19 17:47:18 -04: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 {
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>

2
src/pages/app.tsx
View file

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

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

@ -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 />