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 { Margins } from "@utils/margins";
import { LazyComponent } from "@utils/misc";
import { Margins, React } from "@webpack/common";
import { React } from "@webpack/common";
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.";
return (
<ErrorCard style={{
overflow: "hidden",
}}>
<ErrorCard style={{ overflow: "hidden" }}>
<h1>Oh no!</h1>
<p>{msg}</p>
<code>
{this.state.message}
{!!this.state.stack && (
<pre className={Margins.marginTop8}>
<pre className={Margins.top8}>
{this.state.stack}
</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/>.
*/
import { Card } from "@webpack/common";
import "./ErrorCard.css";
interface Props {
style?: React.CSSProperties;
className?: string;
}
export function ErrorCard(props: React.PropsWithChildren<Props>) {
import { classes } from "@utils/misc";
import type { HTMLProps } from "react";
export function ErrorCard(props: React.PropsWithChildren<HTMLProps<HTMLDivElement>>) {
return (
<Card className={props.className} style={
{
padding: "2em",
backgroundColor: "#e7828430",
borderColor: "#e78284",
color: "var(--text-normal)",
...props.style
}
}>
<div {...props} className={classes(props.className, "vc-error-card")}>
{props.children}
</Card>
</div>
);
}

View file

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