Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Track duration of page changes #1814

Merged
merged 6 commits into from
Mar 28, 2018
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Use a less fragile API to track page change performance
lukebarnard1 committed Mar 28, 2018
commit c8312dd5ae0e94629bb6e69f420f3654ff42e94a
23 changes: 3 additions & 20 deletions src/Analytics.js
Original file line number Diff line number Diff line change
@@ -148,24 +148,7 @@ class Analytics {
return true;
}

startPageChangeTimer() {
performance.clearMarks('riot_page_change_start');
performance.mark('riot_page_change_start');
}

stopPageChangeTimer() {
performance.mark('riot_page_change_stop');
performance.measure(
'riot_page_change_delta',
'riot_page_change_start',
'riot_page_change_stop',
);

const measurement = performance.getEntriesByName('riot_page_change_delta').pop();
this.generationTimeMs = measurement.duration;
}

trackPageChange() {
trackPageChange(generationTimeMs) {
if (this.disabled) return;
if (this.firstPage) {
// De-duplicate first page
@@ -174,8 +157,8 @@ class Analytics {
return;
}
this._paq.push(['setCustomUrl', getRedactedUrl()]);
if (typeof this.generationTimeMs === 'number') {
this._paq.push(['setGenerationTimeMs', this.generationTimeMs]);
if (typeof generationTimeMs === 'number') {
this._paq.push(['setGenerationTimeMs', generationTimeMs]);
}
this._paq.push(['trackPageView']);
}
35 changes: 32 additions & 3 deletions src/components/structures/MatrixChat.js
Original file line number Diff line number Diff line change
@@ -370,21 +370,50 @@ export default React.createClass({

componentWillUpdate: function(props, state) {
if (this.shouldTrackPageChange(this.state, state)) {
Analytics.startPageChangeTimer();
this.startPageChangeTimer();
}
},

componentDidUpdate: function(prevProps, prevState) {
if (this.shouldTrackPageChange(prevState, this.state)) {
Analytics.stopPageChangeTimer();
Analytics.trackPageChange();
const durationMs = this.stopPageChangeTimer();
Analytics.trackPageChange(durationMs);
}
if (this.focusComposer) {
dis.dispatch({action: 'focus_composer'});
this.focusComposer = false;
}
},

startPageChangeTimer() {
// This shouldn't happen because componentWillUpdate and componentDidUpdate
// are used.
if (this._pageChanging) {
console.warn('MatrixChat.startPageChangeTimer: timer already started');
return;
}
this._pageChanging = true;
performance.mark('riot_MatrixChat_page_change_start');
},

stopPageChangeTimer() {
if (!this._pageChanging) {
console.warn('MatrixChat.stopPageChangeTimer: timer not started');
return;
}
this._pageChanging = false;
performance.mark('riot_MatrixChat_page_change_stop');
performance.measure(
'riot_MatrixChat_page_change_delta',
'riot_MatrixChat_page_change_start',
'riot_MatrixChat_page_change_stop',
);
performance.clearMarks('riot_MatrixChat_page_change_start');
performance.clearMarks('riot_MatrixChat_page_change_stop');
const measurement = performance.getEntriesByName('riot_MatrixChat_page_change_delta').pop();
return measurement.duration;
},

shouldTrackPageChange(prevState, state) {
return prevState.currentRoomId !== state.currentRoomId ||
prevState.view !== state.view ||