Skip to content
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.

Sign up for GitHub

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

Jump to bottom

hijack the console API and record corresponding events #234

Closed
Luiz-N opened this issue Jun 29, 2020 · 4 comments
Closed

hijack the console API and record corresponding events #234

Luiz-N opened this issue Jun 29, 2020 · 4 comments

Comments

@Luiz-N
Copy link

Luiz-N commented Jun 29, 2020

i'm looking to be able to capture events in the console while using rrweb. Specifically error events so this feature would be perfect. Any suggestions or examples I could look at for "hijacking the console" so that i could give this a try?
@Yuyz0112
Copy link
Member

Hi @Luiz-N

I would suggest dividing the development of this feature into two parts:

  1. capture console calls as rrweb events
  2. display rrweb console events during replaying

For the first part, you can check some existing implementation like this.

And for the second part, I'm not quite sure what's the best way to do it. I mean maybe we can call the console API during replaying to show the events we captured, or we can display them in part of the replayer. Any suggestions are welcomed and it should not block the first part.

@alexcroox
Copy link

alexcroox commented Jul 10, 2020 •
edited
Loading

This is how LogRocket handles it, showing both the console output and network calls in sync with the playback video.

It's incredibly handy for debugging errors and network calls while watching the playback

New Project (6)

@YunFeng0817 YunFeng0817 mentioned this issue Nov 22, 2020
Merged
Yuyz0112 pushed a commit that referenced this issue Nov 29, 2020
@YunFeng0817
feat: enable rrweb to record and replay log messages in console (#424)
4e7146e 
* wip: working on rrweb logger

* wip: can record and replay some simple log

* wip: can record and replay log's stack

* wip: try to serialize object

* wip: record and replay console logger

hijack all of the console functions.
add listener to thrown errors

* wip: record and replay console logger
add limit to the max number of log records

* feat: enable rrweb to record and replay log messages in console

this is the implementation of new feature request(issue #234)

here are a few points of description.
1. users need to set recordLog option in rrweb.record's parameter to record log messages.  The log recorder is off by default.
2. support recording and replaying all kinds of console functions. But the reliability of them should be tested more
3. the stringify function in  stringify.ts needs improvement. e.g. robustness, handler for cyclical structures and better support for more kinds of object
4. we can replay the log messages in a simulated html console like LogRocket by implementing the interface "ReplayLogger" in the future

* improve: the stringify function

1. handle cyclical structures
2. add stringify option to limit the length of result
3. handle function type

* refactor: simplify the type definition of ReplayLogger
@Yuyz0112
Copy link
Member

https://github.com/rrweb-io/rrweb/blob/master/docs/recipes/console.md

@alexcroox
Copy link

Amazing work thank you!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@alexcroox @Luiz-N @Yuyz0112