[perf logging] Add timing event when browser tab is hidden (#9733)

* [perf logging] Add timing event when browser tab is hidden

* fix review comment
This commit is contained in:
Grace Guo 2020-05-05 10:17:22 -07:00 committed by GitHub
parent d65d29c810
commit 0b963bdbb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 1 deletions

View File

@ -29,7 +29,11 @@ import {
dashboardInfoPropShape,
dashboardStatePropShape,
} from '../util/propShapes';
import { LOG_ACTIONS_MOUNT_DASHBOARD } from '../../logger/LogUtils';
import {
LOG_ACTIONS_HIDE_BROWSER_TAB,
LOG_ACTIONS_MOUNT_DASHBOARD,
Logger,
} from '../../logger/LogUtils';
import OmniContainer from '../../components/OmniContainer';
import { areObjectsEqual } from '../../reduxUtils';
@ -81,6 +85,8 @@ class Dashboard extends React.PureComponent {
constructor(props) {
super(props);
this.appliedFilters = props.activeFilters || {};
this.onVisibilityChange = this.onVisibilityChange.bind(this);
}
componentDidMount() {
@ -90,6 +96,15 @@ class Dashboard extends React.PureComponent {
eventData.target_id = directLinkComponentId;
}
this.props.actions.logEvent(LOG_ACTIONS_MOUNT_DASHBOARD, eventData);
// Handle browser tab visibility change
if (document.visibilityState === 'hidden') {
this.visibilityEventData = {
start_offset: Logger.getTimestamp(),
ts: new Date().getTime(),
};
}
window.addEventListener('visibilitychange', this.onVisibilityChange);
}
UNSAFE_componentWillReceiveProps(nextProps) {
@ -158,6 +173,27 @@ class Dashboard extends React.PureComponent {
}
}
componentWillUnmount() {
window.removeEventListener('visibilitychange', this.onVisibilityChange);
}
onVisibilityChange() {
if (document.visibilityState === 'hidden') {
// from visible to hidden
this.visibilityEventData = {
start_offset: Logger.getTimestamp(),
ts: new Date().getTime(),
};
} else if (document.visibilityState === 'visible') {
// from hidden to visible
const logStart = this.visibilityEventData.start_offset;
this.props.actions.logEvent(LOG_ACTIONS_HIDE_BROWSER_TAB, {
...this.visibilityEventData,
duration: Logger.getTimestamp() - logStart,
});
}
}
// return charts in array
getAllCharts() {
return Object.values(this.props.charts);

View File

@ -19,6 +19,7 @@
// Log event names ------------------------------------------------------------
export const LOG_ACTIONS_LOAD_CHART = 'load_chart';
export const LOG_ACTIONS_RENDER_CHART = 'render_chart';
export const LOG_ACTIONS_HIDE_BROWSER_TAB = 'hide_browser_tab';
export const LOG_ACTIONS_MOUNT_DASHBOARD = 'mount_dashboard';
export const LOG_ACTIONS_MOUNT_EXPLORER = 'mount_explorer';
@ -41,6 +42,7 @@ export const LOG_ACTIONS_OMNIBAR_TRIGGERED = 'omnibar_triggered';
export const LOG_EVENT_TYPE_TIMING = new Set([
LOG_ACTIONS_LOAD_CHART,
LOG_ACTIONS_RENDER_CHART,
LOG_ACTIONS_HIDE_BROWSER_TAB,
]);
export const LOG_EVENT_TYPE_USER = new Set([
LOG_ACTIONS_MOUNT_DASHBOARD,