Svelte (Visual) Logger

Renders a graph of the logs built from the function call stack. Supports both serverside and client side logs.

Clicking on any logs will scroll to it and clicking on any other node will expand/collapse it. Logs within any particular file will be rendered from top to bottom.

https://github.com/ando818/Svelte-Logger/assets/67844237/72f02b68-7e33-4995-a871-3d096ca5401e

Install

https://www.npmjs.com/package/svelte-logger

npm i svelte-logger

In src/hooks.server.js add

import { logs } from 'svelte-logger/logstore.js';

import { get, writable } from 'svelte/store';

export async function handle({ event, resolve }) {
    if (event.url.pathname.startsWith('/postLog')) {
        let text = await event.request.text();
        let newLog = JSON.parse(text);
        logs.update((logs) => logs.concat(newLog));
        return new Response(JSON.stringify(get(logs)));
    }

    else if (event.url.pathname.startsWith('/getLogs')) {
        return new Response(JSON.stringify(get(logs)));
    }

    else if (event.url.pathname.startsWith('/clearLogs')) {
        logs.update((logs) => []);
        return new Response(JSON.stringify(get(logs)));
    }
    const response = await resolve(event);
    return response;
}

Usage

Logging

In any file you want to log

<script>
import { onMount } from 'svelte';
import { log } from 'svelte-logger';

onMount(() => {
   log("Hello");
   log({
       message: "Hello",
    item: {
        name: "Potatoes"
            }
        )
    }
</script>

Rendering

In any component where you want the logs to render (preferably an empty page)

<script>
import LogView from 'svelte-logger/LogView.svelte';    
</script>

<LogView/>

Disable console logs

From any file

 import { logToConsole } from 'svelte-logger';
 logToConsole(false);

Limitations

1. Logs from different components will not necessarily show in top to bottom order.
2. Paths from rendering components are not followed, and will show the rendered component at the root of the graph.
3. Some others I haven't discovered yet.