core:frontend: Integrates frontend console messages to zenoh

[joaomariolago]

Summary by Sourcery

Integrate a console logger that intercepts all browser console calls and runtime errors and publishes them to a Zenoh backend, managing its lifecycle within the frontend application.

New Features:

• Implement a ConsoleLogger using zenoh-ts to intercept console methods and window error events for remote logging
• Initialize the console logger on application startup and perform cleanup before the root component is destroyed
• Assign a unique frontend identifier via nanoid and include it in all published log messages

Build:

• Add nanoid dependency

[sourcery-ai]

Reviewer's Guide

Intercepts browser console methods and global error events, structures them with a unique frontend ID, and publishes via a Zenoh session—initializing on app startup and cleaning up on component destroy.

Sequence diagram for intercepting and publishing console messages to Zenoh

sequenceDiagram
    participant Browser as Browser Console
    participant ConsoleLogger as ConsoleLogger
    participant Zenoh as Zenoh Session
    Browser->>ConsoleLogger: console.log/info/warn/error/debug(...args)
    ConsoleLogger->>ConsoleLogger: Structure message (level, message, frontend_id, ...)
    ConsoleLogger->>Zenoh: session.put(topic, payload)

Loading

Sequence diagram for ConsoleLogger initialization and cleanup lifecycle

sequenceDiagram
    participant App as App.vue
    participant ConsoleLogger as ConsoleLogger
    participant Zenoh as Zenoh Session
    App->>ConsoleLogger: initialize() on startup
    ConsoleLogger->>Zenoh: Session.open(config)
    App->>ConsoleLogger: cleanup() on destroy
    ConsoleLogger->>Zenoh: session.close()

Loading

Entity relationship diagram for frontend_id and console messages

erDiagram
    FRONTEND ||--o{ CONSOLE_MESSAGE : publishes
    FRONTEND {
      string frontend_id
    }
    CONSOLE_MESSAGE {
      string level
      string message
      string frontend_id
      string stack
      json args
    }

Loading

File-Level Changes

Change	Details	Files
Introduce ConsoleLogger to capture and publish console and error events	Backup original console methods Intercept console.log/info/warn/error/debug Listen for window error and unhandledrejection events Serialize arguments and publish structured messages via Zenoh Restore console methods and close session on cleanup	core/frontend/src/libs/console-logger.ts
Integrate the logger into the app lifecycle	Call consoleLogger.initialize() in main.ts Import consoleLogger and invoke cleanup() in App.vue beforeDestroy	core/frontend/src/main.ts core/frontend/src/App.vue
Generate and embed a unique frontend identifier	Add frontend_id property using nanoid(9) in Vuex store Attach frontend_id to every published ConsoleMessage	core/frontend/src/store/frontend.ts
Add nanoid dependency for ID generation	Include "nanoid": "^5.1.5" in package.json	core/frontend/package.json

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @joaomariolago - I've reviewed your changes - here's some feedback:

• Guard consoleLogger.initialize() behind an environment or config flag (e.g. only in production) to avoid performance overhead and noise during development.
• Extract the hard-coded Zenoh API URL (/zenoh-api/) into a configurable setting so you can customize the endpoint per deployment without changing code.
• Consider packaging consoleLogger as a Vue plugin or using a centralized lifecycle hook so initialization and cleanup are automatically tied to the app start/stop rather than manually invoking in main.ts and App.vue.

Prompt for AI Agents

Please address the comments from this code review:
## Overall Comments
- Guard `consoleLogger.initialize()` behind an environment or config flag (e.g. only in production) to avoid performance overhead and noise during development.
- Extract the hard-coded Zenoh API URL (`/zenoh-api/`) into a configurable setting so you can customize the endpoint per deployment without changing code.
- Consider packaging `consoleLogger` as a Vue plugin or using a centralized lifecycle hook so initialization and cleanup are automatically tied to the app start/stop rather than manually invoking in `main.ts` and `App.vue`.

## Individual Comments

### Comment 1
<location> `core/frontend/src/libs/console-logger.ts:114` </location>
<code_context>
+      const topic = `frontend/${frontend.frontend_id}`
+      const payload = JSON.stringify(message)
+
+      this.session.put(topic, payload)
+    } catch (error) {
+      this.originalConsole.error('[ConsoleLogger] Failed to publish message:', error)
</code_context>

<issue_to_address>
The result of this.session.put is not awaited, which may cause unhandled promise rejections.

Please await or handle the returned Promise to prevent silent failures if the operation fails.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[joaoantoniocardoso]

Nice feature! I'm adding some suggestions here, but I haven't tested it yet.

[patrickelectric]

I would recommend using https://docs.foxglove.dev/docs/visualization/message-schemas/log
and using as schema for APPLICATION_JSON Foxglove.Log

[patrickelectric]

Just to be sure, did you tested with https://github.com/bevry/get-current-line ?