riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 55 Pull requests Projects 1 Activity

add proper error and disconnect handling

Browse source 
error handling shows you the error and offers the ability to reload;
disconnect handling shows you that the page will reload in a few seconds.
it uses exponential backoff with some random sprinkled into it to prevent overwhelming the server once people's clients decide to reconnect.
This commit is contained in:
りき萌 2024-08-25 12:53:53 +02:00
parent 84abba3e0b
commit 0d831698e2
8 changed files with 150 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

29
static/index.html
View file

@ -55,12 +55,38 @@
<rkgk-connection-status>
<dialog name="logging-in-dialog">
<rkgk-throbber class="loading"></rkgk-throbber><p>Logging in...</p>
<rkgk-throbber class="loading"></rkgk-throbber><p>Logging in…</p>
</dialog>
<dialog name="error-dialog" class="rkgk-panel">
<h1>owie! >_<</h1>
<p><i>Uh oh. Seems like the pipe cracked again… There's water everywhere.<br>The basement's half full already. God dammit.</i></p>
<p>Super sorry about this! But rakugaki encountered an error and has to restart.</p>
<p><b>Rest assured your drawings are safe and sound.</b></p>
<p>Either way… try refreshing the page and see if it helps. If not, please report a bug with the following details.</p>
<details>
<summary>Show error details</summary>
<textarea name="error-text" rows="10" readonly></textarea>
</details>
<p>Thank you from the mountain!</p>
<div style="display: flex; flex-direction: row; align-items: center; justify-content: end;">
<button name="refresh">Refresh</button>
</div>
</dialog>
<dialog name="disconnected-dialog">
<rkgk-throbber class="loading"></rkgk-throbber>
<p>Connection lost. Attempting to reconnect in <span name="reconnect-duration"></span>…</p>
</dialog>
</rkgk-connection-status>
<div class="fullscreen" id="js-loading">
<rkgk-throbber class="loading"></rkgk-throbber>
<noscript>
<style>
#js-loading>rkgk-throbber { display: none; }
@ -68,6 +94,7 @@
<p>
rakugaki is a web app and does not work without JavaScript :(<br>
but I swear it's a very lightweight and delightful web app!
You won't regret trying it out.
</p>
</noscript>
</div>