@mikeci/pos-analytics-replay 0.1.0 → 0.1.1
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/README.md +87 -0
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# @mikeci/pos-analytics-replay
|
|
2
|
+
|
|
3
|
+
Hàm thuần để che dữ liệu nhạy cảm trên cây wireframe và ghép các frame session replay. Package không tự chụp màn hình React Native và không gửi dữ liệu lên collector.
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @mikeci/pos-analytics-replay
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Che nội dung
|
|
10
|
+
|
|
11
|
+
`shouldMask` trả về `true` với `TextInput`, `UITextField`, `EditText`, hoặc khi hint có `secure` hay `analyticsMask`.
|
|
12
|
+
|
|
13
|
+
`maskTree` đi qua cả cây. Node bị mask có `masked: true` và `text` thành `••••`. Node không có text giữ nguyên. Node đã đặt `masked: true` cũng bị che, kể cả khi type không nằm trong danh sách trên.
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { maskTree, shouldMask } from "@mikeci/pos-analytics-replay";
|
|
17
|
+
|
|
18
|
+
shouldMask("TextInput");
|
|
19
|
+
shouldMask("Text", { analyticsMask: true });
|
|
20
|
+
shouldMask("View");
|
|
21
|
+
|
|
22
|
+
const [field] = maskTree([
|
|
23
|
+
{ id: "phone", type: "TextInput", x: 0, y: 0, w: 200, h: 40, text: "0901234567" },
|
|
24
|
+
]);
|
|
25
|
+
field?.text;
|
|
26
|
+
// "••••"
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
`maskText` chỉ đổi một chuỗi. Chuỗi rỗng hoặc `undefined` được trả lại nguyên.
|
|
30
|
+
|
|
31
|
+
## Ghép frame
|
|
32
|
+
|
|
33
|
+
Mỗi frame là một snapshot hoặc một diff.
|
|
34
|
+
|
|
35
|
+
| Field | Ý nghĩa |
|
|
36
|
+
| --- | --- |
|
|
37
|
+
| `seq` | Số thứ tự frame |
|
|
38
|
+
| `ts` | Thời điểm ISO |
|
|
39
|
+
| `full` | `true` thì thay toàn bộ cây hiện tại |
|
|
40
|
+
| `nodes` | Node thêm hoặc cập nhật |
|
|
41
|
+
| `removed` | Id cần xóa khỏi cây hiện tại |
|
|
42
|
+
|
|
43
|
+
`applyFrames` áp dụng lần lượt, mask từng frame, rồi trả về các node gốc theo thứ tự xuất hiện. Frame `full: true` xóa trạng thái trước đó. Cùng một id được cập nhật tại chỗ và không đổi vị trí trong danh sách.
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import { applyFrames } from "@mikeci/pos-analytics-replay";
|
|
47
|
+
|
|
48
|
+
const nodes = applyFrames([
|
|
49
|
+
{
|
|
50
|
+
seq: 1,
|
|
51
|
+
ts: "2026-09-25T00:00:00.000Z",
|
|
52
|
+
full: true,
|
|
53
|
+
nodes: [
|
|
54
|
+
{ id: "root", type: "View", x: 0, y: 0, w: 100, h: 40 },
|
|
55
|
+
{ id: "title", type: "Text", x: 0, y: 40, w: 80, h: 20, text: "Home" },
|
|
56
|
+
],
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
seq: 2,
|
|
60
|
+
ts: "2026-09-25T00:00:01.000Z",
|
|
61
|
+
full: false,
|
|
62
|
+
removed: ["title"],
|
|
63
|
+
nodes: [{ id: "next", type: "Text", x: 0, y: 40, w: 80, h: 20, text: "Next" }],
|
|
64
|
+
},
|
|
65
|
+
]);
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Kết quả là `root` rồi `next`.
|
|
69
|
+
|
|
70
|
+
## Chunk gửi đi
|
|
71
|
+
|
|
72
|
+
`buildChunk` trả về một chuỗi JSON. Frame đưa vào `payload` không bị mask thêm ở bước này. Gọi `maskTree` hoặc `applyFrames` trước nếu chunk phải ra khỏi thiết bị.
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
import { buildChunk } from "@mikeci/pos-analytics-replay";
|
|
76
|
+
|
|
77
|
+
const body = buildChunk({
|
|
78
|
+
appId: "veso24h",
|
|
79
|
+
environment: "production",
|
|
80
|
+
sessionId: "01J8F5S3S0C9BRF5R6XR4N8K2C",
|
|
81
|
+
seq: 1,
|
|
82
|
+
ts: "2026-09-25T00:00:00.000Z",
|
|
83
|
+
frame,
|
|
84
|
+
});
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
JSON có `app_id`, `environment`, `session_id`, `seq`, `ts` và `payload`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mikeci/pos-analytics-replay",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Session replay wireframe helpers for the Pos Analytics React Native SDK.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
"files": [
|
|
15
|
-
"dist"
|
|
15
|
+
"dist",
|
|
16
|
+
"README.md"
|
|
16
17
|
],
|
|
17
18
|
"publishConfig": {
|
|
18
19
|
"registry": "https://registry.npmjs.org/",
|