Improve crash page messages

* Ask to read the FAQ and search for existing issues on Github
* Include links to FAQ and directly to a new github issue
* Github issue title is automatically based on exception name
* Improved HTML
* Minor languages changes

locales/en-US.json

@@ -430,5 +430,10 @@
     "user_created_playlists": "`x` created playlists",
     "user_saved_playlists": "`x` saved playlists",
     "Video unavailable": "Video unavailable",
-    "preferences_save_player_pos_label": "Save playback position: "
+    "preferences_save_player_pos_label": "Save playback position: ",
+    "crash_page_you_found_a_bug": "It looks like you found a bug in Invidious!",
+    "crash_page_before_reporting": "Before reporting a bug, make sure that you have:",
+    "crash_page_read_the_faq": "looked at the <a href=\"`x`\">Frenquently Asked Queqtions (FAQ)</a>",
+    "crash_page_search_issue": "searched for <a href=\"`x`\">existing issues on Github</a>",
+    "crash_page_report_issue": "If none of the above helped, please <a href=\"`x`\">open a new issue on GitHub</a> and include the following text in your message:"
 }

src/invidious/helpers/errors.cr

@@ -26,19 +26,44 @@ def error_template_helper(env : HTTP::Server::Context, locale : String?, status_
   if exception.is_a?(InfoException)
     return error_template_helper(env, locale, status_code, exception.message || "")
   end
+
   env.response.content_type = "text/html"
   env.response.status_code = status_code
-  issue_template = %(Title: `#{exception.message} (#{exception.class})`)
+
+  issue_title = "#{exception.message} (#{exception.class})"
+
+  issue_template = %(Title: `#{issue_title}`)
   issue_template += %(\nDate: `#{Time::Format::ISO_8601_DATE_TIME.format(Time.utc)}`)
   issue_template += %(\nRoute: `#{env.request.resource}`)
   issue_template += %(\nVersion: `#{SOFTWARE["version"]} @ #{SOFTWARE["branch"]}`)
   # issue_template += github_details("Preferences", env.get("preferences").as(Preferences).to_pretty_json)
   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/FAQ.md"
+  url_search_issues = "https://github.com/iv-org/invidious/issues"
+
+  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)
+
   error_message = <<-END_HTML
-    Looks like you've found a bug in Invidious. Please open a new issue
-    <a href="https://github.com/iv-org/invidious/issues">on GitHub</a>
-    and include the following text in your message:
-    <pre style="padding: 20px; background: rgba(0, 0, 0, 0.12345);">#{issue_template}</pre>
+    <div class="error_message">
+      <h2>#{translate(locale, "crash_page_you_found_a_bug")}</h2>
+      <br/><br/>
+
+      <p>#{translate(locale, "crash_page_before_reporting")}</p>
+      <ul>
+        <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
 
   next_steps = error_redirect_helper(env, locale)