diff --git a/src/bug-issue-template.js b/src/bug-issue-template.js index 9c45ec9d..9dfe1eaf 100644 --- a/src/bug-issue-template.js +++ b/src/bug-issue-template.js @@ -5,9 +5,9 @@ export default ` // paste stack trace here \`\`\` -### localStorage +### Scene content \`\`\` -// paste localStorage content here (if it doesn't contain sensitive data) +// paste scene content here (if it doesn't contain sensitive data) \`\`\` `; diff --git a/src/components/TopErrorBoundary.tsx b/src/components/TopErrorBoundary.tsx index 08e56a8f..fcbc40e6 100644 --- a/src/components/TopErrorBoundary.tsx +++ b/src/components/TopErrorBoundary.tsx @@ -1,4 +1,6 @@ import React from "react"; +import { resetCursor } from "../utils"; +import { t } from "../i18n"; interface TopErrorBoundaryState { unresolvedError: Error[] | null; @@ -19,11 +21,12 @@ export class TopErrorBoundary extends React.Component< }; componentDidCatch(error: Error) { + resetCursor(); const _localStorage: any = {}; for (const [key, value] of Object.entries({ ...localStorage })) { try { _localStorage[key] = JSON.parse(value); - } catch { + } catch (error) { _localStorage[key] = value; } } @@ -90,49 +93,55 @@ export class TopErrorBoundary extends React.Component< return ( <div className="ErrorSplash"> <div className="ErrorSplash-messageContainer"> - <div className="ErrorSplash-paragraph bigger"> - Encountered an error. Please{" "} + <div className="ErrorSplash-paragraph bigger align-center"> + {t("errorSplash.headingMain_pre")} <button onClick={() => window.location.reload()}> - reload the page + {t("errorSplash.headingMain_button")} </button> - . </div> - <div className="ErrorSplash-paragraph"> - If reloading doesn't work. Try{" "} + <div className="ErrorSplash-paragraph align-center"> + {t("errorSplash.clearCanvasMessage")} <button onClick={() => { localStorage.clear(); window.location.reload(); }} > - clearing the canvas + {t("errorSplash.clearCanvasMessage_button")} </button> - .<br /> + <br /> <div className="smaller"> - (This will unfortunately result in loss of work.) + <span role="img" aria-label="warning"> + ⚠️ + </span> + {t("errorSplash.clearCanvasCaveat")} + <span role="img" aria-hidden="true"> + ⚠️ + </span> </div> </div> <div> <div className="ErrorSplash-paragraph"> - Before doing so, we'd appreciate if you opened an issue on our{" "} - <button onClick={this.createGithubIssue}>bug tracker</button>. - Please include the following error stack trace & localStorage - content (provided it's not private): + {t("errorSplash.openIssueMessage_pre")} + <button onClick={this.createGithubIssue}> + {t("errorSplash.openIssueMessage_button")} + </button> + {t("errorSplash.openIssueMessage_post")} </div> <div className="ErrorSplash-paragraph"> <div className="ErrorSplash-details"> - <label>Error stack trace:</label> + <label>{t("errorSplash.errorStack")}</label> <textarea rows={10} onPointerDown={this.selectTextArea} readOnly={true} value={ this.state.unresolvedError - ? "Loading data. please wait..." + ? t("errorSplash.errorStack_loading") : this.state.stack } /> - <label>LocalStorage content:</label> + <label>{t("errorSplash.sceneContent")}</label> <textarea rows={5} onPointerDown={this.selectTextArea} diff --git a/src/locales/en.json b/src/locales/en.json index c9a22b81..f4518cfb 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -92,5 +92,18 @@ "linearElement": "Click to start multiple points, drag for single line", "linearElementMulti": "Press Escape or Enter to finish", "resize": "You can constraint proportions by holding SHIFT while resizing" + }, + "errorSplash": { + "headingMain_pre": "Encountered an error. Try ", + "headingMain_button": "reloading the page.", + "clearCanvasMessage": "If reloading doesn't work, try ", + "clearCanvasMessage_button": "clearing the canvas.", + "clearCanvasCaveat": " This will result in loss of work ", + "openIssueMessage_pre": "Before doing so, we'd appreciate if you opened an issue on our ", + "openIssueMessage_button": "bug tracker.", + "openIssueMessage_post": " Please include the following error stack trace (and if it's not private, also the scene content):", + "errorStack": "Error stack trace:", + "errorStack_loading": "Loading data. please wait...", + "sceneContent": "Scene content:" } } diff --git a/src/styles.scss b/src/styles.scss index 9d384de0..93eb0fce 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -250,6 +250,7 @@ button, display: flex; align-items: center; justify-content: center; + user-select: text; .ErrorSplash-messageContainer { display: flex; @@ -264,8 +265,11 @@ button, .ErrorSplash-paragraph { margin: 15px 0; - text-align: center; max-width: 600px; + + &.align-center { + text-align: center; + } } .bigger,