errors: improve msg in dialog when error happens (#2844)

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

@@ -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);

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)}>