PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
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.
This commit is contained in:
Mime Čuvalo 2024-02-15 11:35:42 +00:00 committed by GitHub
parent 5bb60858b9
commit 5faac660bc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/editor/editor.css
View file

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

19
packages/editor/src/lib/components/default-components/DefaultErrorFallback.tsx
View file

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