Separated specification and implementation in TopErrorBoundary (#1031)
* Encapsulate SceneHistory. A little. * Clean up TopErrorBoundary
This commit is contained in:
parent
f6b36519f1
commit
1e8cd2bd1c
@ -20,6 +20,10 @@ export class TopErrorBoundary extends React.Component<
|
|||||||
localStorage: "",
|
localStorage: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return this.state.hasError ? this.errorSplash() : this.props.children;
|
||||||
|
}
|
||||||
|
|
||||||
componentDidCatch(error: Error) {
|
componentDidCatch(error: Error) {
|
||||||
resetCursor();
|
resetCursor();
|
||||||
const _localStorage: any = {};
|
const _localStorage: any = {};
|
||||||
@ -88,74 +92,70 @@ export class TopErrorBoundary extends React.Component<
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
private errorSplash() {
|
||||||
if (this.state.hasError) {
|
return (
|
||||||
return (
|
<div className="ErrorSplash">
|
||||||
<div className="ErrorSplash">
|
<div className="ErrorSplash-messageContainer">
|
||||||
<div className="ErrorSplash-messageContainer">
|
<div className="ErrorSplash-paragraph bigger align-center">
|
||||||
<div className="ErrorSplash-paragraph bigger align-center">
|
{t("errorSplash.headingMain_pre")}
|
||||||
{t("errorSplash.headingMain_pre")}
|
<button onClick={() => window.location.reload()}>
|
||||||
<button onClick={() => window.location.reload()}>
|
{t("errorSplash.headingMain_button")}
|
||||||
{t("errorSplash.headingMain_button")}
|
</button>
|
||||||
</button>
|
</div>
|
||||||
|
<div className="ErrorSplash-paragraph align-center">
|
||||||
|
{t("errorSplash.clearCanvasMessage")}
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
localStorage.clear();
|
||||||
|
window.location.reload();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("errorSplash.clearCanvasMessage_button")}
|
||||||
|
</button>
|
||||||
|
<br />
|
||||||
|
<div className="smaller">
|
||||||
|
<span role="img" aria-label="warning">
|
||||||
|
⚠️
|
||||||
|
</span>
|
||||||
|
{t("errorSplash.clearCanvasCaveat")}
|
||||||
|
<span role="img" aria-hidden="true">
|
||||||
|
⚠️
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="ErrorSplash-paragraph align-center">
|
</div>
|
||||||
{t("errorSplash.clearCanvasMessage")}
|
<div>
|
||||||
<button
|
<div className="ErrorSplash-paragraph">
|
||||||
onClick={() => {
|
{t("errorSplash.openIssueMessage_pre")}
|
||||||
localStorage.clear();
|
<button onClick={this.createGithubIssue}>
|
||||||
window.location.reload();
|
{t("errorSplash.openIssueMessage_button")}
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("errorSplash.clearCanvasMessage_button")}
|
|
||||||
</button>
|
</button>
|
||||||
<br />
|
{t("errorSplash.openIssueMessage_post")}
|
||||||
<div className="smaller">
|
|
||||||
<span role="img" aria-label="warning">
|
|
||||||
⚠️
|
|
||||||
</span>
|
|
||||||
{t("errorSplash.clearCanvasCaveat")}
|
|
||||||
<span role="img" aria-hidden="true">
|
|
||||||
⚠️
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="ErrorSplash-paragraph">
|
||||||
<div className="ErrorSplash-paragraph">
|
<div className="ErrorSplash-details">
|
||||||
{t("errorSplash.openIssueMessage_pre")}
|
<label>{t("errorSplash.errorStack")}</label>
|
||||||
<button onClick={this.createGithubIssue}>
|
<textarea
|
||||||
{t("errorSplash.openIssueMessage_button")}
|
rows={10}
|
||||||
</button>
|
onPointerDown={this.selectTextArea}
|
||||||
{t("errorSplash.openIssueMessage_post")}
|
readOnly={true}
|
||||||
</div>
|
value={
|
||||||
<div className="ErrorSplash-paragraph">
|
this.state.unresolvedError
|
||||||
<div className="ErrorSplash-details">
|
? t("errorSplash.errorStack_loading")
|
||||||
<label>{t("errorSplash.errorStack")}</label>
|
: this.state.stack
|
||||||
<textarea
|
}
|
||||||
rows={10}
|
/>
|
||||||
onPointerDown={this.selectTextArea}
|
<label>{t("errorSplash.sceneContent")}</label>
|
||||||
readOnly={true}
|
<textarea
|
||||||
value={
|
rows={5}
|
||||||
this.state.unresolvedError
|
onPointerDown={this.selectTextArea}
|
||||||
? t("errorSplash.errorStack_loading")
|
readOnly={true}
|
||||||
: this.state.stack
|
value={this.state.localStorage}
|
||||||
}
|
/>
|
||||||
/>
|
|
||||||
<label>{t("errorSplash.sceneContent")}</label>
|
|
||||||
<textarea
|
|
||||||
rows={5}
|
|
||||||
onPointerDown={this.selectTextArea}
|
|
||||||
readOnly={true}
|
|
||||||
value={this.state.localStorage}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
}
|
);
|
||||||
|
|
||||||
return this.props.children;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user