Skip to content

core:frontend: Integrates frontend console messages to zenoh #3408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

joaomariolago
Copy link
Collaborator

@joaomariolago joaomariolago commented Jul 3, 2025

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

Copy link

sourcery-ai bot commented Jul 3, 2025

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

@joaomariolago joaomariolago force-pushed the add-frontend-logs-on-zenoh branch 2 times, most recently from ed279d4 to 9d7659e Compare July 3, 2025 13:43
@joaomariolago joaomariolago marked this pull request as ready for review July 3, 2025 13:46
Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Copy link
Member

@joaoantoniocardoso joaoantoniocardoso left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@joaomariolago joaomariolago force-pushed the add-frontend-logs-on-zenoh branch from 9d7659e to dd9b845 Compare July 3, 2025 14:05
const topic = `frontend/${frontend.frontend_id}`
const payload = JSON.stringify(message)

this.session.put(topic, payload, { encoding: Encoding.APPLICATION_JSON })
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

* Add a general ID for each frontend so other places can have a
  identifier to use when generating data related to a frontend session
* Integrate frontend console messages interceptor to connect with zenoh
  broker
* Publishes (debug, log, info, warn, error) to zenoh broker on
  `frontend/{id}` topic
@joaomariolago joaomariolago force-pushed the add-frontend-logs-on-zenoh branch from dd9b845 to 0b5ddd9 Compare July 4, 2025 16:03
Copy link
Member

@patrickelectric patrickelectric left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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.

3 participants