ErrorBoundary: Do not use any Discord components to be more robust
This commit is contained in:
parent
ccca41a168
commit
128ee41252
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
7
src/components/ErrorCard.css
Normal file
7
src/components/ErrorCard.css
Normal 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);
|
||||||
|
}
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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(" ");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue