clarity-js 0.8.12 → 0.8.13-beta
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/build/clarity.extended.js +1 -1
- package/build/clarity.insight.js +1 -1
- package/build/clarity.js +3952 -4179
- package/build/clarity.min.js +1 -1
- package/build/clarity.module.js +3952 -4179
- package/build/clarity.performance.js +1 -1
- package/package.json +69 -76
- package/rollup.config.ts +88 -84
- package/src/clarity.ts +28 -34
- package/src/core/api.ts +1 -8
- package/src/core/config.ts +2 -2
- package/src/core/event.ts +32 -36
- package/src/core/hash.ts +6 -5
- package/src/core/history.ts +11 -10
- package/src/core/index.ts +11 -21
- package/src/core/measure.ts +5 -9
- package/src/core/report.ts +3 -3
- package/src/core/scrub.ts +20 -29
- package/src/core/task.ts +45 -73
- package/src/core/time.ts +3 -3
- package/src/core/timeout.ts +2 -2
- package/src/core/version.ts +1 -1
- package/src/data/baseline.ts +55 -60
- package/src/data/consent.ts +2 -2
- package/src/data/custom.ts +13 -8
- package/src/data/dimension.ts +7 -11
- package/src/data/encode.ts +30 -36
- package/src/data/envelope.ts +38 -38
- package/src/data/extract.ts +77 -86
- package/src/data/index.ts +6 -10
- package/src/data/limit.ts +1 -1
- package/src/data/metadata.ts +266 -305
- package/src/data/metric.ts +8 -18
- package/src/data/ping.ts +4 -8
- package/src/data/signal.ts +18 -18
- package/src/data/summary.ts +4 -6
- package/src/data/token.ts +8 -10
- package/src/data/upgrade.ts +3 -7
- package/src/data/upload.ts +49 -100
- package/src/data/variable.ts +20 -27
- package/src/diagnostic/encode.ts +2 -2
- package/src/diagnostic/fraud.ts +4 -3
- package/src/diagnostic/internal.ts +5 -11
- package/src/diagnostic/script.ts +8 -12
- package/src/global.ts +1 -1
- package/src/insight/blank.ts +4 -4
- package/src/insight/encode.ts +17 -23
- package/src/insight/snapshot.ts +37 -57
- package/src/interaction/change.ts +6 -9
- package/src/interaction/click.ts +28 -34
- package/src/interaction/clipboard.ts +2 -2
- package/src/interaction/encode.ts +31 -35
- package/src/interaction/input.ts +9 -11
- package/src/interaction/pointer.ts +24 -35
- package/src/interaction/resize.ts +5 -5
- package/src/interaction/scroll.ts +11 -14
- package/src/interaction/selection.ts +8 -12
- package/src/interaction/submit.ts +2 -2
- package/src/interaction/timeline.ts +9 -13
- package/src/interaction/unload.ts +1 -1
- package/src/interaction/visibility.ts +2 -2
- package/src/layout/animation.ts +41 -47
- package/src/layout/discover.ts +5 -5
- package/src/layout/document.ts +19 -31
- package/src/layout/dom.ts +91 -141
- package/src/layout/encode.ts +37 -52
- package/src/layout/mutation.ts +318 -321
- package/src/layout/node.ts +81 -104
- package/src/layout/offset.ts +6 -7
- package/src/layout/region.ts +40 -60
- package/src/layout/schema.ts +8 -15
- package/src/layout/selector.ts +25 -47
- package/src/layout/style.ts +36 -44
- package/src/layout/target.ts +10 -14
- package/src/layout/traverse.ts +11 -17
- package/src/performance/blank.ts +1 -1
- package/src/performance/encode.ts +4 -4
- package/src/performance/interaction.ts +70 -58
- package/src/performance/navigation.ts +2 -2
- package/src/performance/observer.ts +26 -59
- package/src/queue.ts +9 -16
- package/tsconfig.json +1 -1
- package/tslint.json +32 -25
- package/types/core.d.ts +13 -13
- package/types/data.d.ts +29 -33
- package/types/diagnostic.d.ts +1 -1
- package/types/interaction.d.ts +4 -4
- package/types/layout.d.ts +21 -36
- package/types/performance.d.ts +5 -6
- package/.lintstagedrc.yml +0 -3
- package/biome.json +0 -43
package/src/data/baseline.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { Event, BooleanFlag } from "@clarity-types/data";
|
|
2
|
+
import { BaselineData, BaselineState } from "@clarity-types/data";
|
|
3
3
|
import { time } from "@src/core/time";
|
|
4
4
|
import encode from "@src/data/encode";
|
|
5
5
|
|
|
6
6
|
export let state: BaselineState = null;
|
|
7
7
|
let buffer: BaselineData = null;
|
|
8
|
-
let update = false;
|
|
8
|
+
let update: boolean = false;
|
|
9
9
|
|
|
10
10
|
export function start(): void {
|
|
11
11
|
update = false;
|
|
@@ -16,65 +16,60 @@ export function reset(): void {
|
|
|
16
16
|
// Baseline state holds the previous values - if it is updated in the current payload,
|
|
17
17
|
// reset the state to current value after sending the previous state
|
|
18
18
|
if (update) {
|
|
19
|
-
state = {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
pointerPrevY: buffer.pointerPrevY,
|
|
46
|
-
pointerPrevTime: buffer.pointerPrevTime,
|
|
47
|
-
},
|
|
19
|
+
state = { time: time(), event: Event.Baseline, data: {
|
|
20
|
+
visible: buffer.visible,
|
|
21
|
+
docWidth: buffer.docWidth,
|
|
22
|
+
docHeight: buffer.docHeight,
|
|
23
|
+
screenWidth: buffer.screenWidth,
|
|
24
|
+
screenHeight: buffer.screenHeight,
|
|
25
|
+
scrollX: buffer.scrollX,
|
|
26
|
+
scrollY: buffer.scrollY,
|
|
27
|
+
pointerX: buffer.pointerX,
|
|
28
|
+
pointerY: buffer.pointerY,
|
|
29
|
+
activityTime: buffer.activityTime,
|
|
30
|
+
scrollTime: buffer.scrollTime,
|
|
31
|
+
pointerTime: buffer.pointerTime,
|
|
32
|
+
moveX: buffer.moveX,
|
|
33
|
+
moveY: buffer.moveY,
|
|
34
|
+
moveTime: buffer.moveTime,
|
|
35
|
+
downX: buffer.downX,
|
|
36
|
+
downY: buffer.downY,
|
|
37
|
+
downTime: buffer.downTime,
|
|
38
|
+
upX: buffer.upX,
|
|
39
|
+
upY: buffer.upY,
|
|
40
|
+
upTime: buffer.upTime,
|
|
41
|
+
pointerPrevX: buffer.pointerPrevX,
|
|
42
|
+
pointerPrevY: buffer.pointerPrevY,
|
|
43
|
+
pointerPrevTime: buffer.pointerPrevTime,
|
|
44
|
+
}
|
|
48
45
|
};
|
|
49
46
|
}
|
|
50
|
-
buffer = buffer
|
|
51
|
-
|
|
52
|
-
:
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
pointerPrevTime: undefined,
|
|
77
|
-
};
|
|
47
|
+
buffer = buffer ? buffer : {
|
|
48
|
+
visible: BooleanFlag.True,
|
|
49
|
+
docWidth: 0,
|
|
50
|
+
docHeight: 0,
|
|
51
|
+
screenWidth: 0,
|
|
52
|
+
screenHeight: 0,
|
|
53
|
+
scrollX: 0,
|
|
54
|
+
scrollY: 0,
|
|
55
|
+
pointerX: 0,
|
|
56
|
+
pointerY: 0,
|
|
57
|
+
activityTime: 0,
|
|
58
|
+
scrollTime: 0,
|
|
59
|
+
pointerTime: undefined,
|
|
60
|
+
moveX: undefined,
|
|
61
|
+
moveY: undefined,
|
|
62
|
+
moveTime: undefined,
|
|
63
|
+
downX: undefined,
|
|
64
|
+
downY: undefined,
|
|
65
|
+
downTime: undefined,
|
|
66
|
+
upX: undefined,
|
|
67
|
+
upY: undefined,
|
|
68
|
+
upTime: undefined,
|
|
69
|
+
pointerPrevX: undefined,
|
|
70
|
+
pointerPrevY: undefined,
|
|
71
|
+
pointerPrevTime: undefined,
|
|
72
|
+
};
|
|
78
73
|
}
|
|
79
74
|
|
|
80
75
|
export function track(event: Event, x: number, y: number, time?: number): void {
|
package/src/data/consent.ts
CHANGED
|
@@ -4,7 +4,7 @@ import * as dimension from "@src/data/dimension";
|
|
|
4
4
|
const enum ConsentType {
|
|
5
5
|
None = 0,
|
|
6
6
|
Implicit = 1,
|
|
7
|
-
General = 2
|
|
7
|
+
General = 2
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export function config(track: boolean): void {
|
|
@@ -18,4 +18,4 @@ export function consent(): void {
|
|
|
18
18
|
|
|
19
19
|
function trackConsent(consent: ConsentType): void {
|
|
20
20
|
dimension.log(Dimension.Consent, consent.toString());
|
|
21
|
-
}
|
|
21
|
+
}
|
package/src/data/custom.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Constant, CustomData, Event } from "@clarity-types/data";
|
|
2
2
|
import * as core from "@src/core";
|
|
3
3
|
import encode from "./encode";
|
|
4
4
|
|
|
@@ -7,12 +7,17 @@ export let data: CustomData = null;
|
|
|
7
7
|
// custom events allow 2 parameters or 1 parameter to be passed. If 2 are passed we
|
|
8
8
|
// consider it a key value pair. If only 1 is passed we only consider the event to have a value.
|
|
9
9
|
export function event(a: string, b: string): void {
|
|
10
|
-
if (core.active() &&
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
if (core.active() &&
|
|
11
|
+
a &&
|
|
12
|
+
typeof a === Constant.String &&
|
|
13
|
+
a.length < 255
|
|
14
|
+
) {
|
|
15
|
+
if (b && typeof b === Constant.String && b.length < 255) {
|
|
16
|
+
data = { key: a, value: b};
|
|
17
|
+
} else {
|
|
18
|
+
data = { value: a }
|
|
19
|
+
}
|
|
20
|
+
encode(Event.Custom);
|
|
21
|
+
|
|
17
22
|
}
|
|
18
23
|
}
|
package/src/data/dimension.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Check,
|
|
1
|
+
import { Check, Event, Dimension, DimensionData, Setting } from "@clarity-types/data";
|
|
2
2
|
import * as limit from "@src/data/limit";
|
|
3
3
|
import encode from "./encode";
|
|
4
4
|
|
|
@@ -18,20 +18,18 @@ export function stop(): void {
|
|
|
18
18
|
limited = false;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
export function log(dimension: Dimension,
|
|
21
|
+
export function log(dimension: Dimension, value: string): void {
|
|
22
22
|
// Check valid value before moving ahead
|
|
23
|
-
if (
|
|
23
|
+
if (value) {
|
|
24
24
|
// Ensure received value is casted into a string if it wasn't a string to begin with
|
|
25
|
-
|
|
26
|
-
if (!(dimension in data)) {
|
|
27
|
-
data[dimension] = [];
|
|
28
|
-
}
|
|
25
|
+
value = `${value}`;
|
|
26
|
+
if (!(dimension in data)) { data[dimension] = []; }
|
|
29
27
|
if (data[dimension].indexOf(value) < 0) {
|
|
30
28
|
// Limit check to ensure we have a cap on number of dimensions we can collect
|
|
31
29
|
if (data[dimension].length > Setting.CollectionLimit) {
|
|
32
30
|
if (!limited) {
|
|
33
31
|
limited = true;
|
|
34
|
-
limit.trigger(Check.Collection);
|
|
32
|
+
limit.trigger(Check.Collection);
|
|
35
33
|
}
|
|
36
34
|
return;
|
|
37
35
|
}
|
|
@@ -39,9 +37,7 @@ export function log(dimension: Dimension, inputValue: string): void {
|
|
|
39
37
|
data[dimension].push(value);
|
|
40
38
|
// If this is a new value, track it as part of updates object
|
|
41
39
|
// This allows us to only send back new values in subsequent payloads
|
|
42
|
-
if (!(dimension in updates)) {
|
|
43
|
-
updates[dimension] = [];
|
|
44
|
-
}
|
|
40
|
+
if (!(dimension in updates)) { updates[dimension] = []; }
|
|
45
41
|
updates[dimension].push(value);
|
|
46
42
|
}
|
|
47
43
|
}
|
package/src/data/encode.ts
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { Event,
|
|
1
|
+
import { Event, Token } from "@clarity-types/data";
|
|
2
2
|
import { time } from "@src/core/time";
|
|
3
3
|
import * as baseline from "@src/data/baseline";
|
|
4
4
|
import * as custom from "@src/data/custom";
|
|
5
5
|
import * as dimension from "@src/data/dimension";
|
|
6
|
-
import * as extract from "@src/data/extract";
|
|
7
6
|
import * as limit from "@src/data/limit";
|
|
8
7
|
import * as metric from "@src/data/metric";
|
|
9
8
|
import * as ping from "@src/data/ping";
|
|
10
9
|
import * as summary from "@src/data/summary";
|
|
11
10
|
import * as upgrade from "@src/data/upgrade";
|
|
12
11
|
import * as variable from "@src/data/variable";
|
|
12
|
+
import * as extract from "@src/data/extract";
|
|
13
13
|
import { queue, track } from "./upload";
|
|
14
14
|
|
|
15
|
-
export default function
|
|
16
|
-
|
|
17
|
-
let tokens: Token[] = [t, event];
|
|
15
|
+
export default function(event: Event): void {
|
|
16
|
+
let t = time();
|
|
17
|
+
let tokens: Token[] = [t, event];
|
|
18
18
|
switch (event) {
|
|
19
|
-
case Event.Baseline:
|
|
20
|
-
|
|
19
|
+
case Event.Baseline:
|
|
20
|
+
let b = baseline.state;
|
|
21
21
|
if (b) {
|
|
22
22
|
tokens = [b.time, b.event];
|
|
23
23
|
tokens.push(b.data.visible);
|
|
@@ -48,7 +48,6 @@ export default function (event: Event): void {
|
|
|
48
48
|
}
|
|
49
49
|
baseline.reset();
|
|
50
50
|
break;
|
|
51
|
-
}
|
|
52
51
|
case Event.Ping:
|
|
53
52
|
tokens.push(ping.data.gap);
|
|
54
53
|
queue(tokens);
|
|
@@ -73,10 +72,10 @@ export default function (event: Event): void {
|
|
|
73
72
|
tokens.push(custom.data.value);
|
|
74
73
|
queue(tokens);
|
|
75
74
|
break;
|
|
76
|
-
case Event.Variable:
|
|
77
|
-
|
|
75
|
+
case Event.Variable:
|
|
76
|
+
let variableKeys = Object.keys(variable.data);
|
|
78
77
|
if (variableKeys.length > 0) {
|
|
79
|
-
for (
|
|
78
|
+
for (let v of variableKeys) {
|
|
80
79
|
tokens.push(v);
|
|
81
80
|
tokens.push(variable.data[v]);
|
|
82
81
|
}
|
|
@@ -84,12 +83,11 @@ export default function (event: Event): void {
|
|
|
84
83
|
queue(tokens, false);
|
|
85
84
|
}
|
|
86
85
|
break;
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
const metricKeys = Object.keys(metric.updates);
|
|
86
|
+
case Event.Metric:
|
|
87
|
+
let metricKeys = Object.keys(metric.updates);
|
|
90
88
|
if (metricKeys.length > 0) {
|
|
91
|
-
for (
|
|
92
|
-
|
|
89
|
+
for (let m of metricKeys) {
|
|
90
|
+
let key = parseInt(m, 10);
|
|
93
91
|
tokens.push(key);
|
|
94
92
|
// For computation, we need microseconds precision that performance.now() API offers
|
|
95
93
|
// However, for data over the wire, we round it off to milliseconds precision.
|
|
@@ -99,12 +97,11 @@ export default function (event: Event): void {
|
|
|
99
97
|
queue(tokens, false);
|
|
100
98
|
}
|
|
101
99
|
break;
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
const dimensionKeys = Object.keys(dimension.updates);
|
|
100
|
+
case Event.Dimension:
|
|
101
|
+
let dimensionKeys = Object.keys(dimension.updates);
|
|
105
102
|
if (dimensionKeys.length > 0) {
|
|
106
|
-
for (
|
|
107
|
-
|
|
103
|
+
for (let d of dimensionKeys) {
|
|
104
|
+
let key = parseInt(d, 10);
|
|
108
105
|
tokens.push(key);
|
|
109
106
|
tokens.push(dimension.updates[d]);
|
|
110
107
|
}
|
|
@@ -112,12 +109,11 @@ export default function (event: Event): void {
|
|
|
112
109
|
queue(tokens, false);
|
|
113
110
|
}
|
|
114
111
|
break;
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
const eventKeys = Object.keys(summary.data);
|
|
112
|
+
case Event.Summary:
|
|
113
|
+
let eventKeys = Object.keys(summary.data);
|
|
118
114
|
if (eventKeys.length > 0) {
|
|
119
|
-
for (
|
|
120
|
-
|
|
115
|
+
for (let e of eventKeys) {
|
|
116
|
+
let key = parseInt(e, 10);
|
|
121
117
|
tokens.push(key);
|
|
122
118
|
tokens.push([].concat(...summary.data[e]));
|
|
123
119
|
}
|
|
@@ -125,22 +121,20 @@ export default function (event: Event): void {
|
|
|
125
121
|
queue(tokens, false);
|
|
126
122
|
}
|
|
127
123
|
break;
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
for (const e of Array.from(extractKeys)) {
|
|
124
|
+
case Event.Extract:
|
|
125
|
+
let extractKeys = extract.keys;
|
|
126
|
+
extractKeys.forEach((e => {
|
|
132
127
|
tokens.push(e);
|
|
133
|
-
|
|
134
|
-
for (
|
|
135
|
-
|
|
128
|
+
let token = []
|
|
129
|
+
for (let d in extract.data[e]) {
|
|
130
|
+
let key = parseInt(d, 10);
|
|
136
131
|
token.push(key);
|
|
137
132
|
token.push(extract.data[e][d]);
|
|
138
133
|
}
|
|
139
134
|
tokens.push(token);
|
|
140
|
-
}
|
|
141
|
-
|
|
135
|
+
}));
|
|
136
|
+
|
|
142
137
|
extract.reset();
|
|
143
138
|
queue(tokens, false);
|
|
144
|
-
}
|
|
145
139
|
}
|
|
146
140
|
}
|
package/src/data/envelope.ts
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import * as scrub from "@src/core/scrub";
|
|
1
|
+
import { BooleanFlag, Token, Upload, Envelope, ApplicationPlatform } from "@clarity-types/data";
|
|
3
2
|
import { time } from "@src/core/time";
|
|
4
3
|
import version from "@src/core/version";
|
|
5
4
|
import * as metadata from "@src/data/metadata";
|
|
5
|
+
import * as scrub from "@src/core/scrub";
|
|
6
6
|
|
|
7
7
|
export let data: Envelope = null;
|
|
8
8
|
|
|
9
9
|
export function start(): void {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
10
|
+
const m = metadata.data;
|
|
11
|
+
data = {
|
|
12
|
+
version,
|
|
13
|
+
sequence: 0,
|
|
14
|
+
start: 0,
|
|
15
|
+
duration: 0,
|
|
16
|
+
projectId: m.projectId,
|
|
17
|
+
userId: m.userId,
|
|
18
|
+
sessionId: m.sessionId,
|
|
19
|
+
pageNum: m.pageNum,
|
|
20
|
+
upload: Upload.Async,
|
|
21
|
+
end: BooleanFlag.False,
|
|
22
|
+
applicationPlatform: ApplicationPlatform.WebApp,
|
|
23
|
+
url: ''
|
|
24
|
+
};
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
export function stop(): void {
|
|
@@ -29,25 +29,25 @@ export function stop(): void {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
export function envelope(last: boolean): Token[] {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
32
|
+
data.start = data.start + data.duration;
|
|
33
|
+
data.duration = time() - data.start;
|
|
34
|
+
data.sequence++;
|
|
35
|
+
data.upload = last && "sendBeacon" in navigator ? Upload.Beacon : Upload.Async;
|
|
36
|
+
data.end = last ? BooleanFlag.True : BooleanFlag.False;
|
|
37
|
+
data.applicationPlatform = ApplicationPlatform.WebApp;
|
|
38
|
+
data.url = scrub.url(location.href, false, true);
|
|
39
|
+
return [
|
|
40
|
+
data.version,
|
|
41
|
+
data.sequence,
|
|
42
|
+
data.start,
|
|
43
|
+
data.duration,
|
|
44
|
+
data.projectId,
|
|
45
|
+
data.userId,
|
|
46
|
+
data.sessionId,
|
|
47
|
+
data.pageNum,
|
|
48
|
+
data.upload,
|
|
49
|
+
data.end,
|
|
50
|
+
data.applicationPlatform,
|
|
51
|
+
data.url
|
|
52
|
+
];
|
|
53
53
|
}
|