Playground more detailed error

commit_hash:2e5b6166260b9ed12949dc26c9cdea6d0a88091e

site/client/src/components/LinksPopup.svelte

@@ -6,7 +6,7 @@
     import { LANGUAGE_CTX, LanguageContext } from '../data/languageContext';
     import Button from './Button.svelte';
 
-    import { save } from '../data/sessionController';
+    import { CustomError, save } from '../data/sessionController';
     import CopyButton from './CopyButton.svelte';
 
     export let node: HTMLElement;
@@ -104,9 +104,10 @@
                 </div>
                 <img class="links-popup__qr" src={qr} alt={$l10n('qrCode')}>
             </div>
-        {:catch _err}
+        {:catch err}
             <div class="links-popup__content">
-                {$l10n('loadError')}
+                <div class="links-popup__error-icon"></div>
+                {err instanceof CustomError ? err.message : $l10n('loadError')}
             </div>
         {/await}
     {:else}
@@ -209,6 +210,16 @@
         margin-top: 16px;
     }
 
+    .links-popup__error-icon {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+        vertical-align: -0.1em;
+        background: no-repeat 50% 50% url(../assets/errors.svg);
+        background-size: contain;
+    }
+
     @keyframes rotate {
         from {
             transform: rotate(0);

site/client/src/data/sessionController.ts

@@ -151,6 +151,12 @@ async function genLinks(uuid: string) {
     };
 }
 
+export class CustomError extends Error {
+    constructor(message?: string) {
+        super(message);
+    }
+}
+
 export async function save() {
     const curSession = get(session);
     if (curSession.uuid && curSession.writeKey) {
@@ -172,7 +178,13 @@ export async function save() {
         }).then(
             res => {
                 if (!res.ok) {
-                    throw new Error('Not ok');
+                    return res.json().then(json => {
+                        if (json && json.error) {
+                            throw new CustomError(json.error);
+                        } else {
+                            throw new Error('Not ok');
+                        }
+                    });
                 }
                 return res.json();
             }

site/server/app.js

@@ -75,6 +75,10 @@ router.post('/api/share', async ctx => {
 
         if (err instanceof DataViolationError) {
             ctx.status = 400;
+            ctx.body = {
+                ok: 0,
+                error: err.message
+            };
         } else {
             ctx.status = 500;
         }