add top error boundary & reset localStorage on error (#493)

* add top error boundary & reset localStorage on error

* add issue tracker details and link

* add pointer cursor to buttons

* Update src/bug-issue-template.js

Co-Authored-By: Lipis <lipiridis@gmail.com>

* Update src/styles.scss

Co-Authored-By: Lipis <lipiridis@gmail.com>

* Update src/bug-issue-template.js

Co-Authored-By: Lipis <lipiridis@gmail.com>

* use open-color colors

* use Cascadia font

Co-authored-by: Lipis <lipiridis@gmail.com>

src/index.tsx

@@ -1371,4 +1371,100 @@ export class App extends React.Component<any, AppState> {
 const AppWithTrans = withTranslation()(App);
 
 const rootElement = document.getElementById("root");
-ReactDOM.render(<AppWithTrans />, rootElement);
+
+class TopErrorBoundary extends React.Component {
+  state = { hasError: false, stack: "", localStorage: "" };
+
+  static getDerivedStateFromError(error: any) {
+    console.error(error);
+    return {
+      hasError: true,
+      localStorage: JSON.stringify({ ...localStorage }),
+      stack: error.stack
+    };
+  }
+
+  private selectTextArea(event: React.MouseEvent<HTMLTextAreaElement>) {
+    (event.target as HTMLTextAreaElement).select();
+  }
+
+  private async createGithubIssue() {
+    let body = "";
+    try {
+      const templateStr = (await import("./bug-issue-template")).default;
+      if (typeof templateStr === "string") {
+        body = encodeURIComponent(templateStr);
+      }
+    } catch {}
+
+    window.open(
+      `https://github.com/excalidraw/excalidraw/issues/new?body=${body}`
+    );
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="ErrorSplash">
+          <div className="ErrorSplash-messageContainer">
+            <div className="ErrorSplash-paragraph bigger">
+              Encountered an error. Please{" "}
+              <button onClick={() => window.location.reload()}>
+                reload the page
+              </button>
+              .
+            </div>
+            <div className="ErrorSplash-paragraph">
+              If reloading doesn't work. Try{" "}
+              <button
+                onClick={() => {
+                  localStorage.clear();
+                  window.location.reload();
+                }}
+              >
+                clearing the canvas
+              </button>
+              .<br />
+              <div className="smaller">
+                (This will unfortunately result in loss of work.)
+              </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):
+              </div>
+              <div className="ErrorSplash-paragraph">
+                <div className="ErrorSplash-details">
+                  <label>Error stack trace:</label>
+                  <textarea
+                    rows={10}
+                    onClick={this.selectTextArea}
+                    defaultValue={this.state.stack}
+                  />
+                  <label>LocalStorage content:</label>
+                  <textarea
+                    rows={5}
+                    onClick={this.selectTextArea}
+                    defaultValue={this.state.localStorage}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+ReactDOM.render(
+  <TopErrorBoundary>
+    <AppWithTrans />
+  </TopErrorBoundary>,
+  rootElement
+);