Improve error reporting

hotosm · Jan 31, 2025 · 666f083 · 666f083
1 parent 2128b22
commit 666f083
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/src/App.css b/src/App.css
@@ -267,23 +267,20 @@
 .errorMessage {
   background-color: #f8f8f8;
   text-align: center;
-  padding: 2rem;
+  padding: 2rem 5rem;
   height: 100vh;
 }
 
-.errorMessage code {
+.errorMessage pre {
   margin: .5rem;
   padding: .5rem;
   border: 1px solid #D63F40;
-  width: 100%;
-}
-
-.errorMessage .primaryButton {
-  margin-top: 2rem;
+  overflow: hidden;
+  text-overflow:ellipsis; 
 }
 
 .errorMessage .buttons {
-  margin-top: 1rem;
+  margin-bottom: 2rem;
 }
 
 .errorMessage h2 {

diff --git a/src/components/ErrorBoundary/index.jsx b/src/components/ErrorBoundary/index.jsx
@@ -13,7 +13,8 @@ export default class ErrorBoundary extends React.Component {
 
     render() {
       if (this.state.hasError) {
-        const mailLink = `mailto:[email protected]?subject=ChatMap Error&body=Hi, something went wrong with chatmap: ${this.state.error.message}`
+        const errorMsg = `${this.state.error.fileName}(${this.state.error.lineNumber}): \n ${this.state.error.toString()} \n ${this.state.error.stack}`;
+        const mailLink = `mailto:[email protected]?subject=ChatMap Error&body=Hi, something went wrong with chatmap: ${errorMsg}`
         return (
           <div className="errorMessage">
             <header className="header">
@@ -26,13 +27,13 @@ export default class ErrorBoundary extends React.Component {
                 <strong className="highlighted">Please, send the detail below to <a href={mailLink}>[email protected]</a></strong>
                 <br />or create an issue in <a href="https://github.com/hotosm/chatmap/issues">github.com/hotosm/chatmap/issues</a>
               </p>
-              <code>
-              <strong>Error:</strong> {this.state.error.message}
-              </code>
-            </div>
-            <div className="buttons">
-              <a className="primaryButton" href={"/"}>Go back</a>
-              <a className="secondaryButton" href={mailLink}>Send error report</a>
+              <div className="buttons">
+                <a className="primaryButton" href={"/"}>Go back</a>
+                <a className="secondaryButton" href={mailLink}>Send error report</a>
+              </div>
+              <pre>
+                <strong>Error:</strong> {errorMsg}
+              </pre>
             </div>
           </div>
         );