Skip to content

Commit 797e983

Browse files
piotr-szewczykpiotr-szewczyk
committed
fix/eslint fix
1 parent 4e749f6 commit 797e983

9 files changed

Lines changed: 267 additions & 247 deletions

File tree

‎packages/browser/src/performance/index.ts‎

Lines changed: 193 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -1,203 +1,216 @@
11
import { Batch } from "../transport/batch";
22
import { BrowserClientConfigType } from "../types/client";
3-
import { BrowserPerformanceType, LargestContentfulPaint, LayoutShift, ObserverType } from "../types/performance";
3+
import {
4+
BrowserPerformanceType,
5+
LargestContentfulPaint,
6+
LayoutShift,
7+
ObserverType
8+
} from "../types/performance";
49
import { BatchPayload, CAPTURE_ENDPOINT } from "../types/transport";
510
import { utils } from "../utils";
611

712
export class Performance {
8-
private batch: Batch;
9-
10-
constructor(configs: BrowserClientConfigType) {
11-
this.batch = new Batch(configs, {
12-
headers: configs?.headers,
13-
url: CAPTURE_ENDPOINT.BROWSER_PERFS
14-
});
15-
}
16-
17-
public initPerformanceCollection() {
18-
this.handleCLS();
19-
this.handleFID();
20-
this.handleLCP();
21-
// this.handleNavigationEntry();
22-
this.handlePaintEntry();
23-
}
24-
25-
// overrride to this.batch.add which inlcude some necessary data for each perfs
26-
public addToBatch(payload: BatchPayload): void {
27-
const pathname = utils.pathname();
28-
const { browser, platform } = utils.browserDetails();
29-
30-
const batchPayload: BatchPayload = {
31-
view: pathname,
32-
browser: {
33-
name: browser.name,
34-
version: browser.version
35-
},
36-
platform: {
37-
type: platform?.type
38-
},
39-
...payload
13+
private batch: Batch;
14+
15+
constructor(configs: BrowserClientConfigType) {
16+
this.batch = new Batch(configs, {
17+
headers: configs?.headers,
18+
url: CAPTURE_ENDPOINT.BROWSER_PERFS
19+
});
20+
}
21+
22+
public initPerformanceCollection() {
23+
this.handleCLS();
24+
this.handleFID();
25+
this.handleLCP();
26+
// this.handleNavigationEntry();
27+
this.handlePaintEntry();
28+
}
29+
30+
// overrride to this.batch.add which inlcude some necessary data for each perfs
31+
public addToBatch(payload: BatchPayload): void {
32+
const pathname = utils.pathname();
33+
const { browser, platform } = utils.browserDetails();
34+
35+
const batchPayload: BatchPayload = {
36+
view: pathname,
37+
browser: {
38+
name: browser.name,
39+
version: browser.version
40+
},
41+
platform: {
42+
type: platform?.type
43+
},
44+
...payload
45+
};
46+
47+
this.batch.add(batchPayload);
48+
}
49+
50+
// https://developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming
51+
// first-paint, first-contentful-paint
52+
private handlePaintEntry() {
53+
const handle = (entries: PerformancePaintTiming[]): void => {
54+
// const now = dayjs
55+
for (const entry of entries) {
56+
const entryName =
57+
entry.name === "first-paint"
58+
? "FP"
59+
: entry.name === "first-contentful-paint"
60+
? "FCP"
61+
: undefined;
62+
63+
const payload: BrowserPerformanceType = {
64+
event: entry.entryType,
65+
timestamp: utils.currentUnix(),
66+
performance: [
67+
{
68+
name: entryName,
69+
unit: "miliseconds",
70+
value: entry.startTime
71+
}
72+
]
4073
};
4174

42-
this.batch.add(batchPayload);
43-
}
44-
45-
// https://developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming
46-
// first-paint, first-contentful-paint
47-
private handlePaintEntry() {
48-
const handle = (entries: PerformancePaintTiming[]): void => {
49-
// const now = dayjs
50-
for (const entry of entries) {
51-
const entryName = entry.name === "first-paint"
52-
? "FP"
53-
: entry.name === "first-contentful-paint"
54-
? "FCP"
55-
: undefined;
56-
57-
const payload: BrowserPerformanceType = {
58-
event: entry.entryType,
59-
timestamp: utils.currentUnix(),
60-
performance: [{
61-
name: entryName,
62-
unit: "miliseconds",
63-
value: entry.startTime
64-
}]
65-
};
66-
67-
this.addToBatch(payload);
68-
}
75+
this.addToBatch(payload);
76+
}
77+
};
78+
79+
this.observe<LargestContentfulPaint>("paint", handle);
80+
}
81+
82+
// largest-contentful-paint
83+
// https://developer.mozilla.org/en-US/docs/Web/API/LargestContentfulPaint
84+
private handleLCP() {
85+
const handle = (entries: LargestContentfulPaint[]): void => {
86+
if (entries.length === 0) {
87+
return;
88+
}
89+
90+
const entry = entries[entries.length - 1];
91+
const payload: BrowserPerformanceType = {
92+
event: entry.entryType,
93+
timestamp: utils.currentUnix(),
94+
performance: [
95+
{
96+
value: entry.startTime,
97+
unit: "millisecond",
98+
name: "LCP"
99+
}
100+
]
101+
};
102+
this.addToBatch(payload);
103+
};
104+
this.observe<LargestContentfulPaint>("largest-contentful-paint", handle);
105+
}
106+
107+
// layout-shift
108+
// https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift
109+
private handleCLS() {
110+
const handle = (entries: LayoutShift[]): void => {
111+
for (const entry of entries) {
112+
if (entry.hadRecentInput) {
113+
// layout-shift event is triggered after every user input
114+
return;
69115
}
70116

71-
this.observe<LargestContentfulPaint>("paint", handle);
72-
}
73-
74-
// largest-contentful-paint
75-
// https://developer.mozilla.org/en-US/docs/Web/API/LargestContentfulPaint
76-
private handleLCP() {
77-
const handle = (entries: LargestContentfulPaint[]): void => {
78-
if (entries.length === 0) {
79-
return;
80-
}
81-
82-
const entry = entries[entries.length - 1];
83-
const payload: BrowserPerformanceType = {
84-
event: entry.entryType,
85-
timestamp: utils.currentUnix(),
86-
performance: [{
87-
value: entry.startTime,
88-
unit: 'millisecond',
89-
name: "LCP"
90-
}]
91-
};
92-
this.addToBatch(payload);
117+
if (entry.value === 0) {
118+
return;
93119
}
94-
this.observe<LargestContentfulPaint>("largest-contentful-paint", handle);
95-
}
96120

97-
// layout-shift
98-
// https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift
99-
private handleCLS() {
100-
const handle = (entries: LayoutShift[]): void => {
101-
for (const entry of entries) {
102-
if (entry.hadRecentInput) {
103-
// layout-shift event is triggered after every user input
104-
return;
105-
}
106-
107-
if (entry.value === 0) {
108-
return;
109-
}
110-
111-
const payload: BrowserPerformanceType = {
112-
event: entry.entryType,
113-
timestamp: utils.currentUnix(),
114-
performance: [{
115-
name: "CLS",
116-
unit: " ",
117-
value: entry.value
118-
}]
119-
}
120-
this.addToBatch(payload);
121+
const payload: BrowserPerformanceType = {
122+
event: entry.entryType,
123+
timestamp: utils.currentUnix(),
124+
performance: [
125+
{
126+
name: "CLS",
127+
unit: " ",
128+
value: entry.value
121129
}
122-
123-
}
124-
this.observe<LayoutShift>("layout-shift", handle);
125-
}
126-
127-
// first-input-delay
128-
// https://developer.mozilla.org/en-US/docs/Glossary/First_input_delay
129-
private handleFID() {
130-
const handle = (entries: PerformanceEventTiming[]): void => {
131-
for (const entry of entries) {
132-
const payload: BrowserPerformanceType = {
133-
event: entry.entryType,
134-
timestamp: utils.currentUnix(),
135-
performance: [{
136-
name: "FID",
137-
unit: "miliseconds",
138-
value: entry.processingStart - entry.startTime
139-
}]
140-
};
141-
this.addToBatch(payload);
130+
]
131+
};
132+
this.addToBatch(payload);
133+
}
134+
};
135+
this.observe<LayoutShift>("layout-shift", handle);
136+
}
137+
138+
// first-input-delay
139+
// https://developer.mozilla.org/en-US/docs/Glossary/First_input_delay
140+
private handleFID() {
141+
const handle = (entries: PerformanceEventTiming[]): void => {
142+
for (const entry of entries) {
143+
const payload: BrowserPerformanceType = {
144+
event: entry.entryType,
145+
timestamp: utils.currentUnix(),
146+
performance: [
147+
{
148+
name: "FID",
149+
unit: "miliseconds",
150+
value: entry.processingStart - entry.startTime
142151
}
143-
}
144-
this.observe<PerformanceEventTiming>("first-input", handle);
145-
}
146-
147-
// https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
148-
private handleNavigationEntry() {
149-
const handle = (entries: PerformanceNavigationTiming[]): void => {
150-
for (const entry of entries) {
151-
const payload: BrowserPerformanceType = {
152-
event: entry.entryType,
153-
timestamp: utils.currentUnix(),
154-
performance: [
155-
{
156-
name: "domCompleted",
157-
unit: "miliseconds",
158-
value: entry.domComplete
159-
},
160-
{
161-
name: "domContentLoadedEventEnd",
162-
unit: "miliseconds",
163-
value: entry.domContentLoadedEventEnd
164-
},
165-
{
166-
name: "domInteractive",
167-
unit: "miliseconds",
168-
value: entry.domInteractive
169-
},
170-
{
171-
name: "loadEventEnd",
172-
unit: "miliseconds",
173-
value: entry.loadEventEnd
174-
}
175-
]
176-
};
177-
178-
this.addToBatch(payload);
152+
]
153+
};
154+
this.addToBatch(payload);
155+
}
156+
};
157+
this.observe<PerformanceEventTiming>("first-input", handle);
158+
}
159+
160+
// https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming
161+
private handleNavigationEntry() {
162+
const handle = (entries: PerformanceNavigationTiming[]): void => {
163+
for (const entry of entries) {
164+
const payload: BrowserPerformanceType = {
165+
event: entry.entryType,
166+
timestamp: utils.currentUnix(),
167+
performance: [
168+
{
169+
name: "domCompleted",
170+
unit: "miliseconds",
171+
value: entry.domComplete
172+
},
173+
{
174+
name: "domContentLoadedEventEnd",
175+
unit: "miliseconds",
176+
value: entry.domContentLoadedEventEnd
177+
},
178+
{
179+
name: "domInteractive",
180+
unit: "miliseconds",
181+
value: entry.domInteractive
182+
},
183+
{
184+
name: "loadEventEnd",
185+
unit: "miliseconds",
186+
value: entry.loadEventEnd
179187
}
188+
]
180189
};
181190

182-
this.observe<PerformanceNavigationTiming>("navigation", handle);
183-
}
191+
this.addToBatch(payload);
192+
}
193+
};
184194

185-
private observe = <T>(
186-
type: ObserverType,
187-
callback: (entries: T[]) => void
188-
): PerformanceObserver | undefined => {
189-
if (window.PerformanceObserver) {
190-
const supported = PerformanceObserver.supportedEntryTypes;
191-
if (!supported.includes(type)) {
192-
return;
193-
}
195+
this.observe<PerformanceNavigationTiming>("navigation", handle);
196+
}
194197

195-
const observe = new PerformanceObserver((entries => callback(entries.getEntries() as T[])));
196-
observe.observe({ type, buffered: true });
198+
private observe = <T>(
199+
type: ObserverType,
200+
callback: (entries: T[]) => void
201+
): PerformanceObserver | undefined => {
202+
if (window.PerformanceObserver) {
203+
const supported = PerformanceObserver.supportedEntryTypes;
204+
if (!supported.includes(type)) {
205+
return;
206+
}
197207

198-
return observe;
199-
};
208+
const observe = new PerformanceObserver((entries) => callback(entries.getEntries() as T[]));
209+
observe.observe({ type, buffered: true });
200210

201-
return undefined;
211+
return observe;
202212
}
213+
214+
return undefined;
215+
};
203216
}

0 commit comments

Comments
 (0)