From 666f0835a4e3917659a17cd23e8bcd1d2541a1e3 Mon Sep 17 00:00:00 2001
From: Emilio Mariscal <emi.mariscal.dev@gmail.com>
Date: Fri, 31 Jan 2025 09:04:23 -0300
Subject: [PATCH] Improve error reporting

---
 src/App.css                            | 13 +++++--------
 src/components/ErrorBoundary/index.jsx | 17 +++++++++--------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/App.css b/src/App.css
index e3548d2..20bae5a 100644
--- 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
index 70f7abc..a50f3c2 100644
--- 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:emilio.mariscal@hotosm.org?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:emilio.mariscal@hotosm.org?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}>emilio.mariscal@hotosm.org</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>
         );