Add debug route

.env.local

@@ -1 +1,2 @@
 VITE_DUFFLEPUD_URL=http://localhost:8000
+VITE_SHOW_DEBUG_ROUTE=true

.env.production

@@ -1 +1,2 @@
 VITE_DUFFLEPUD_URL=https://dufflepud.onrender.com
+VITE_SHOW_DEBUG_ROUTE=false

src/App.svelte

@@ -10,6 +10,7 @@
   import {cubicInOut} from "svelte/easing"
   import {Router, Route, links, navigate} from "svelte-routing"
   import {globalHistory} from "svelte-routing/src/history"
+  import {log, warn} from 'src/util/logger'
   import {displayPerson, isLike} from 'src/util/nostr'
   import {timedelta, shuffle, now, sleep} from 'src/util/misc'
   import cmd from 'src/agent/cmd'
@@ -38,6 +39,7 @@
   import Search from "src/routes/Search.svelte"
   import Alerts from "src/routes/Alerts.svelte"
   import Notes from "src/routes/Notes.svelte"
+  import Debug from "src/routes/Debug.svelte"
   import Login from "src/routes/Login.svelte"
   import Logout from "src/routes/Logout.svelte"
   import Profile from "src/routes/Profile.svelte"
@@ -107,10 +109,10 @@
         .forEach(conn => conn.disconnect())
 
       // Log stats for debugging purposes
-      console.log(
+      log(
         'Connection stats',
         pool.getConnections()
-          .map(({nostr: {url}, stats: s}) => ({url, avgRequest: s.timer / s.count}))
+          .map(({nostr: {url}, stats: s}) => `${url} ${s.timer / s.count}`)
       )
 
       // Alert the user to any heinously slow connections
@@ -147,7 +149,7 @@
             return {...await res.json(), url, refreshed_at: now()}
           } catch (e) {
             if (!e.toString().includes('Failed to fetch')) {
-              console.warn(e)
+              warn(e)
             }
 
             return {url, refreshed_at: now()}
@@ -230,6 +232,7 @@
       <Route path="/settings" component={Settings} />
       <Route path="/login" component={Login} />
       <Route path="/logout" component={Logout} />
+      <Route path="/debug" component={Debug} />
       <Route path="/:entity" let:params>
         {#key params.entity}
         <Bech32Entity entity={params.entity} />
@@ -312,6 +315,13 @@
         </a>
       </li>
       {/if}
+      {#if import.meta.env.VITE_SHOW_DEBUG_ROUTE === 'true'}
+      <li class="cursor-pointer">
+        <a class="block px-4 py-2 hover:bg-accent transition-all" href="/debug">
+          <i class="fa-solid fa-bug mr-2" /> Debug
+        </a>
+      </li>
+      {/if}
     </ul>
 
     <div

src/agent/cmd.js

@@ -1,6 +1,7 @@
 import {prop, pick, join, uniqBy, last} from 'ramda'
 import {get} from 'svelte/store'
 import {first} from "hurdak/lib/hurdak"
+import {log} from 'src/util/logger'
 import {roomAttrs, displayPerson} from 'src/util/nostr'
 import {getBestRelay} from 'src/agent/helpers'
 import database from 'src/agent/database'
@@ -88,7 +89,7 @@ const publishEvent = (relays, kind, {content = '', tags = []} = {}) => {
   const createdAt = Math.round(new Date().valueOf() / 1000)
   const event = {kind, content, tags, pubkey, created_at: createdAt}
 
-  console.log("Publishing", event, relays)
+  log("Publishing", event, relays)
 
   return network.publish(relays, event)
 }

src/agent/database.ts

@@ -2,6 +2,7 @@ import {debounce} from 'throttle-debounce'
 import {filter, always, is, prop, find, without, pluck, all, identity} from 'ramda'
 import {writable, derived} from 'svelte/store'
 import {switcherFn, createMap, ensurePlural} from 'hurdak/lib/hurdak'
+import {log, error} from 'src/util/logger'
 import {defer, where, now, timedelta, asyncIterableToArray} from 'src/util/misc'
 
 // Types
@@ -30,7 +31,7 @@ const worker = new Worker(
   {type: 'module'}
 )
 
-worker.addEventListener('error', e => console.error(e))
+worker.addEventListener('error', error)
 
 class Channel {
   id: string
@@ -214,6 +215,7 @@ const defineTable = (name: string, pk: string, opts: TableOpts = {}): Table => {
 
   // Sync from storage initially
   ;(async () => {
+    const t = Date.now()
     const initialData = {}
     for await (const {k, v} of iterate(name)) {
       if (isValid(v)) {
@@ -228,6 +230,8 @@ const defineTable = (name: string, pk: string, opts: TableOpts = {}): Table => {
       setAndNotify(initialData)
     }
 
+    log(`Table ${name} ready in ${Date.now() - t}ms`)
+
     ready.set(true)
   })()
 

src/agent/keys.ts

@@ -1,6 +1,7 @@
 import {nip04} from 'nostr-tools'
 import {getPublicKey, getEventHash, signEvent} from 'nostr-tools'
 import {get} from 'svelte/store'
+import {error} from 'src/util/logger'
 import {synced} from 'src/util/misc'
 
 let signingFunction
@@ -64,7 +65,8 @@ const getCrypt = () => {
           ? nip04.decrypt($privkey, pubkey, message)
           : await nostr.nip04.decrypt(pubkey, message)
       } catch (e) {
-        console.error(e)
+        error(e)
+
         return `<Failed to decrypt message: ${e}>`
       }
     },

src/agent/pool.ts

@@ -3,6 +3,7 @@ import type {MyEvent} from 'src/util/types'
 import {relayInit} from 'nostr-tools'
 import {uniqBy, prop, find, is} from 'ramda'
 import {ensurePlural} from 'hurdak/lib/hurdak'
+import {warn} from 'src/util/logger'
 import {isRelay} from 'src/util/nostr'
 import {sleep} from 'src/util/misc'
 import database from 'src/agent/database'
@@ -166,7 +167,7 @@ const subscribe = async (relays, filters, {onEvent, onEose}: Record<string, (e:
     conn.stats.activeCount += 1
 
     if (conn.stats.activeCount > 10) {
-      console.warn(`Relay ${conn.nostr.url} has >10 active subscriptions`)
+      warn(`Relay ${conn.nostr.url} has >10 active subscriptions`)
     }
 
     return Object.assign(sub, {conn})

src/agent/sync.ts

@@ -1,6 +1,7 @@
 import {pick, identity, isEmpty} from 'ramda'
 import {nip05} from 'nostr-tools'
 import {noop, createMap, ensurePlural, switcherFn} from 'hurdak/lib/hurdak'
+import {log, warn} from 'src/util/logger'
 import {now, timedelta, shuffle, hash} from 'src/util/misc'
 import {personKinds, Tags, roomAttrs, isRelay} from 'src/util/nostr'
 import database from 'src/agent/database'
@@ -84,7 +85,7 @@ const processProfileEvents = async events => {
           }
         },
         default: () => {
-          console.log(`Received unsupported event type ${e.kind}`)
+          log(`Received unsupported event type ${e.kind}`)
         },
       }),
       updated_at: now(),
@@ -256,7 +257,7 @@ const tryJson = f => {
     return f()
   } catch (e) {
     if (!e.toString().includes('JSON')) {
-      console.warn(e)
+      warn(e)
     }
   }
 }

src/agent/workers/database.js

@@ -1,6 +1,7 @@
 import lf from 'localforage'
 import memoryStorageDriver from 'localforage-memoryStorageDriver'
 import {switcherFn} from 'hurdak/lib/hurdak'
+import {error} from 'src/util/logger'
 import {where} from 'src/util/misc'
 
 // Firefox private mode doesn't have access to any storage options
@@ -47,10 +48,5 @@ addEventListener('message', async ({data: {topic, payload, channel}}) => {
   })
 })
 
-addEventListener('error', event => {
-  console.error(event.error)
-})
-
-addEventListener('unhandledrejection', event => {
-  console.error(event)
-})
+addEventListener('error', error)
+addEventListener('unhandledrejection', error)

src/app/ui.ts

@@ -7,6 +7,7 @@ import {nip19} from 'nostr-tools'
 import {writable, get} from "svelte/store"
 import {globalHistory} from "svelte-routing/src/history"
 import {synced, sleep} from "src/util/misc"
+import {warn} from 'src/util/logger'
 
 // Routing
 
@@ -104,7 +105,7 @@ export const logUsage = async name => {
       await fetch(`${dufflepudUrl}/usage/${session}/${name}`, {method: 'post' })
     } catch (e) {
       if (!e.toString().includes('Failed to fetch')) {
-        console.warn(e)
+        warn(e)
       }
     }
   }

src/routes/Debug.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import {flatten, reverse} from 'ramda'
+  import {fly} from 'svelte/transition'
+  import {logs} from 'src/util/logger.js'
+  import {formatTimestamp} from 'src/util/misc'
+  import Content from 'src/partials/Content.svelte'
+</script>
+
+<Content>
+  {#each reverse(flatten($logs)) as {created_at, message}}
+    <div in:fly={{y: 20}} class="text-sm flex flex-col gap-2">
+      <div class="text-light underline">{formatTimestamp(created_at/1000)}</div>
+      <pre>{message.map(m => JSON.stringify(m, null, 2)).join(' ')}</pre>
+    </div>
+  {/each}
+</Content>
+

src/routes/Person.svelte

@@ -5,6 +5,7 @@
   import {nip19} from 'nostr-tools'
   import {fly} from 'svelte/transition'
   import {navigate} from 'svelte-routing'
+  import {log} from 'src/util/logger'
   import {renderContent} from 'src/util/html'
   import {displayPerson, Tags} from 'src/util/nostr'
   import Tabs from "src/partials/Tabs.svelte"
@@ -38,7 +39,7 @@
   $: following = find(t => t[1] === pubkey, $user?.petnames || [])
 
   onMount(async () => {
-    console.log('Person', npub, person)
+    log('Person', npub, person)
 
     // Add all the relays we know the person uses
     relays = relays.concat(getPubkeyRelays(pubkey))

src/routes/Profile.svelte

@@ -3,6 +3,7 @@
   import {fly} from 'svelte/transition'
   import {navigate} from "svelte-routing"
   import pick from "ramda/src/pick"
+  import {error} from "src/util/logger"
   import {stripExifData} from "src/util/html"
   import Input from "src/partials/Input.svelte"
   import Textarea from "src/partials/Textarea.svelte"
@@ -33,8 +34,8 @@
 
       if (file) {
         const reader = new FileReader()
+        reader.onerror = error
         reader.onload = () => values.picture = reader.result
-        reader.onerror = e => console.error(e)
         reader.readAsDataURL(await stripExifData(file))
       } else {
         values.picture = null

src/util/logger.js

@@ -0,0 +1,12 @@
+import {writable} from 'svelte/store'
+
+export const logs = writable([])
+
+const logAndAppend = (level, ...message) => {
+  logs.update($logs => $logs.concat({created_at: Date.now(), message}))
+  console[level](...message)
+}
+
+export const log = (...message) => logAndAppend('log', ...message)
+export const warn = (...message) => logAndAppend('warn', ...message)
+export const error = (...message) => logAndAppend('error', ...message)

src/util/misc.ts

@@ -3,6 +3,7 @@ import {allPass, prop, pipe, isNil, complement, equals, is, pluck, sum, identity
 import Fuse from "fuse.js/dist/fuse.min.js"
 import {writable} from 'svelte/store'
 import {isObject} from 'hurdak/lib/hurdak'
+import {warn} from 'src/util/logger'
 
 export const fuzzy = (data, opts = {}) => {
   const fuse = new Fuse(data, opts)
@@ -18,7 +19,7 @@ export const getLocalJson = (k) => {
   try {
     return JSON.parse(localStorage.getItem(k))
   } catch (e) {
-    console.warn(`Unable to parse ${k}: ${e}`)
+    warn(`Unable to parse ${k}: ${e}`)
 
     return null
   }
@@ -28,7 +29,7 @@ export const setLocalJson = (k, v) => {
   try {
     localStorage.setItem(k, JSON.stringify(v))
   } catch (e) {
-    console.warn(`Unable to set ${k}: ${e}`)
+    warn(`Unable to set ${k}: ${e}`)
   }
 }
 

src/views/ChatEdit.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {fly} from 'svelte/transition'
+  import {error} from "src/util/logger"
   import {stripExifData} from "src/util/html"
   import Input from "src/partials/Input.svelte"
   import Content from "src/partials/Content.svelte"
@@ -20,8 +21,8 @@
 
       if (file) {
         const reader = new FileReader()
+        reader.onerror = error
         reader.onload = () => room.picture = reader.result
-        reader.onerror = e => console.error(e)
         reader.readAsDataURL(await stripExifData(file))
       } else {
         room.picture = null

src/views/NoteDetail.svelte

@@ -3,6 +3,7 @@
   import {nip19} from 'nostr-tools'
   import {fly} from 'svelte/transition'
   import {first} from 'hurdak/lib/hurdak'
+  import {log} from 'src/util/logger'
   import {getEventRelays, getUserRelays} from 'src/agent/helpers'
   import network from 'src/agent/network'
   import Note from 'src/partials/Note.svelte'
@@ -21,7 +22,7 @@
     }
 
     if (note) {
-      console.log('NoteDetail', nip19.noteEncode(note.id), note)
+      log('NoteDetail', nip19.noteEncode(note.id), note)
 
       network.streamContext({
         depth: 10,