Automated method/prop call logging

[tohagan]

What problem does this feature solve?

Some years ago I wrote an AOP style JS library for Sencha framework that injects logging or breakpoints (or in fact any transformation) on a set of methods. Methods were selected using patterns (string, array or regex) corresponding to Sencha class names, class namespaces and method names. If ported to Vue they would be of course be component/directive/filter names and method/prop/computed names.

This approach could be also integrated with logging of Vuex actions and mutations.

AutoLogger library displays nested calls as collapsible regions in the Chrome console. It injects optimised call logging that can record any/all of:

• component and method name,
• call arguments and response,
• exceptions,
• call timing
• nested call depth

Since it relies on method wrapping it has zero overhead when disabled so ideal for diagnosing faults in both development and production builds.

So I figure it would be very useful to port this lib to Vue to do the same for Vue components and I think the ideal place to do this would be in Vue's DevTools.

Here’s my old Sencha method injection lib …

• https://github.com/tohagan/Sencha.AutoLogger

What does the proposed API look like?

Add a DevTools view that ...

• v1. Allow a developer to create rules to match component names (1) and methods/props (2) with selected logging features.
• v2. Add a tree view of component names and methods to turn on logging & log features.

You might prefer to integrate this into the existing event view so a developer could see a sequence of method calls in the context of other Vue events. Since pattern based logging can emit a large number of calls, you might then want a means to filter what's displayed.

[tohagan]

I found this toolkit saved me time (particularly in remote debugging on mobile devices & device farms). I think this would a powerful tool - particularly when used with remote debugging via your Electron app.

[tohagan]

FYI ... This injection API retains a reference to the original intercepted method as a property of the wrappered method so you can always safely undo the injection. So if DevTools had a UI to select/unselect logging features (args, return value, timing, exceptions etc) the API could detect and undo any previous injection before applying a new one.