https://github.com/waynecz/session-recorder
📷 Record every movement in web ( DOM, http, error, mouse...
https://github.com/waynecz/session-recorder
recorderui
Last synced: over 1 year ago
JSON representation
📷 Record every movement in web ( DOM, http, error, mouse...
- Host: GitHub
- URL: https://github.com/waynecz/session-recorder
- Owner: waynecz
- Created: 2018-11-07T11:24:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-04T10:41:21.000Z (over 7 years ago)
- Last Synced: 2024-09-21T09:03:55.127Z (over 1 year ago)
- Topics: recorderui
- Language: TypeScript
- Homepage:
- Size: 636 KB
- Stars: 58
- Watchers: 3
- Forks: 21
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# (🚧 WIP) Session Recorder
> Imagine that a video camera continuously record the whole page
See also [Session-Player](https://github.com/waynecz/session-player) for consuming Recorder's data
### Record list:
- DOM mutation
- Network(xhr, fetch, beacon)
- Global Error, Unhandled rejection
- Mouse, Scroll
- Console
### Output like:
```json
[
{"t": 0, "type": "snapshot", "snapshot": "#document snapshot", "scroll": ... },
{ "t": 1, "type": "node", "add": [{ "html": "
textContent" }], "target": 6 },
{ "t": 2, "type": "form", "target": 16, "k": "value", "v": "2312" },
{ "t": 3, "type": "attr", "target": 14, "attr": { "k": "class", "v": "a" } },
{ "t": 4, "type": "scroll", "x": 0, "y": 10 },
{ "t": 5, "type": "click", "x": 71, "y": 13 },
{ "t": 6, "type": "form", "target": 19, "k": "checked", "v": true },
{ "t": 7, "type": "jserr", "msg": "Type Error: ...", "url": "...", "err": "..." },
{ "t": 8, "type": "xhr", "url": "...", "method": "GET", "response": "21asdcxz" },
{ "t": 9, "type": "fetch", "status": 503, "response": "21asdcxz" },
{ "t": 10, "type": "move", "x": 38, "y": 510 },
{ "t": 11, "type": "console", "l": "warn", "msg": "..." }
]
```
### Code intergration:
```javascript
import SessionRecorder from 'session-recorder'
const myReocrder = new SessionRecorder()
myReocrder.start() // make sure start after DOMContentLoaded
myReocrder.end() // stop record
```
### TODO
- [ ] Use VDOM record mutation
- [ ] Using WebWorker store trail data
### Build Setup
```shell
# serve file with hot reload at http://localhost:8000
npm run dev
# build with tsc, complie into ESModule
npm run build
```
### Document (constructing)