lbryio / lbry-desktop

A browser and wallet for LBRY, the decentralized, user-controlled content marketplace.
https://lbry.tech
MIT License
3.56k stars 414 forks source link

Lots of browser console errors/warnings for embedded videos #5924

Open 9mido opened 3 years ago

9mido commented 3 years ago

This is for an embedded video for odysee.

Console errors/warnings:

A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
411fcd8b91821af99fd3fed25c42d96ce088f05e:1 A preload for 'https://odysee.com/public/font/v1/300.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
411fcd8b91821af99fd3fed25c42d96ce088f05e:1 A preload for 'https://odysee.com/public/font/v1/300i.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
411fcd8b91821af99fd3fed25c42d96ce088f05e:1 A preload for 'https://odysee.com/public/font/v1/400.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
411fcd8b91821af99fd3fed25c42d96ce088f05e:1 A preload for 'https://odysee.com/public/font/v1/400i.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
411fcd8b91821af99fd3fed25c42d96ce088f05e:1 A preload for 'https://odysee.com/public/font/v1/700.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
411fcd8b91821af99fd3fed25c42d96ce088f05e:1 A preload for 'https://odysee.com/public/font/v1/700i.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

Uncaught SyntaxError: Unexpected token '<' ui-acccbcac-6ef2-4003-9e72-8f000f274f8f.js:1 

[Deprecation] The disableRemotePlayback attribute should be used in order to disable the default Cast integration instead of using -internal-media-controls-overlay-cast-button selector. See https://www.chromestatus.com/feature/5714245488476160 for more details.
E @ addStyles.js:368
v @ addStyles.js:305
p @ addStyles.js:139
e.exports @ addStyles.js:90
(anonymous) @ all.scss?b7fc:16
n @ bootstrap:19
(anonymous) @ ui-fe073b47-a997-467a-9f72-00b78cdbd5fc.js:77
(anonymous) @ ui-fe073b47-a997-467a-9f72-00b78cdbd5fc.js:77
n @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ ui-fe073b47-a997-467a-9f72-00b78cdbd5fc.js:1

addStyles.js:368 

SDK_API_URL env var is deprecated. Use SDK_API_HOST instead instrument.ts:129
(anonymous) @ instrument.ts:129
(anonymous) @ index.jsx:55
(anonymous) @ ui-fe073b47-a997-467a-9f72-00b78cdbd5fc.js:77
n @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ ui-fe073b47-a997-467a-9f72-00b78cdbd5fc.js:1

GET https://analytics.lbry.com/matomo.js net::ERR_BLOCKED_BY_CLIENT 
MatomoTracker.ts:67 
e.initialize @ MatomoTracker.ts:67
e @ MatomoTracker.ts:22
(anonymous) @ analytics.js:270
n @ bootstrap:19
(anonymous) @ ui-fe073b47-a997-467a-9f72-00b78cdbd5fc.js:98
(anonymous) @ ui-fe073b47-a997-467a-9f72-00b78cdbd5fc.js:98
n @ bootstrap:19
(anonymous) @ index.js:1
n @ bootstrap:19
(anonymous) @ ui-fe073b47-a997-467a-9f72-00b78cdbd5fc.js:77
(anonymous) @ ui-fe073b47-a997-467a-9f72-00b78cdbd5fc.js:77
n @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ ui-fe073b47-a997-467a-9f72-00b78cdbd5fc.js:1

VIDEOJS: ERROR: TypeError: Cannot read property 'controlText' of undefined instrument.ts:129 
    at a.F (videojs.jsx:300)
    at HTMLDivElement.a.dispatcher.a.dispatcher (video.min.js:12)
    at he (video.min.js:12)
    at a.trigger (video.min.js:12)
    at a.s.handleTechLoadStart_ (video.min.js:19)
    at HTMLVideoElement.a.dispatcher.a.dispatcher (video.min.js:12)
    at HTMLVideoElement.r (helpers.ts:85)
(anonymous) @ instrument.ts:129
(anonymous) @ video.min.js:12
r.error @ video.min.js:12
a.dispatcher.a.dispatcher @ video.min.js:12
he @ video.min.js:12
trigger @ video.min.js:12
s.handleTechLoadStart_ @ video.min.js:19
a.dispatcher.a.dispatcher @ video.min.js:12
r @ helpers.ts:85

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. St {code: 4, message: "The media could not be loaded, either because the …rk failed or because the format is not supported."} instrument.ts:129
(anonymous) @ instrument.ts:129
(anonymous) @ video.min.js:12
r.error @ video.min.js:12
s.error @ video.min.js:19
s.handleTechError_ @ video.min.js:19
a.dispatcher.a.dispatcher @ video.min.js:12
r @ helpers.ts:85
error (async)
(anonymous) @ trycatch.ts:93
(anonymous) @ instrument.ts:376
fe @ video.min.js:12
Oe @ video.min.js:12
on @ video.min.js:12
Oe @ video.min.js:12
on @ video.min.js:12
s.loadTech_ @ video.min.js:19
s.src_ @ video.min.js:19
(anonymous) @ video.min.js:19
e @ video.min.js:19
e @ video.min.js:19
(anonymous) @ video.min.js:19
(anonymous) @ video.min.js:12
r @ helpers.ts:85
setTimeout (async)
(anonymous) @ trycatch.ts:34
n.setTimeout @ video.min.js:12
Yn @ video.min.js:19
s.src @ video.min.js:19
t @ video.min.js:19
n.addChild @ video.min.js:12
(anonymous) @ video.min.js:12
n.initChildren @ video.min.js:12
a @ video.min.js:19
ri @ video.min.js:19
(anonymous) @ videojs.jsx:484
(anonymous) @ videojs.jsx:523
oc @ react-dom.production.min.js:211
_s @ react-dom.production.min.js:257
t.unstable_runWithPriority @ scheduler.production.min.js:19
Va @ react-dom.production.min.js:122
gs @ react-dom.production.min.js:257
(anonymous) @ react-dom.production.min.js:256
B @ scheduler.production.min.js:17
S.port1.onmessage @ scheduler.production.min.js:14

POST https://sentry.lbry.tech/api/2/store/?sentry_key=1f3c88e2e4b341328a638e138a60fb73&sentry_version=7 net::ERR_BLOCKED_BY_CLIENT instrument.ts:157 
(anonymous) @ instrument.ts:157
(anonymous) @ fetch.ts:41
e @ syncpromise.ts:29
t.sendEvent @ fetch.ts:40
e.sendEvent @ basebackend.ts:96
(anonymous) @ baseclient.ts:399
onfulfilled @ syncpromise.ts:101
(anonymous) @ syncpromise.ts:220
_executeHandlers @ syncpromise.ts:217
_attachHandler @ syncpromise.ts:201
(anonymous) @ syncpromise.ts:92
e @ syncpromise.ts:29
e.then @ syncpromise.ts:91
(anonymous) @ baseclient.ts:388
e @ syncpromise.ts:29
e._processEvent @ baseclient.ts:387
(anonymous) @ baseclient.ts:88
onfulfilled @ syncpromise.ts:101
(anonymous) @ syncpromise.ts:220
_executeHandlers @ syncpromise.ts:217
_attachHandler @ syncpromise.ts:201
(anonymous) @ syncpromise.ts:92
e @ syncpromise.ts:29
e.then @ syncpromise.ts:91
e.captureException @ baseclient.ts:86
e._invokeClient @ hub.ts:91
e.captureException @ hub.ts:190
i @ index.ts:13
o @ index.ts:31
(anonymous) @ analytics.js:81
e.withScope @ hub.ts:138
i @ index.ts:13
c @ index.ts:154
(anonymous) @ analytics.js:79
sentryError @ analytics.js:77
(anonymous) @ view.jsx:256
a.dispatcher.a.dispatcher @ video.min.js:12
he @ video.min.js:12
trigger @ video.min.js:12
s.error @ video.min.js:19
s.handleTechError_ @ video.min.js:19
a.dispatcher.a.dispatcher @ video.min.js:12
r @ helpers.ts:85
error (async)
(anonymous) @ trycatch.ts:93
(anonymous) @ instrument.ts:376
fe @ video.min.js:12
Oe @ video.min.js:12
on @ video.min.js:12
Oe @ video.min.js:12
on @ video.min.js:12
s.loadTech_ @ video.min.js:19
s.src_ @ video.min.js:19
(anonymous) @ video.min.js:19
e @ video.min.js:19
e @ video.min.js:19
(anonymous) @ video.min.js:19
(anonymous) @ video.min.js:12
r @ helpers.ts:85
setTimeout (async)
(anonymous) @ trycatch.ts:34
n.setTimeout @ video.min.js:12
Yn @ video.min.js:19
s.src @ video.min.js:19
t @ video.min.js:19
n.addChild @ video.min.js:12
(anonymous) @ video.min.js:12
n.initChildren @ video.min.js:12
a @ video.min.js:19
ri @ video.min.js:19
(anonymous) @ videojs.jsx:484
(anonymous) @ videojs.jsx:523
oc @ react-dom.production.min.js:211
_s @ react-dom.production.min.js:257
t.unstable_runWithPriority @ scheduler.production.min.js:19
Va @ react-dom.production.min.js:122
gs @ react-dom.production.min.js:257
(anonymous) @ react-dom.production.min.js:256
B @ scheduler.production.min.js:17
S.port1.onmessage @ scheduler.production.min.js:14

instrument.ts:129 VIDEOJS: WARN: Using hls options is deprecated. Use vhs instead.
(anonymous) @ instrument.ts:129
(anonymous) @ video.min.js:12
r.warn @ video.min.js:12
r @ video.min.js:25
handleSource @ video.min.js:25
e.setSource @ video.min.js:19
(anonymous) @ video.min.js:19
n.ready @ video.min.js:12
s.techCall_ @ video.min.js:19
(anonymous) @ video.min.js:19
n.ready @ video.min.js:12
s.src_ @ video.min.js:19
(anonymous) @ video.min.js:19
e @ video.min.js:19
e @ video.min.js:19
(anonymous) @ video.min.js:19
(anonymous) @ video.min.js:12
r @ helpers.ts:85
setTimeout (async)
(anonymous) @ trycatch.ts:34
n.setTimeout @ video.min.js:12
Yn @ video.min.js:19
s.src @ video.min.js:19
(anonymous) @ videojs.jsx:575
Promise.then (async)
(anonymous) @ videojs.jsx:550
oc @ react-dom.production.min.js:211
_s @ react-dom.production.min.js:257
t.unstable_runWithPriority @ scheduler.production.min.js:19
Va @ react-dom.production.min.js:122
gs @ react-dom.production.min.js:257
(anonymous) @ react-dom.production.min.js:256
B @ scheduler.production.min.js:17
S.port1.onmessage @ scheduler.production.min.js:14

VIDEOJS: WARN: Using hls options is deprecated. Use vhs instead. instrument.ts:129
(anonymous) @ instrument.ts:129
(anonymous) @ video.min.js:12
r.warn @ video.min.js:12
r @ video.min.js:25
handleSource @ video.min.js:25
e.setSource @ video.min.js:19
(anonymous) @ video.min.js:19
n.ready @ video.min.js:12
s.techCall_ @ video.min.js:19
(anonymous) @ video.min.js:19
n.ready @ video.min.js:12
s.src_ @ video.min.js:19
(anonymous) @ video.min.js:19
e @ video.min.js:19
e @ video.min.js:19
(anonymous) @ video.min.js:19
(anonymous) @ video.min.js:12
r @ helpers.ts:85
setTimeout (async)
(anonymous) @ trycatch.ts:34
n.setTimeout @ video.min.js:12
Yn @ video.min.js:19
s.src @ video.min.js:19
(anonymous) @ videojs.jsx:586
Promise.then (async)
(anonymous) @ videojs.jsx:550
oc @ react-dom.production.min.js:211
_s @ react-dom.production.min.js:257
t.unstable_runWithPriority @ scheduler.production.min.js:19
Va @ react-dom.production.min.js:122
gs @ react-dom.production.min.js:257
(anonymous) @ react-dom.production.min.js:256
B @ scheduler.production.min.js:17
S.port1.onmessage @ scheduler.production.min.js:14

VIDEOJS: ERROR: TypeError: Cannot read property 'controlText' of undefined instrument.ts:129 
    at a.F (videojs.jsx:311)
    at HTMLDivElement.a.dispatcher.a.dispatcher (video.min.js:12)
    at he (video.min.js:12)
    at a.trigger (video.min.js:12)
    at a.s.handleTechLoadStart_ (video.min.js:19)
    at HTMLVideoElement.a.dispatcher.a.dispatcher (video.min.js:12)
    at HTMLVideoElement.r (helpers.ts:85)
(anonymous) @ instrument.ts:129
(anonymous) @ video.min.js:12
r.error @ video.min.js:12
a.dispatcher.a.dispatcher @ video.min.js:12
he @ video.min.js:12
trigger @ video.min.js:12
s.handleTechLoadStart_ @ video.min.js:19
a.dispatcher.a.dispatcher @ video.min.js:12
r @ helpers.ts:85

The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
odysee.com/$/embed/bitcoin,-gpus-and-power.-this-is-what/411fcd8b91821af99fd3fed25c42d96ce088f05e?r=AGRkvekbzetHw4KG7CWyzae6XnuAuurb:1 The resource https://odysee.com/public/font/v1/400i.woff was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
odysee.com/$/embed/bitcoin,-gpus-and-power.-this-is-what/411fcd8b91821af99fd3fed25c42d96ce088f05e?r=AGRkvekbzetHw4KG7CWyzae6XnuAuurb:1 The resource https://odysee.com/public/font/v1/700.woff was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
odysee.com/$/embed/bitcoin,-gpus-and-power.-this-is-what/411fcd8b91821af99fd3fed25c42d96ce088f05e?r=AGRkvekbzetHw4KG7CWyzae6XnuAuurb:1 The resource https://odysee.com/public/font/v1/300i.woff was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
odysee.com/$/embed/bitcoin,-gpus-and-power.-this-is-what/411fcd8b91821af99fd3fed25c42d96ce088f05e?r=AGRkvekbzetHw4KG7CWyzae6XnuAuurb:1 The resource https://odysee.com/public/font/v1/400.woff was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
odysee.com/$/embed/bitcoin,-gpus-and-power.-this-is-what/411fcd8b91821af99fd3fed25c42d96ce088f05e?r=AGRkvekbzetHw4KG7CWyzae6XnuAuurb:1 The resource https://odysee.com/public/font/v1/300.woff was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
odysee.com/$/embed/bitcoin,-gpus-and-power.-this-is-what/411fcd8b91821af99fd3fed25c42d96ce088f05e?r=AGRkvekbzetHw4KG7CWyzae6XnuAuurb:1 The resource https://odysee.com/public/font/v1/700i.woff was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

The network tab on the browser inspect tool also shows issues related to matomo.js, sentry, and other things.

Also, the embedded video takes a bit long to load on the page.

There is also the retry button inside of the embedded video on the top left of the video. This should not show at all. The fact that it does indicates that it is buggy. Pressing retry when the video is currently playing stops the video completely and resets it back to the beginning. The retry button seems to show up on the Brave browser.

tzarebczan commented 3 years ago

Thanks for filing. The warnings are normal but we should look into the retry button showing.

9mido commented 3 years ago

Here is an update:

Embedded videos take a very long time to load on most browsers. This might be because the embedded videos are long in length but not entirely sure.

Warnings:

A preload for '<URL>' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

e3e8196……1df43878d11c4df9a:1 A preload for 'https://odysee.com/public/font/v1/300.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
e3e8196……1df43878d11c4df9a:1 A preload for 'https://odysee.com/public/font/v1/300i.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
e3e8196……1df43878d11c4df9a:1 A preload for 'https://odysee.com/public/font/v1/400.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
e3e8196……1df43878d11c4df9a:1 A preload for 'https://odysee.com/public/font/v1/400i.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
e3e8196……1df43878d11c4df9a:1 A preload for 'https://odysee.com/public/font/v1/700.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
e3e8196……1df43878d11c4df9a:1 A preload for 'https://odysee.com/public/font/v1/700i.woff' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

[Deprecation] The disableRemotePlayback attribute should be used in order to disable the default Cast integration instead of using -internal-media-controls-overlay-cast-button selector. See https://www.chromestatus.com/feature/5714245488476160 for more details.
E @ addStyles.js:368
v @ addStyles.js:305
p @ addStyles.js:139
e.exports @ addStyles.js:90
(anonymous) @ all.scss?b7fc:16
a @ bootstrap:63
(anonymous) @ ui-c042559d-6029-4524-87a6-5c290d9caa89.js:57
(anonymous) @ ui-c042559d-6029-4524-87a6-5c290d9caa89.js:57
a @ bootstrap:63
(anonymous) @ bootstrap:198
(anonymous) @ ui-c042559d-6029-4524-87a6-5c290d9caa89.js:1

SDK_API_URL env var is deprecated. Use SDK_API_HOST instead
(anonymous) @ instrument.ts:129
(anonymous) @ index.jsx:58
(anonymous) @ ui-c042559d-6029-4524-87a6-5c290d9caa89.js:57
a @ bootstrap:63
(anonymous) @ bootstrap:198
(anonymous) @ ui-c042559d-6029-4524-87a6-5c290d9caa89.js:1

Errors:

ui-ad2113d9-56d5-4d5f-9c4f-26b5b9d865aa.js:1 Uncaught SyntaxError: Unexpected token '<'

VIDEOJS: ERROR: TypeError: Cannot read property 'controlText' of undefined
    at t.H (videojs.jsx:317)
    at HTMLDivElement.r.dispatcher.r.dispatcher (video.es.js:2214)
    at sr (video.es.js:2350)
    at trigger (video.es.js:3291)
    at t.n.handleTechLoadStart_ (video.es.js:23075)
    at t.<anonymous> (video.es.js:22844)
    at HTMLVideoElement.r.dispatcher.r.dispatcher (video.es.js:2214)
    at HTMLVideoElement.r (helpers.ts:85)
(anonymous) @ instrument.ts:129
(anonymous) @ video.es.js:138
i.error @ video.es.js:326
r.dispatcher.r.dispatcher @ video.es.js:2216
sr @ video.es.js:2350
trigger @ video.es.js:3291
n.handleTechLoadStart_ @ video.es.js:23075
(anonymous) @ video.es.js:22844
r.dispatcher.r.dispatcher @ video.es.js:2214
r @ helpers.ts:85