show errors in page

src/main.js

@@ -1,5 +1,45 @@
 import HMR from '@roxi/routify/hmr'
 import App from './App.svelte';
+import { logs } from './util/logs';
+
+function display(formatted, type) {
+    const displayed = {
+        text: formatted,
+        type
+    };
+
+    logs.update(toDisplay => {
+        toDisplay.push(displayed);
+        return toDisplay;
+    });
+
+    if(type !== "error") {
+        setTimeout(() => {
+            logs.update(toDisplay => {
+                const i = toDisplay.indexOf(displayed);
+                toDisplay.splice(i, 1);
+                return toDisplay;
+            });
+        }, 1000);
+    }
+}
+
+const error = console.error.bind(console);
+window.console.error = (...args) => {
+    error(...args);
+    display(JSON.stringify(args), "error");
+}
+
+window.onerror = (event, SourceBuffer, line, col, error) => {
+    error(error);
+    display(error.message + "\n" + error.stack, "error");
+}
+
+// const log = console.log.bind(console);
+// window.console.log = (...args) => {
+//     log(...args);
+//     display(JSON.stringify(args), "log");
+//}
 
 const app = HMR(App, { target: document.body }, 'routify-app')
 

src/pages/_layout.svelte

@@ -1,2 +1,28 @@
+<script>
+    import { logs } from "../util/logs";
+</script>
+
 <!-- routify:options preload="proximity" -->
 <slot />
+
+{#if $logs.length}
+    <div class="flow">
+        {#each $logs as item}
+            <div class="item {item.type}">
+                {item.text}
+            </div>
+        {/each}
+    </div>
+{/if}
+
+<style>
+    .flow {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        background: white;
+        border-radius: 5px 0 0 0;
+        padding: 5px;
+        box-shadow: 0 0 2px 0 black;
+    }
+</style>

src/util/logs.js

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const logs = writable([]);