From 5faac660bc9f2547d0b4fd4818630791bdab1c72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= <mimecuvalo@gmail.com>
Date: Thu, 15 Feb 2024 11:35:42 +0000
Subject: [PATCH] errors: improve msg in dialog when error happens (#2844)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Right now it's hard to parse the stack trace to see what the problem is.
This just raises the msg up to a first-class position to get the gist of
the problem.

<img width="631" alt="Screenshot 2024-02-14 at 17 09 55"
src="https://github.com/tldraw/tldraw/assets/469604/d40b8bb4-e752-48d3-946d-6377c08e66fc">


### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Improves error dialog messaging.
---
 packages/editor/editor.css                    | 11 +++++++++++
 .../DefaultErrorFallback.tsx                  | 19 +++++++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/editor/editor.css b/packages/editor/editor.css
index e24b90e1a..391140744 100644
--- a/packages/editor/editor.css
+++ b/packages/editor/editor.css
@@ -1428,6 +1428,14 @@ it from receiving any pointer events or affecting the cursor. */
 	font-weight: 500;
 }
 
+.tl-error-boundary__content h4 {
+	border: 1px solid var(--color-low-border);
+	margin: -6px 0 0 0;
+	padding: var(--space-5);
+	border-radius: var(--radius-2);
+	font-weight: normal;
+}
+
 .tl-error-boundary__content p {
 	line-height: 1.5;
 	margin: 0px;
@@ -1435,6 +1443,7 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tl-error-boundary__content pre {
 	background-color: var(--color-muted-2);
+	margin-top: 0;
 	padding: var(--space-5);
 	border-radius: var(--radius-2);
 	overflow: auto;
@@ -1469,7 +1478,9 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tl-error-boundary__content__error {
 	position: relative;
+	margin: -6px 0 0 0;
 }
+
 .tl-error-boundary__content__error button {
 	position: absolute;
 	top: var(--space-2);
diff --git a/packages/editor/src/lib/components/default-components/DefaultErrorFallback.tsx b/packages/editor/src/lib/components/default-components/DefaultErrorFallback.tsx
index ce107d18d..626220827 100644
--- a/packages/editor/src/lib/components/default-components/DefaultErrorFallback.tsx
+++ b/packages/editor/src/lib/components/default-components/DefaultErrorFallback.tsx
@@ -166,12 +166,19 @@ My browser: ${navigator.userAgent}`
 							<a href="https://discord.gg/Cq6cPsTfNy">ask for help on Discord</a>.
 						</p>
 						{shouldShowError && (
-							<div className="tl-error-boundary__content__error">
-								<pre>
-									<code>{errorStack ?? errorMessage}</code>
-								</pre>
-								<button onClick={copyError}>{didCopy ? 'Copied!' : 'Copy'}</button>
-							</div>
+							<>
+								Message:
+								<h4>
+									<code>{errorMessage}</code>
+								</h4>
+								Stack trace:
+								<div className="tl-error-boundary__content__error">
+									<pre>
+										<code>{errorStack ?? errorMessage}</code>
+									</pre>
+									<button onClick={copyError}>{didCopy ? 'Copied!' : 'Copy'}</button>
+								</div>
+							</>
 						)}
 						<div className="tl-error-boundary__content__actions">
 							<button onClick={() => setShouldShowError(!shouldShowError)}>