From 65fa18bacea465b6b54d0e482082a486fab65141 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 1 Aug 2024 10:14:26 +0200
Subject: [PATCH] More info on embed player crash

---
 client/src/standalone/videos/embed.html | 29 ++++++++++++++++++++++---
 client/src/standalone/videos/embed.scss |  9 ++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index 6c904669e..64331397e 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -26,6 +26,12 @@
       <h1 id="error-title"></h1>
 
       <div id="error-content"></div>
+
+      <details id="error-details">
+        <summary>Error details</summary>
+
+        <div id="error-details-content"></div>
+      </details>
     </div>
 
     <div id="video-password-block">
@@ -49,7 +55,7 @@
 
     <script type="text/javascript">
       // Can be called in embed.ts
-      window.displayIncompatibleBrowser = function () {
+      window.displayIncompatibleBrowser = function (err) {
         const text = 'The player is not compatible with your web browser. Please try latest Firefox version.'
 
         document.title = 'Sorry' + ' - ' + text
@@ -63,6 +69,19 @@
         const errorText = document.getElementById('error-content')
         errorText.innerHTML = text
 
+        const errorDetails = document.getElementById('error-details')
+        let msg = ''
+
+        if (typeof err === 'string') msg = err
+        else if (err instanceof Error) msg = err.name + ' ' + err.message + ' at:\n' + err.stack
+
+        if (msg) {
+          const errorDetailsContent = document.getElementById('error-details-content')
+          errorDetailsContent.innerText = msg
+        } else {
+          errorDetails.style.display = 'none'
+        }
+
         const videoWrapper = document.getElementById('video-wrapper')
         if (videoWrapper) videoWrapper.style.display = 'none'
 
@@ -70,13 +89,17 @@
         if (placeholderPreview) placeholderPreview.style.display = 'none'
       }
 
-      window.onerror = function (msg) {
+      window.onerror = function (msg, source, lineNumber, columnNumber, err) {
         if (typeof msg === 'string' && msg.toLowerCase().includes(' ice ')) {
           console.warn(msg)
           return
         }
 
-        window.displayIncompatibleBrowser()
+        window.displayIncompatibleBrowser(err)
+
+        if (window.logger && typeof window.logger.error === 'function') {
+          window.logger.error('Embed player crashed', err)
+        }
       }
 
       if (/MSIE|Trident/.test(window.navigator.userAgent) ) {
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index 6f9816af4..a320c145d 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -63,6 +63,14 @@ body {
   font-size: 24px;
 }
 
+#error-details {
+  margin-top: 30px
+}
+
+#error-details-content {
+  margin-top: 10px
+}
+
 #placeholder-preview {
   position: absolute;
   top: 0;
@@ -109,6 +117,7 @@ body {
 #video-password-submit:hover {
   background-color: #f47825;
 }
+
 #video-password-error {
   margin-top: 10px;
   margin-bottom: 10px;