Redirecting console output to nicegui frontend

[FabianGoessling]

Hello, I wanted to share a bit of my experience with nicegui so far.
Most of my scripts are standard synchronous python calls tied to an application object. This object does a log of logging or even printing, and of course sometimes unexpected exceptions.
Prior to adopting nicegui, keeping track of the logs either required to keep a console window open in addition to my frontend window (chrome/pywebview) or even inserting a grapqhlql endpoint in my FastAPI app via strawberry. The resulting stream can be subscribed to with some more JS code and finally the stream of messages can be consumed by a vue/vuetify component. Sounds like a lot of additional code? It surely is...

Using the log component and some tinkering, the below example shows how the full (?) console output can be redirected. Thus the console window can be hidden (pythonw.exe) and the native window makes the illusion of a "fully" native app complete.

Hopefully this is of use to anyone,
Greetings from Münster ;)

from nicegui import ui, app
import time
import asyncio
import sys
from io import StringIO

from logging import getLogger, StreamHandler

logger = getLogger(__name__)
logger.setLevel("DEBUG")


# Backend
def long_sync_func():
    """A synchronous function with a lot of printing or logging."""
    for _ in range(3):
        time.sleep(5)
        print(f"Hi there from a print.")
        logger.info("Hi from a logger.")
    raise Exception("Uh oh this is an exception.")


# Frontend
async def button_callback():
    """Called after button click"""
    await asyncio.to_thread(long_sync_func)


async def start_stream():
    """Start a 'stream' of console outputs."""
    # Create buffer
    string_io = StringIO()
    # Standard ouput like a print
    sys.stdout = string_io
    # Errors/Exceptions
    sys.stderr = string_io
    # Logmessages
    stream_handler = StreamHandler(string_io)
    stream_handler.setLevel("DEBUG")
    logger.addHandler(stream_handler)
    while 1:
        await asyncio.sleep(1)  # need to update ui
        # Push the log component and reset the buffer
        log.push(string_io.getvalue())
        string_io.truncate(0)


button = ui.button("Callback", on_click=button_callback)
log = ui.log(20).classes("w-full").style("height: 500px")
app.on_startup(start_stream)
ui.run()

[natankeddem]

This is an example of redirecting exceptions to a ui.notify element. I like this implementation because it doesn't really change the rest of your site layout.

import traceback
from nicegui import app, ui

app.on_exception(lambda e: ui.notify(traceback.format_exception(e)))

def raise_exception():
    raise Exception

ui.button('Raise Exception', on_click=raise_exception)

ui.run()

[FabianGoessling]

Hi, i'm using this approach for success or error messages as well, but they are triggered at the end of the callback only. If there is something happening while the sync functions are running and i require a live feedback, i think something like the io buffer is required. After all we could redirect the console to notifications as well. Let me know if there is different approach.

[rodja]

Thanks for sharing this, @FabianGoessling. It can indeed be very beneficial to view the full logs without needing to log into the host system! @natankeddem started a discussion about monitoring the nicegui.io website a few days ago: #1633