ulysia/Vencord
1
0
Fork 0
Code Pull requests Activity

Improve ErrorBoundary layout

Browse source 
Now the error cause will be wrapped to prevent it from being cut off,
only wrap the stacktrace in pre
This commit is contained in:
Vendicated 2022-10-12 01:54:38 +02:00
parent 071508c61a
commit 66f8fde353
No known key found for this signature in database
GPG key ID: EC781ADFB93EFFA3
1 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/ErrorBoundary.tsx
View file

@ -1,9 +1,9 @@
import Logger from "../utils/logger"; import Logger from "../utils/logger";
import { Card, React } from "../webpack/common"; import { Margins, React } from "../webpack/common";
import { ErrorCard } from "./ErrorCard"; import { ErrorCard } from "./ErrorCard";
interface Props { interface Props {
fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; }>>; fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; message: string; stack: string; }>>;
onError?(error: Error, errorInfo: React.ErrorInfo): void; onError?(error: Error, errorInfo: React.ErrorInfo): void;
} }
@ -24,14 +24,23 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr
state = { state = {
error: NO_ERROR as any, error: NO_ERROR as any,
stack: "",
message: "" message: ""
}; };
static getDerivedStateFromError(error: any) { static getDerivedStateFromError(error: any) {
let stack = error?.stack ?? "";
let message = error?.message || String(error);
return { if (error instanceof Error && stack) {
error: error?.stack?.replace(/https:\/\/\S+\/assets\//g, "") || error?.message || String(error) const eolIdx = stack.indexOf("\n");
}; if (eolIdx !== -1) {
message = stack.slice(0, eolIdx);
stack = stack.slice(eolIdx + 1).replace(/https:\/\/\S+\/assets\//g, "");
}
}
return { error, stack, message };
} }
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
@ -46,7 +55,7 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr
if (this.props.fallback) if (this.props.fallback)
return <this.props.fallback return <this.props.fallback
children={this.props.children} children={this.props.children}
error={this.state.error} {...this.state}
/>; />;
return ( return (
@ -59,9 +68,12 @@ export default class ErrorBoundary extends React.Component<React.PropsWithChildr
and in your console. and in your console.
</p> </p>
<code> <code>
<pre> {this.state.message}
{this.state.error} {!!this.state.stack && (
</pre> <pre className={Margins.marginTop8}>
{this.state.stack}
</pre>
)}
</code> </code>
</ErrorCard> </ErrorCard>
); );