[Request] Show more detailed error for webcam load failures

[cp2004]

Is your feature request related to a problem? Please describe.

When a webcam fails to load, OctoPrint shows a message "Webcam stream not loaded". There are many causes of webcam streams not loading in the browser, but to users that are not technically inclined they see this as the error message, but don't understand what it means. This results in posts on the forums/discord server titled "Webcam stream not loaded", with very little supporting information, people jumping on other forum threads with "the same issue" when in fact it is completely different. There is no detail for users who want to troubleshoot themselves to start searching the forums with, so we also find people trying to solve their problem with a whole range of fixes (sometimes making things worse) because they can't tell which one is relevant to their problem.

In the case of CORS issues for example, the error message in the browser clearly explains that it is a CORS problem rather than something different.

Describe the solution you'd like

Provide more information about the reason the stream has failed to load. I would probably put this hidden behind a "more information" clickable thing to avoid cluttering up the screen with irrelevant error messages (maybe they've just unplugged their camera, and it normally works - and don't want to see red error popups for example).

Describe alternatives you've considered

Capturing the browser console as part of the systeminfo bundle. While this would contain the information that I'm after when people post on the forums, it doesn't allow people to troubleshoot/search for help themselves, as they are not likely to look in the systeminfo bundle if they weren't likely to look at the browser console.

Additional context

https://community.octoprint.org/search?q=webcam%20stream%20not%20loaded

[foosel]

Phew, tbh, this could become really really tricky to pull off. I looked into what kind of information I can get from the data data I get on a loading error and it looks quite bad. And a quick search revealed that there's apparently no way at all to even get information on CORS errors from the JS client side. So I'm really not sure if anything can be done here, but I'll take another timeboxed poke at this.

[foosel]

Yeah, that's not going to happen. There's simply no way to get any kind of further information on the error that caused the failure to load.

In case of an image (e.g. mjpg stream), so an HTMLImageElement, all we have is the error event, which is pretty damn useless: HTMLElement: error event. The only information we get in there is "type": "error" and that's it, it's a generic event. So we know "something failed" but that's it.

And a video embed, so an HTMLMediaElement, is in the exact same situation: all we get is a generic error Event without any additional information on the reason.

As to CORS errors specifically, there's a thread on that on Sentry's repo: getsentry/sentry-javascript#8342. tldr: Impossible, security restrictions prevent any kind of programmatic access to CORS errors.

And even attempting to capture the browser console here won't work - the error happens completely outside of what's possible to access from JavaScript, overriding console.error or window.onerror doesn't help at all.

[cp2004]

Thanks for giving it a look! It does make some sense I guess that you can't get info about the errors like that, for security. At least we tried.

One final thought I did have was to provide a link to click that would open the browser error console so the user can find the error easier. This might not be possible either, so I will have a look and see if I can find anything.