xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enable rrweb to record and replay log messages in console (#424)

Browse Source 
* 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
This commit is contained in:
Lucky Feng
2020-11-29 18:12:03 +08:00
committed by GitHub
parent e3beeb445a
commit 4e7146e72b
13 changed files with 1289 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

714
test/__snapshots__/integration.test.ts.snap
View File

@@ -2002,6 +2002,720 @@ exports[`ignore 1`] = `
]"
`;
exports[`log`] = `
"[
{
\\"type\\": 0,
\\"data\\": {}
},
{
\\"type\\": 1,
\\"data\\": {}
},
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"type\\": 2,
\\"data\\": {
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {
\\"lang\\": \\"en\\"
},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
},
{
\\"type\\": 2,
\\"tagName\\": \\"meta\\",
\\"attributes\\": {
\\"charset\\": \\"UTF-8\\"
},
\\"childNodes\\": [],
\\"id\\": 6
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 7
},
{
\\"type\\": 2,
\\"tagName\\": \\"meta\\",
\\"attributes\\": {
\\"name\\": \\"viewport\\",
\\"content\\": \\"width=device-width, initial-scale=1.0\\"
},
\\"childNodes\\": [],
\\"id\\": 8
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 9
},
{
\\"type\\": 2,
\\"tagName\\": \\"meta\\",
\\"attributes\\": {
\\"http-equiv\\": \\"X-UA-Compatible\\",
\\"content\\": \\"ie=edge\\"
},
\\"childNodes\\": [],
\\"id\\": 10
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 11
},
{
\\"type\\": 2,
\\"tagName\\": \\"title\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"Log record\\",
\\"id\\": 13
}
],
\\"id\\": 12
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 14
}
],
\\"id\\": 4
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 15
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 17
},
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 19
}
],
\\"id\\": 18
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\",
\\"id\\": 20
}
],
\\"id\\": 16
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"assert\\",
\\"payload\\": [
\\"true\\",
\\"\\"assert\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"count\\",
\\"payload\\": [
\\"\\"count\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"countReset\\",
\\"payload\\": [
\\"\\"count\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"debug\\",
\\"payload\\": [
\\"\\"debug\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"dir\\",
\\"payload\\": [
\\"\\"dir\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"dirxml\\",
\\"payload\\": [
\\"\\"dirxml\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"group\\",
\\"payload\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"groupCollapsed\\",
\\"payload\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"info\\",
\\"payload\\": [
\\"\\"info\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"log\\",
\\"payload\\": [
\\"\\"log\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"table\\",
\\"payload\\": [
\\"\\"table\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"time\\",
\\"payload\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"timeEnd\\",
\\"payload\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"timeLog\\",
\\"payload\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"trace\\",
\\"payload\\": [
\\"\\"trace\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"warn\\",
\\"payload\\": [
\\"\\"warn\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"clear\\",
\\"payload\\": []
}
}
]"
`;
exports[`log 1`] = `
"[
{
\\"type\\": 0,
\\"data\\": {}
},
{
\\"type\\": 1,
\\"data\\": {}
},
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"type\\": 2,
\\"data\\": {
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {
\\"lang\\": \\"en\\"
},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 5
},
{
\\"type\\": 2,
\\"tagName\\": \\"meta\\",
\\"attributes\\": {
\\"charset\\": \\"UTF-8\\"
},
\\"childNodes\\": [],
\\"id\\": 6
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 7
},
{
\\"type\\": 2,
\\"tagName\\": \\"meta\\",
\\"attributes\\": {
\\"name\\": \\"viewport\\",
\\"content\\": \\"width=device-width, initial-scale=1.0\\"
},
\\"childNodes\\": [],
\\"id\\": 8
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 9
},
{
\\"type\\": 2,
\\"tagName\\": \\"meta\\",
\\"attributes\\": {
\\"http-equiv\\": \\"X-UA-Compatible\\",
\\"content\\": \\"ie=edge\\"
},
\\"childNodes\\": [],
\\"id\\": 10
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 11
},
{
\\"type\\": 2,
\\"tagName\\": \\"title\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"Log record\\",
\\"id\\": 13
}
],
\\"id\\": 12
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 14
}
],
\\"id\\": 4
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 15
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 17
},
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 19
}
],
\\"id\\": 18
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\",
\\"id\\": 20
}
],
\\"id\\": 16
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"assert\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:2:37\\"
],
\\"payload\\": [
\\"true\\",
\\"\\\\\\"assert\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"count\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:3:37\\"
],
\\"payload\\": [
\\"\\\\\\"count\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"countReset\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:4:37\\"
],
\\"payload\\": [
\\"\\\\\\"count\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"debug\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:5:37\\"
],
\\"payload\\": [
\\"\\\\\\"debug\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"dir\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:6:37\\"
],
\\"payload\\": [
\\"\\\\\\"dir\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"dirxml\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:7:37\\"
],
\\"payload\\": [
\\"\\\\\\"dirxml\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"group\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:8:37\\"
],
\\"payload\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"groupCollapsed\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:9:37\\"
],
\\"payload\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"info\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:10:37\\"
],
\\"payload\\": [
\\"\\\\\\"info\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"log\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:11:37\\"
],
\\"payload\\": [
\\"\\\\\\"log\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"table\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:12:37\\"
],
\\"payload\\": [
\\"\\\\\\"table\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"time\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:13:37\\"
],
\\"payload\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"timeEnd\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:14:37\\"
],
\\"payload\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"timeLog\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:15:37\\"
],
\\"payload\\": []
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"trace\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:16:37\\"
],
\\"payload\\": [
\\"\\\\\\"trace\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"warn\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:17:37\\"
],
\\"payload\\": [
\\"\\\\\\"warn\\\\\\"\\"
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 11,
\\"level\\": \\"clear\\",
\\"trace\\": [
\\"__puppeteer_evalu\\",
\\"ion_script__:18:37\\"
],
\\"payload\\": []
}
}
]"
`;
exports[`mask 1`] = `
"[
{