LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Track duration for initial video fetch time

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/analytics.js
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);

8
ui/component/viewers/videoViewer/internal/videojs.jsx
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) {