[GSoC] Devtron: Progress, Known Issues, and Next Steps

[hitarth-gg]

This issue is intended to track the remaining work, current limitations, and future improvements as part of the GSoC project.
A personal NPM Package, found here, can be used to check out the progress.

Progress & Ongoing Tasks

• Initial setup with prototype - chore: initial setup with prototype #265
• Migrate the prototype to TypeScript - chore: migrate to TypeScript #266
• Use Session to track IPC events sent to main process- feat: use Session to track IPCs and improve UI #268
• Use serviceWorker.startTask() to prevent Devtron's service worker from dying - feat: use Session to track IPCs and improve UI #268
• Distinguish between .on, .off, .addListener, .removeListener, .once, and .removeAllListeners methods on ipcRenderer, - feat: use Session to track IPCs and improve UI #268
• Optional auto-scroll to newly added event - feat: use Session to track IPCs and improve UI #268
• Dark Theme - feat: use Session to track IPCs and improve UI #268
• Add option to dock the Details Panel to the bottom or right - feat: use Session to track IPCs and improve UI #268
• Fix issues with CommonJS builds - fix: commonjs compatibility #269
• Remove the need to manually call monitorRenderer - feat: remove need to manually call monitorRenderer #271
  • Also fixes an issue where Devtron wouldn't install properly when sandbox: true is set in webPreferences.
• Add tooltips for buttons like "Toggle Dark Mode", "Clear Events", etc - feat: add tooltips to header buttons #274
• Fix type declarations not found - fix: type declarations not found and invalid require usage in ESM build #276
• Use system theme by default in Devtron UI - feat: default to system color scheme in UI #277
• Track IPC events sent from main process to the service workers - feat: track IPC events sent from main to service worker #273
• Track the time it takes for an IPC message sent via ipcRenderer.invoke or ipcRenderer.sendSync to receive a response from the main process - feat: track response time of invoke and sendSync methods on ipcRenderer  #275
• Publish a gist for Electron Fiddle that shows how to use Devtron (will be updated over time) - Electron Devtron Fiddle
• Set up testing environment and add some tests - test: set up testing environment #279
• Track the responses received by .sendSync and .invoke methods on ipcRenderer - feat: track response time of invoke and sendSync methods on ipcRenderer  #275
• Implement filtering for tracked IPC events - feat: add filtering support to event grid #284
• Allow users to suppress logs generated by Devtron - feat: add configurable logLevel to install options #283
• Add pre-commit lint checks and CI test runs (see comment).

Known Issues / Limitations

• IPC events sent from the main process to the service workers are not yet tracked.
• IPC events sent before Devtron is installed (during early app startup) might not be captured.
• ipcRenderer.once will be tracked as two separate events ipcRenderer.on and then ipcRenderer.removeListener.

Next Steps

• Tracking require and imports
• Event inspector for core Electron objects

[dsanders11]

Something I came across while playing with the published package which would be good to improve:

• Actions in the top right corner (toggle dark mode, clear events, etc) don't have a help text when you hover over them. They're mostly self-explanatory, but it would be good to have that help text regardless.

[yangannyx]

Hey! Some things I've run into while trying to install devtron in Notion:

• Edit: Ah, sorry if this is a repeat of the CJS issue discussed already in slack
  Notion uses moduleResolution: "Node" in our tsconfig, which is causing issues when resolving types from the devtron package:

  error TS2307: Cannot find module '@hitarth-gg/devtron' or its corresponding type declarations.
   There are types at '/home/circleci/repo/node_modules/@hitarth-gg/devtron/dist/types/index.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.
  

  I believe the fix is just to including the traditional "main", "module", and "types" package.json fields alongside the "exports" field.
• I was having trouble at first with seeing the Devtron panel show up, but that was because I was calling devtron.install() after I had already created the session partition I was interested in monitoring. It might be beneficial to add some documentation here on how to install devtron conditionally:
  • consumers might want to only install devtron in non-packaged environments
  • consumers that do this should ensure that they call devtron.install() before they create the session partitions they're interested in monitoring

[yangannyx]

For future development ergonomics, it'd be great to also set up some precommit hook logic that prevent commits if linting fails.
We should also configure CI to use your testing suite as well! Something to track for when we move out of userland and into electron