import * as React from "react"; import StackTrace from "stacktrace-js"; import { CircularProgress, Link } from "@mui/material"; import Button from "@mui/material/Button"; import { Trans, withTranslation } from "react-i18next"; class ErrorBoundaryImpl extends React.Component { constructor(props) { super(props); this.state = { error: false, originalStack: null, niceStack: null, unsupportedIndexedDB: false, }; } componentDidCatch(error, info) { console.error("[ErrorBoundary] Error caught", error, info); // Special case for unsupported IndexedDB in Private Browsing mode (Firefox, Safari), see // - https://github.com/dexie/Dexie.js/issues/312 // - https://bugzilla.mozilla.org/show_bug.cgi?id=781982 const isUnsupportedIndexedDB = error?.name === "InvalidStateError" || (error?.name === "DatabaseClosedError" && error?.message?.indexOf("InvalidStateError") !== -1); if (isUnsupportedIndexedDB) { this.handleUnsupportedIndexedDB(); } else { this.handleError(error, info); } } handleError(error, info) { // Immediately render original stack trace const prettierOriginalStack = info.componentStack .trim() .split("\n") .map((line) => ` at ${line}`) .join("\n"); this.setState({ error: true, originalStack: `${error.toString()}\n${prettierOriginalStack}`, }); // Fetch additional info and a better stack trace StackTrace.fromError(error).then((stack) => { console.error("[ErrorBoundary] Stacktrace fetched", stack); const niceStack = `${error.toString()}\n${stack .map((el) => ` at ${el.functionName} (${el.fileName}:${el.columnNumber}:${el.lineNumber})`) .join("\n")}`; this.setState({ niceStack }); }); } handleUnsupportedIndexedDB() { this.setState({ error: true, unsupportedIndexedDB: true, }); } copyStack() { let stack = ""; if (this.state.niceStack) { stack += `${this.state.niceStack}\n\n`; } stack += `${this.state.originalStack}\n`; navigator.clipboard.writeText(stack); } render() { if (this.state.error) { if (this.state.unsupportedIndexedDB) { return this.renderUnsupportedIndexedDB(); } return this.renderError(); } return this.props.children; } renderUnsupportedIndexedDB() { const { t } = this.props; return (

{t("error_boundary_unsupported_indexeddb_title")} 😮

, discordLink: , matrixLink: , }} />

); } renderError() { const { t } = this.props; return (

{t("error_boundary_title")} 😮

, discordLink: , matrixLink: , }} />

{t("error_boundary_stack_trace")}

{this.state.niceStack ? (
{this.state.niceStack}
) : ( <> {t("error_boundary_gathering_info")} )}
{this.state.originalStack}
); } } const ErrorBoundary = withTranslation()(ErrorBoundaryImpl); // Adds props.t export default ErrorBoundary;