-
Notifications
You must be signed in to change notification settings - Fork 100
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
base: master
Are you sure you want to change the base?
core:frontend: Integrates frontend console messages to zenoh #3408
Conversation
Reviewer's GuideIntercepts 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 ZenohsequenceDiagram
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)
Sequence diagram for ConsoleLogger initialization and cleanup lifecyclesequenceDiagram
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()
Entity relationship diagram for frontend_id and console messageserDiagram
FRONTEND ||--o{ CONSOLE_MESSAGE : publishes
FRONTEND {
string frontend_id
}
CONSOLE_MESSAGE {
string level
string message
string frontend_id
string stack
json args
}
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
ed279d4
to
9d7659e
Compare
There was a problem hiding this 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 inmain.ts
andApp.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>
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
There was a problem hiding this 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.
9d7659e
to
dd9b845
Compare
const topic = `frontend/${frontend.frontend_id}` | ||
const payload = JSON.stringify(message) | ||
|
||
this.session.put(topic, payload, { encoding: Encoding.APPLICATION_JSON }) |
There was a problem hiding this comment.
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
dd9b845
to
0b5ddd9
Compare
There was a problem hiding this 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 ?
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:
Build: