Use a less fragile API to track page change performance
This commit is contained in:
parent
69d9080dd5
commit
c8312dd5ae
2 changed files with 35 additions and 23 deletions
|
@ -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']);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 ||
|
||||||
|
|
Loading…
Reference in a new issue