Track duration for initial video fetch time

this may help identify degraded services and poor user experience.
This commit is contained in:
DispatchCommit 2021-03-08 22:26:41 -08:00 committed by Sean Yesmunt
parent dc1be2791f
commit d47b6eae0c
2 changed files with 14 additions and 0 deletions

View file

@ -199,6 +199,12 @@ const analytics: Analytics = {
Lbryio.call('feedback', 'search', { query, vote }); Lbryio.call('feedback', 'search', { query, vote });
} }
}, },
videoFetchDuration: (source, duration) => {
sendPromMetric('time_to_fetch', duration);
sendMatomoEvent('Media', 'TimeToFetch', source, duration);
},
videoStartEvent: (claimId, duration) => { videoStartEvent: (claimId, duration) => {
sendPromMetric('time_to_start', duration); sendPromMetric('time_to_start', duration);
sendMatomoEvent('Media', 'TimeToStart', claimId, duration); sendMatomoEvent('Media', 'TimeToStart', claimId, duration);

View file

@ -11,6 +11,7 @@ import './plugins/videojs-mobile-ui/plugin';
import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin'; import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin';
import qualityLevels from 'videojs-contrib-quality-levels'; import qualityLevels from 'videojs-contrib-quality-levels';
import isUserTyping from 'util/detect-typing'; import isUserTyping from 'util/detect-typing';
import analytics from 'analytics';
const isDev = process.env.NODE_ENV !== 'production'; const isDev = process.env.NODE_ENV !== 'production';
@ -479,8 +480,15 @@ export default React.memo<Props>(function VideoJs(props: Props) {
// Update video player and reload when source URL changes // Update video player and reload when source URL changes
useEffect(() => { useEffect(() => {
const fetchStartedAt = performance.now();
// For some reason the video player is responsible for detecting content type this way // For some reason the video player is responsible for detecting content type this way
fetch(source, { method: 'HEAD', cache: 'no-store' }).then((response) => { fetch(source, { method: 'HEAD', cache: 'no-store' }).then((response) => {
const deltaFetch = performance.now() - fetchStartedAt;
console.log(`Prefetch took: ${deltaFetch.toFixed(3)}ms`);
// Send fetch duration analytic event (in ms)
analytics.videoFetchDuration(source, deltaFetch);
const player = playerRef.current; const player = playerRef.current;
if (!player) { if (!player) {