FEATURE: detect theme errors and catch them (#7589)

* FEATURE: detect theme errors and catch them

* Bump COMPILER_VERSION

* Feedback

* Override eslint no console for one line

* Can't use our ajax method

* remove emoji from translation file

app/assets/javascripts/discourse/lib/utilities.js.es6

@@ -660,5 +660,39 @@ export function postRNWebviewMessage(prop, value) {
   }
 }
 
+function reportToLogster(name, error) {
+  const data = {
+    message: `${name} theme/component is throwing errors`,
+    stacktrace: error.stack
+  };
+
+  Ember.$.ajax(`${Discourse.BaseUri}/logs/report_js_error`, {
+    data,
+    type: "POST",
+    cache: false
+  });
+}
+// this function is used in lib/theme_javascript_compiler.rb
+export function rescueThemeError(name, error, api) {
+  /* eslint-disable-next-line no-console */
+  console.error(`"${name}" error:`, error);
+  reportToLogster(name, error);
+
+  const currentUser = api.getCurrentUser();
+  if (!currentUser || !currentUser.admin) {
+    return;
+  }
+
+  const path = `${Discourse.BaseUri}/admin/customize/themes`;
+  const message = I18n.t("themes.broken_theme_alert", {
+    theme: name,
+    path: `<a href="${path}">${path}</a>`
+  });
+  const alertDiv = document.createElement("div");
+  alertDiv.classList.add("broken-theme-alert");
+  alertDiv.innerHTML = `⚠️ ${message}`;
+  document.body.prepend(alertDiv);
+}
+
 // This prevents a mini racer crash
 export default {};

app/assets/stylesheets/common/base/discourse.scss

@@ -732,3 +732,13 @@ table {
     color: $danger;
   }
 }
+
+.broken-theme-alert {
+  font-size: $base-font-size;
+  font-weight: bold;
+  padding: 5px 0;
+  background: $danger-medium;
+  text-align: center;
+  z-index: z("max");
+  color: $secondary;
+}

app/models/theme.rb

@@ -53,11 +53,19 @@ class Theme < ActiveRecord::Base
 
     Theme.expire_site_cache! if saved_change_to_user_selectable? || saved_change_to_name?
     notify_with_scheme = saved_change_to_color_scheme_id?
+    name_changed = saved_change_to_name?
 
     reload
     settings_field&.ensure_baked! # Other fields require setting to be **baked**
     theme_fields.each(&:ensure_baked!)
 
+    if name_changed
+      theme_fields.select { |f| f.basic_html_field? }.each do |f|
+        f.value_baked = nil
+        f.ensure_baked!
+      end
+    end
+
     remove_from_cache!
     clear_cached_settings!
     ColorScheme.hex_cache.clear

app/models/theme_field.rb

@@ -63,7 +63,7 @@ class ThemeField < ActiveRecord::Base
   validates :name, format: { with: /\A[a-z_][a-z0-9_-]*\z/i },
                    if: Proc.new { |field| ThemeField.theme_var_type_ids.include?(field.type_id) }
 
-  COMPILER_VERSION = 10
+  COMPILER_VERSION = 11
 
   belongs_to :theme
 
@@ -71,7 +71,7 @@ class ThemeField < ActiveRecord::Base
     errors = []
     javascript_cache || build_javascript_cache
 
-    js_compiler = ThemeJavascriptCompiler.new(theme_id)
+    js_compiler = ThemeJavascriptCompiler.new(theme_id, self.theme.name)
 
     doc = Nokogiri::HTML.fragment(html)
 
@@ -153,7 +153,7 @@ class ThemeField < ActiveRecord::Base
   def process_translation
     errors = []
     javascript_cache || build_javascript_cache
-    js_compiler = ThemeJavascriptCompiler.new(theme_id)
+    js_compiler = ThemeJavascriptCompiler.new(theme_id, self.theme.name)
     begin
       data = translation_data