ErrorBoundary: Do not use any Discord components to be more robust

This commit is contained in:
Vendicated 2023-02-25 19:10:01 +01:00
parent ccca41a168
commit 128ee41252
No known key found for this signature in database
GPG key ID: A1DC0CFB5615D905
4 changed files with 20 additions and 23 deletions

View file

@ -17,8 +17,9 @@
*/ */
import Logger from "@utils/Logger"; import Logger from "@utils/Logger";
import { Margins } from "@utils/margins";
import { LazyComponent } from "@utils/misc"; import { LazyComponent } from "@utils/misc";
import { Margins, React } from "@webpack/common"; import { React } from "@webpack/common";
import { ErrorCard } from "./ErrorCard"; import { ErrorCard } from "./ErrorCard";
@ -84,15 +85,13 @@ const ErrorBoundary = LazyComponent(() => {
const msg = this.props.message || "An error occurred while rendering this Component. More info can be found below and in your console."; const msg = this.props.message || "An error occurred while rendering this Component. More info can be found below and in your console.";
return ( return (
<ErrorCard style={{ <ErrorCard style={{ overflow: "hidden" }}>
overflow: "hidden",
}}>
<h1>Oh no!</h1> <h1>Oh no!</h1>
<p>{msg}</p> <p>{msg}</p>
<code> <code>
{this.state.message} {this.state.message}
{!!this.state.stack && ( {!!this.state.stack && (
<pre className={Margins.marginTop8}> <pre className={Margins.top8}>
{this.state.stack} {this.state.stack}
</pre> </pre>
)} )}

View file

@ -0,0 +1,7 @@
.vc-error-card {
padding: 2em;
background-color: #e7828430;
border: 1px solid #e78284;
border-radius: 5px;
color: var(--text-normal, white);
}

View file

@ -16,24 +16,15 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { Card } from "@webpack/common"; import "./ErrorCard.css";
interface Props { import { classes } from "@utils/misc";
style?: React.CSSProperties; import type { HTMLProps } from "react";
className?: string;
} export function ErrorCard(props: React.PropsWithChildren<HTMLProps<HTMLDivElement>>) {
export function ErrorCard(props: React.PropsWithChildren<Props>) {
return ( return (
<Card className={props.className} style={ <div {...props} className={classes(props.className, "vc-error-card")}>
{
padding: "2em",
backgroundColor: "#e7828430",
borderColor: "#e78284",
color: "var(--text-normal)",
...props.style
}
}>
{props.children} {props.children}
</Card> </div>
); );
} }

View file

@ -141,8 +141,8 @@ export function humanFriendlyJoin(elements: any[], mapper: (e: any) => string =
* Calls .join(" ") on the arguments * Calls .join(" ") on the arguments
* classes("one", "two") => "one two" * classes("one", "two") => "one two"
*/ */
export function classes(...classes: string[]) { export function classes(...classes: Array<string | null | undefined>) {
return classes.filter(c => typeof c === "string").join(" "); return classes.filter(Boolean).join(" ");
} }
/** /**