Add proper exception handling for comments, rather than sliently failing

assets/js/watch.js

@@ -219,9 +219,7 @@ function get_youtube_comments() {
         '&hl=' + video_data.preferences.locale +
         '&thin_mode=' + video_data.preferences.thin_mode;
 
-    var onNon200 = function (xhr) { comments.innerHTML = fallback; };
-    if (video_data.params.comments[1] === 'youtube')
-        onNon200 = function (xhr) {};
+    var onNon200 = function (xhr) { comments.innerHTML = xhr.response.errorHtml; };
 
     helpers.xhr('GET', url, {retries: 5, entity_name: 'comments'}, {
         on200: function (response) {

src/invidious/helpers/errors.cr

@@ -90,6 +90,59 @@ def error_template_helper(env : HTTP::Server::Context, status_code : Int32, mess
   return templated "error"
 end
 
+# -------------------
+#  Mini error templates (for components that had an error)
+# -------------------
+
+def mini_error_template(env : HTTP::Server::Context, exception : Exception)
+  String.build do |str|
+    # Copied from error_template_helper
+    locale = env.get("preferences").as(Preferences).locale
+    issue_title = "#{exception.message} (#{exception.class})"
+
+    issue_template = <<-TEXT
+    Title: `#{HTML.escape(issue_title)}`
+    Date: `#{Time::Format::ISO_8601_DATE_TIME.format(Time.utc)}`
+    Route: `#{HTML.escape(env.request.resource)}`
+    Version: `#{SOFTWARE["version"]} @ #{SOFTWARE["branch"]}`
+
+    TEXT
+
+    issue_template += github_details("Backtrace", exception.inspect_with_backtrace)
+
+    # URLs for the error message below
+    url_faq = "https://github.com/iv-org/documentation/blob/master/docs/faq.md"
+    url_search_issues = "https://github.com/iv-org/invidious/issues"
+
+    url_switch = "https://redirect.invidious.io" + env.request.resource
+
+    url_new_issue = "https://github.com/iv-org/invidious/issues/new"
+    url_new_issue += "?labels=bug&template=bug_report.md&title="
+    url_new_issue += URI.encode_www_form("[Bug] " + issue_title)
+
+    str << <<-END_HTML
+    <div class="error_message">
+      <h2>#{translate(locale, "crash_page_you_found_a_bug")}</h2>
+      <br/><br/>
+
+      <p><b>#{translate(locale, "crash_page_before_reporting")}</b></p>
+      <ul>
+        <li>#{translate(locale, "crash_page_refresh", env.request.resource)}</li>
+        <li>#{translate(locale, "crash_page_switch_instance", url_switch)}</li>
+        <li>#{translate(locale, "crash_page_read_the_faq", url_faq)}</li>
+        <li>#{translate(locale, "crash_page_search_issue", url_search_issues)}</li>
+      </ul>
+
+      <br/>
+      <p>#{translate(locale, "crash_page_report_issue", url_new_issue)}</p>
+
+      <!-- TODO: Add a "copy to clipboard" button -->
+      <pre style="padding: 20px; background: rgba(0, 0, 0, 0.12345);">#{issue_template}</pre>
+    </div>
+    END_HTML
+  end
+end
+
 # -------------------
 #  Atom feeds
 # -------------------

src/invidious/routes/api/v1/videos.cr

@@ -337,7 +337,7 @@ module Invidious::Routes::API::V1::Videos
       rescue ex : NotFoundException
         return error_json(404, ex)
       rescue ex
-        return error_json(500, ex)
+        return error_json(500, ex, {"errorHtml" => mini_error_template(env, ex)})
       end
 
       return comments

src/invidious/routes/watch.cr

@@ -103,6 +103,8 @@ module Invidious::Routes::Watch
 
               comment_html = Comments.fill_links(comment_html, "https", "www.reddit.com")
               comment_html = Comments.replace_links(comment_html)
+            else
+              comment_html = mini_error_template(env, ex)
             end
           end
         elsif source == "reddit"
@@ -115,6 +117,8 @@ module Invidious::Routes::Watch
           rescue ex
             if preferences.comments[1] == "youtube"
               comment_html = JSON.parse(Comments.fetch_youtube(id, nil, "html", locale, preferences.thin_mode, region))["contentHtml"]
+            else
+              comment_html = mini_error_template(env, ex)
             end
           end
         end