Skip to content

Add Logs to frontend#1756

Open
panda7789 wants to merge 1 commit into
seriousm4x:masterfrom
panda7789:feature/logs-page
Open

Add Logs to frontend#1756
panda7789 wants to merge 1 commit into
seriousm4x:masterfrom
panda7789:feature/logs-page

Conversation

@panda7789

Copy link
Copy Markdown

Viewing logs currently requires opening the Docker logs, which is inconvenient. This PR adds a built-in log viewer directly to the application.

Changes

  • Adds a Logs tab to the navigation bar.
  • Introduces an in-memory ring buffer that stores the last 1,000 log entries, including timestamps and log levels, while preserving the existing stdout/stderr logging.
  • Exposes the logs through a new GET /api/upsnap/logs endpoint.

Notes

Please review the implementation carefully. I relied quite heavily on vibe coding for this feature since I primarily built it for my own use, so I'd appreciate an extra set of eyes on the overall design and implementation.

It looks like this
image

Adds a "Logs" tab to the navbar (superusers only) that lists application
log entries captured from backend/logger/logger.go. The logger now keeps
an in-memory ring buffer of the last 1000 log lines (with level and
timestamp) alongside its existing stdout/stderr output, exposed via a new
GET /api/upsnap/logs endpoint. The frontend logs page polls this endpoint
and renders entries in a table.
@seriousm4x

seriousm4x commented Jul 16, 2026

Copy link
Copy Markdown
Owner

Okay, there are multiple things I would change:

  1. Currently all logs shown in docker (stdout) are seperate from the pocketbase logs. I'd like them to be combined so we could query them via the build in logs route: https://pocketbase.io/docs/api-logs/#list-logs
    Something like:
	let logs = $state([] as LogModel[]);

	function getLogs() {
		$pocketbase.logs
			.getList()
			.then((data) => {
				logs = data;
			})
			.catch((err) => {
				toast.error(err.message ?? String(err));
			})
			.finally(() => (loading = false));
	}

This would need some investigation to still print logs to the console and also how to filter them from all http request logs.

  1. Adding filter dropdowns would be nice, like log level, type
  2. I'd prefere a reload button instead of requesting the logs every 5 seconds. Unfortunatly pocketbase does not allow subscribing to the logs collection for realtime updates.
  3. Using a table to show the logs doesn't work very well on mobile devices. It sould be more responsive.
  4. Use <PageLoading /> component instead of custom spinner.
  5. Since you are using AI, add translations for all languages, not just english.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants