Use a less fragile API to track page change performance

This commit is contained in:
Luke Barnard 2018-03-28 10:25:28 +01:00
parent 69d9080dd5
commit c8312dd5ae
2 changed files with 35 additions and 23 deletions

View file

@ -148,24 +148,7 @@ class Analytics {
return true; return true;
} }
startPageChangeTimer() { trackPageChange(generationTimeMs) {
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() {
if (this.disabled) return; if (this.disabled) return;
if (this.firstPage) { if (this.firstPage) {
// De-duplicate first page // De-duplicate first page
@ -174,8 +157,8 @@ class Analytics {
return; return;
} }
this._paq.push(['setCustomUrl', getRedactedUrl()]); this._paq.push(['setCustomUrl', getRedactedUrl()]);
if (typeof this.generationTimeMs === 'number') { if (typeof generationTimeMs === 'number') {
this._paq.push(['setGenerationTimeMs', this.generationTimeMs]); this._paq.push(['setGenerationTimeMs', generationTimeMs]);
} }
this._paq.push(['trackPageView']); this._paq.push(['trackPageView']);
} }

View file

@ -370,14 +370,14 @@ export default React.createClass({
componentWillUpdate: function(props, state) { componentWillUpdate: function(props, state) {
if (this.shouldTrackPageChange(this.state, state)) { if (this.shouldTrackPageChange(this.state, state)) {
Analytics.startPageChangeTimer(); this.startPageChangeTimer();
} }
}, },
componentDidUpdate: function(prevProps, prevState) { componentDidUpdate: function(prevProps, prevState) {
if (this.shouldTrackPageChange(prevState, this.state)) { if (this.shouldTrackPageChange(prevState, this.state)) {
Analytics.stopPageChangeTimer(); const durationMs = this.stopPageChangeTimer();
Analytics.trackPageChange(); Analytics.trackPageChange(durationMs);
} }
if (this.focusComposer) { if (this.focusComposer) {
dis.dispatch({action: 'focus_composer'}); dis.dispatch({action: 'focus_composer'});
@ -385,6 +385,35 @@ export default React.createClass({
} }
}, },
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) { shouldTrackPageChange(prevState, state) {
return prevState.currentRoomId !== state.currentRoomId || return prevState.currentRoomId !== state.currentRoomId ||
prevState.view !== state.view || prevState.view !== state.view ||