@highlight-run/rrweb 2.0.0-lambda.4 → 2.0.0-lambda.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +427 -0
- package/README.md +113 -7
- package/dist/assets/image-bitmap-data-url-worker-DwtK8A0z.js.map +1 -1
- package/dist/rrweb.cjs +7826 -6665
- package/dist/rrweb.cjs.map +1 -1
- package/dist/rrweb.d.cts +6 -4
- package/dist/rrweb.d.ts +6 -4
- package/dist/rrweb.js +7826 -6665
- package/dist/rrweb.js.map +1 -1
- package/dist/rrweb.umd.cjs +7826 -6685
- package/dist/rrweb.umd.cjs.map +3 -3
- package/dist/rrweb.umd.min.cjs +150 -60
- package/dist/rrweb.umd.min.cjs.map +3 -3
- package/package.json +22 -13
- package/umd/rrweb.js +19162 -0
- package/umd/rrweb.min.js +192 -0
package/README.md
CHANGED
|
@@ -19,12 +19,84 @@ rrweb refers to 'record and replay the web', which is a tool for recording and r
|
|
|
19
19
|
|
|
20
20
|
[**🍳 Recipes 🍳**](../../docs/recipes/index.md)
|
|
21
21
|
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
`rrweb` is kept mainly for backward compatibility. For new integrations, prefer package-specific entrypoints (`@rrweb/record` and `@rrweb/replay`) first, or use `@rrweb/all` as a convenience package.
|
|
25
|
+
|
|
26
|
+
### 1) Bundler / npm (Recommended)
|
|
27
|
+
|
|
28
|
+
For new projects:
|
|
29
|
+
|
|
30
|
+
```shell
|
|
31
|
+
npm install @rrweb/record @rrweb/replay
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
import { record } from '@rrweb/record';
|
|
36
|
+
import { Replayer } from '@rrweb/replay';
|
|
37
|
+
import '@rrweb/replay/dist/style.css';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Convenience single-package option:
|
|
41
|
+
|
|
42
|
+
```shell
|
|
43
|
+
npm install @rrweb/all
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
import { record, Replayer, pack, unpack } from '@rrweb/all';
|
|
48
|
+
import '@rrweb/all/dist/style.css';
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Legacy compatibility package:
|
|
52
|
+
|
|
53
|
+
```shell
|
|
54
|
+
npm install rrweb
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
import { record, Replayer } from 'rrweb';
|
|
59
|
+
import 'rrweb/dist/style.css';
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### 2) Browser Without Bundler (ESM)
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<link
|
|
66
|
+
rel="stylesheet"
|
|
67
|
+
href="https://cdn.rrweb.com/replay/current/dist/style.css"
|
|
68
|
+
/>
|
|
69
|
+
<script type="module">
|
|
70
|
+
import { record } from 'https://cdn.rrweb.com/record/current/dist/record.js';
|
|
71
|
+
import { Replayer } from 'https://cdn.rrweb.com/replay/current/dist/replay.js';
|
|
72
|
+
</script>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Use `current` for the latest stable release, or pin exact versions such as
|
|
76
|
+
`https://cdn.rrweb.com/record/2.0.0/dist/record.js` and
|
|
77
|
+
`https://cdn.rrweb.com/replay/2.0.0/dist/replay.js` for immutable
|
|
78
|
+
production URLs.
|
|
79
|
+
|
|
80
|
+
### 3) Legacy Direct `<script>` Include (UMD fallback)
|
|
81
|
+
|
|
82
|
+
Use this only for compatibility with non-module environments; modern browsers
|
|
83
|
+
support the ESM method above.
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<link
|
|
87
|
+
rel="stylesheet"
|
|
88
|
+
href="https://cdn.rrweb.com/replay/current/dist/style.css"
|
|
89
|
+
/>
|
|
90
|
+
<script src="https://cdn.rrweb.com/record/current/dist/record.umd.cjs"></script>
|
|
91
|
+
<script src="https://cdn.rrweb.com/replay/current/dist/replay.umd.cjs"></script>
|
|
92
|
+
```
|
|
93
|
+
|
|
22
94
|
## Project Structure
|
|
23
95
|
|
|
24
96
|
**[rrweb](https://github.com/rrweb-io/rrweb)** mainly includes two funtions:
|
|
25
97
|
|
|
26
98
|
- **Record**: The record function is used to record all the mutations in the DOM
|
|
27
|
-
- **
|
|
99
|
+
- **Replayer**: The replay function is to replay the recorded mutations one by one according to the corresponding timestamp.
|
|
28
100
|
|
|
29
101
|
## Roadmap
|
|
30
102
|
|
|
@@ -171,12 +243,12 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
|
|
|
171
243
|
<tr>
|
|
172
244
|
<td align="center">
|
|
173
245
|
<a href="http://www.smartx.com/" target="_blank">
|
|
174
|
-
<img width="195px" src="https://
|
|
246
|
+
<img width="195px" src="https://raw.githubusercontent.com/rrweb-io/web/master/static/logos/smartx.png" alt="SmartX">
|
|
175
247
|
</a>
|
|
176
248
|
</td>
|
|
177
249
|
<td align="center">
|
|
178
250
|
<a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
|
|
179
|
-
<img width="195px" src="https://
|
|
251
|
+
<img width="195px" src="https://rrweb.com/posthog.png" alt="PostHog">
|
|
180
252
|
</a>
|
|
181
253
|
</td>
|
|
182
254
|
<td align="center">
|
|
@@ -190,7 +262,39 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
|
|
|
190
262
|
</a>
|
|
191
263
|
</td>
|
|
192
264
|
</tr>
|
|
193
|
-
|
|
265
|
+
<tr>
|
|
266
|
+
<td align="center">
|
|
267
|
+
<a href="https://sentry.io" target="_blank">
|
|
268
|
+
<img width="195px" src="https://rrweb.com/sentry.png" alt="Sentry">
|
|
269
|
+
</a>
|
|
270
|
+
</td>
|
|
271
|
+
<td align="center">
|
|
272
|
+
<a href="https://www.pendo.io" target="_blank">
|
|
273
|
+
<img width="195px" src="https://rrweb.com/pendo.png" alt="Pendo">
|
|
274
|
+
</a>
|
|
275
|
+
</td>
|
|
276
|
+
<td align="center">
|
|
277
|
+
<a href="https://mixpanel.com" target="_blank">
|
|
278
|
+
<img width="195px" src="https://rrweb.com/mixpanel.png" alt="Mixpanel">
|
|
279
|
+
</a>
|
|
280
|
+
</td>
|
|
281
|
+
<td align="center">
|
|
282
|
+
<a href="https://www.datadoghq.com" target="_blank">
|
|
283
|
+
<img width="195px" src="https://rrweb.com/datadog.png" alt="Datadog">
|
|
284
|
+
</a>
|
|
285
|
+
</td>
|
|
286
|
+
</tr>
|
|
287
|
+
<tr>
|
|
288
|
+
<td align="center">
|
|
289
|
+
<a href="https://amplitude.com" target="_blank">
|
|
290
|
+
<img width="195px" src="https://rrweb.com/amplitude.png" alt="Amplitude">
|
|
291
|
+
</a>
|
|
292
|
+
</td>
|
|
293
|
+
<td align="center">
|
|
294
|
+
<a href="https://newrelic.com" target="_blank">
|
|
295
|
+
<img width="195px" src="https://rrweb.com/new%20relic.png" alt="New Relic">
|
|
296
|
+
</a>
|
|
297
|
+
</td>
|
|
194
298
|
<td align="center">
|
|
195
299
|
<a href="https://cux.io" target="_blank">
|
|
196
300
|
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
|
|
@@ -201,6 +305,8 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
|
|
|
201
305
|
<img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
|
|
202
306
|
</a>
|
|
203
307
|
</td>
|
|
308
|
+
</tr>
|
|
309
|
+
<tr>
|
|
204
310
|
<td align="center">
|
|
205
311
|
<a href="https://highlight.io" target="_blank">
|
|
206
312
|
<img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
|
|
@@ -208,11 +314,9 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
|
|
|
208
314
|
</td>
|
|
209
315
|
<td align="center">
|
|
210
316
|
<a href="https://analyzee.io" target="_blank">
|
|
211
|
-
<img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://
|
|
317
|
+
<img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://analyzee.io/img/analyzee-main-logo.webp">
|
|
212
318
|
</a>
|
|
213
319
|
</td>
|
|
214
|
-
</tr>
|
|
215
|
-
<tr>
|
|
216
320
|
<td align="center">
|
|
217
321
|
<a href="https://requestly.io" target="_blank">
|
|
218
322
|
<img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
|
|
@@ -223,6 +327,8 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
|
|
|
223
327
|
<img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
|
|
224
328
|
</a>
|
|
225
329
|
</td>
|
|
330
|
+
</tr>
|
|
331
|
+
<tr>
|
|
226
332
|
<td align="center">
|
|
227
333
|
<a href="https://uxwizz.com" target="_blank">
|
|
228
334
|
<img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-bitmap-data-url-worker-DwtK8A0z.js","sources":["../../../node_modules/base64-arraybuffer/dist/base64-arraybuffer.es5.js","../src/record/workers/image-bitmap-data-url-worker.ts"],"sourcesContent":["/*\n * base64-arraybuffer 1.0.
|
|
1
|
+
{"version":3,"file":"image-bitmap-data-url-worker-DwtK8A0z.js","sources":["../../../node_modules/base64-arraybuffer/dist/base64-arraybuffer.es5.js","../src/record/workers/image-bitmap-data-url-worker.ts"],"sourcesContent":["/*\n * base64-arraybuffer 1.0.2 <https://github.com/niklasvh/base64-arraybuffer>\n * Copyright (c) 2022 Niklas von Hertzen <https://hertzen.com>\n * Released under MIT License\n */\nvar chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';\n// Use a lookup table to find the index.\nvar lookup = typeof Uint8Array === 'undefined' ? [] : new Uint8Array(256);\nfor (var i = 0; i < chars.length; i++) {\n lookup[chars.charCodeAt(i)] = i;\n}\nvar encode = function (arraybuffer) {\n var bytes = new Uint8Array(arraybuffer), i, len = bytes.length, base64 = '';\n for (i = 0; i < len; i += 3) {\n base64 += chars[bytes[i] >> 2];\n base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)];\n base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)];\n base64 += chars[bytes[i + 2] & 63];\n }\n if (len % 3 === 2) {\n base64 = base64.substring(0, base64.length - 1) + '=';\n }\n else if (len % 3 === 1) {\n base64 = base64.substring(0, base64.length - 2) + '==';\n }\n return base64;\n};\nvar decode = function (base64) {\n var bufferLength = base64.length * 0.75, len = base64.length, i, p = 0, encoded1, encoded2, encoded3, encoded4;\n if (base64[base64.length - 1] === '=') {\n bufferLength--;\n if (base64[base64.length - 2] === '=') {\n bufferLength--;\n }\n }\n var arraybuffer = new ArrayBuffer(bufferLength), bytes = new Uint8Array(arraybuffer);\n for (i = 0; i < len; i += 4) {\n encoded1 = lookup[base64.charCodeAt(i)];\n encoded2 = lookup[base64.charCodeAt(i + 1)];\n encoded3 = lookup[base64.charCodeAt(i + 2)];\n encoded4 = lookup[base64.charCodeAt(i + 3)];\n bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);\n bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);\n bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);\n }\n return arraybuffer;\n};\n\nexport { decode, encode };\n//# sourceMappingURL=base64-arraybuffer.es5.js.map\n","import { encode } from 'base64-arraybuffer';\nimport type {\n DataURLOptions,\n ImageBitmapDataURLWorkerParams,\n ImageBitmapDataURLWorkerResponse,\n} from '@rrweb/types';\n\nconst lastBlobMap: Map<number, string> = new Map();\nconst transparentBlobMap: Map<string, string> = new Map();\n\nexport interface ImageBitmapDataURLRequestWorker {\n postMessage: (\n message: ImageBitmapDataURLWorkerParams,\n transfer?: [ImageBitmap],\n ) => void;\n onmessage: (message: MessageEvent<ImageBitmapDataURLWorkerResponse>) => void;\n}\n\ninterface ImageBitmapDataURLResponseWorker {\n onmessage:\n | null\n | ((message: MessageEvent<ImageBitmapDataURLWorkerParams>) => void);\n postMessage(e: ImageBitmapDataURLWorkerResponse): void;\n}\n\nasync function getTransparentBlobFor(\n width: number,\n height: number,\n dataURLOptions: DataURLOptions,\n): Promise<string> {\n const id = `${width}-${height}`;\n if ('OffscreenCanvas' in globalThis) {\n if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!;\n const offscreen = new OffscreenCanvas(width, height);\n offscreen.getContext('2d'); // creates rendering context for `converToBlob`\n const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while\n const arrayBuffer = await blob.arrayBuffer();\n const base64 = encode(arrayBuffer); // cpu intensive\n transparentBlobMap.set(id, base64);\n return base64;\n } else {\n return '';\n }\n}\n\nconst worker: ImageBitmapDataURLResponseWorker = self;\nlet logDebug = false;\n\nconst debug = (...args: any[]) => {\n if (logDebug) {\n console.debug(...args);\n }\n};\n\n// eslint-disable-next-line @typescript-eslint/no-misused-promises\nworker.onmessage = async function (e) {\n logDebug = !!e.data.logDebug;\n if ('OffscreenCanvas' in globalThis) {\n const { id, bitmap, width, height, dx, dy, dw, dh, dataURLOptions } =\n e.data;\n\n const transparentBase64 = getTransparentBlobFor(\n width,\n height,\n dataURLOptions,\n );\n\n const offscreen = new OffscreenCanvas(width, height);\n const ctx = offscreen.getContext('2d')!;\n\n ctx.drawImage(bitmap, 0, 0, width, height);\n bitmap.close();\n const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while\n const type = blob.type;\n const arrayBuffer = await blob.arrayBuffer();\n const base64 = encode(arrayBuffer); // cpu intensive\n\n // on first try we should check if canvas is transparent,\n // no need to save it's contents in that case\n if (!lastBlobMap.has(id) && (await transparentBase64) === base64) {\n debug('[highlight-worker] canvas bitmap is transparent', {\n id,\n base64,\n });\n lastBlobMap.set(id, base64);\n return worker.postMessage({ id, status: 'transparent' });\n }\n\n // unchanged\n if (lastBlobMap.get(id) === base64) {\n debug('[highlight-worker] canvas bitmap is unchanged', {\n id,\n base64,\n });\n }\n const msg = {\n id,\n type,\n base64,\n width,\n height,\n dx,\n dy,\n dw,\n dh,\n };\n debug('[highlight-worker] canvas bitmap processed', msg);\n worker.postMessage(msg);\n lastBlobMap.set(id, base64);\n } else {\n debug('[highlight-worker] no offscreencanvas support', {\n id: e.data.id,\n });\n return worker.postMessage({ id: e.data.id, status: 'unsupported' });\n }\n};\n"],"names":["i"],"mappings":"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","x_google_ignoreList":[0]}
|