feat: Improved realtime hooks monitoring

Bắt đầu với tab hiện có “Hooks” và xem xét issue cùng pull request liên quan của Nuxt, sau đó kiểm tra giới hạn của hookable được liên kết trong báo cáo. Giải quyết các câu hỏi thiết kế còn bỏ ngỏ về việc thu thập sự kiện, lọc, dấu thời gian, lưu trữ payload và các hook của listener trước khi triển khai hành vi giám sát được yêu cầu.

🆒 Your use case

Related issues: https://github.com/nuxt/nuxt/issues/31892 and https://github.com/nuxt/nuxt/pull/31977

The current Hooks tab shows registered hooks and how many times they have been called. This is useful, but it would be even better if we could see the actual calls and listeners to the hooks in real time, including time stamps and the ability to filter by hook name and type (emit vs listen).

This is a common feature in many frameworks which let you monitor events in real time, and it would be a great addition to the Hooks tab. It would greatly improve the debugging experience.

Currently as you can see, when a hook is called, it only shows the number of times it has been called and the execution time. But it doesn't report when the hook was called, what the arguments were, and what listeners were called. There is also no way to filter hooks. This makes it more difficult to debug issues related to hooks.

Screencast

https://github.com/user-attachments/assets/11ca5e98-763b-4759-bb59-42796499666f

For example, here is how Events are monitored in Laravel. It shows a list of most recent events, how long ago it happened and supports filtering:

There is also a current limitation of hookable which does not have an API to hook into the listener calls. It is only possible to hook into the callHook method but not the hook method. So we cannot report on the listeners that are called. I already opened an issue regarding this - https://github.com/unjs/hookable/issues/117

🆕 The solution you'd like

In our company we created a custom NuxtDevtools module for this. It has a lot of limitations but it shows both emit and listen events, shows a timestamp and allows filtering by name and type. Emits are green, listens are blue. It uses LocalStorage to log the events. I think this should be built into the core of Nuxt Devtools.

Screencast

https://github.com/user-attachments/assets/294d63cf-e87e-47d4-928b-ae24b0ca459a

Features

• Show a list of hooks sorted by most recent
• Show a time stamp of when the hook was called (both emit and listen)
• Show the arguments passed to the hook
• Show both emit and listen events
• Allow filtering by hook name and type (e.g. show only callHook calls vs show only hook calls)
• Support for regex filtering (e.g. /show this hook/ -/hide this hook/)

Discussion Points

[ ] Should this be integrated into the existing Hooks tab or should it be a separate Events tab?
[ ] Can we patch hookable to allow hooking into listener calls?
[ ] Default filters, e.g. show only user hooks, hide system hooks. Regex filtering support.
[ ] Where should the data be stored? In LocalStorage? What about SSR?
[ ] Storing payload in LocalStorage might quickly baloon in size, use different storage or have a limit for payload?

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response