Merge pull request #14189 from ItsSelis/tgui-strict-mode

Adds tgui strict mode

code/modules/tgui/tgui.dm

@@ -95,6 +95,7 @@
 	window.acquire_lock(src)
 	if(!window.is_ready())
 		window.initialize(
+			strict_mode = TRUE,
 			fancy = user.client.prefs.tgui_fancy,
 			assets = list(
 				get_asset_datum(/datum/asset/simple/tgui),
@@ -347,4 +348,4 @@
 			#ifdef TGUI_DEBUGGING
 			log_tgui(user, "Fallback Triggered: [href_list["payload"]], Window: [window.id], Source: [src_object]")
 			#endif
-			src_object.tgui_fallback(payload)
+			src_object.tgui_fallback(payload)

code/modules/tgui/tgui_window.dm

@@ -18,6 +18,7 @@
 	var/message_queue
 	var/sent_assets = list()
 	// Vars passed to initialize proc (and saved for later)
+	var/initial_strict_mode
 	var/initial_fancy
 	var/initial_assets
 	var/initial_inline_html
@@ -48,11 +49,15 @@
  * state. You can begin sending messages right after initializing. Messages
  * will be put into the queue until the window finishes loading.
  *
- * optional assets list List of assets to inline into the html.
- * optional inline_html string Custom HTML to inject.
- * optional fancy bool If TRUE, will hide the window titlebar.
+ * optional strict_mode bool - Enables strict error handling and BSOD.
+ * optional fancy bool - If TRUE and if this is NOT a panel, will hide the window titlebar.
+ * optional assets list - List of assets to load during initialization.
+ * optional inline_html string - Custom HTML to inject.
+ * optional inline_js string - Custom JS to inject.
+ * optional inline_css string - Custom CSS to inject.
  */
 /datum/tgui_window/proc/initialize(
+		strict_mode = FALSE,
 		fancy = FALSE,
 		assets = list(),
 		inline_html = "",
@@ -80,6 +85,7 @@
 	// Generate page html
 	var/html = SStgui.basehtml
 	html = replacetextEx(html, "\[tgui:windowId]", id)
+	html = replacetextEx(html, "\[tgui:strictMode]", strict_mode)
 	// Inject assets
 	var/inline_assets_str = ""
 	for(var/datum/asset/asset in assets)
@@ -100,7 +106,7 @@
 		html = replacetextEx(html, "<!-- tgui:inline-html -->", inline_html)
 	// Inject inline JS
 	if (inline_js)
-		inline_js = "<script>\n[inline_js]\n</script>"
+		inline_js = "<script>\n'use strict';\n[inline_js]\n</script>"
 		html = replacetextEx(html, "<!-- tgui:inline-js -->", inline_js)
 	// Inject inline CSS
 	if (inline_css)
@@ -114,6 +120,20 @@
 	if(!is_browser)
 		winset(client, id, "on-close=\"uiclose [id]\"")
 
+/**
+ * public
+ *
+ * Reinitializes the panel with previous data used for initialization.
+ */
+/datum/tgui_window/proc/reinitialize()
+	initialize(
+		strict_mode = initial_strict_mode,
+		fancy = initial_fancy,
+		assets = initial_assets,
+		inline_html = initial_inline_html,
+		inline_js = initial_inline_js,
+		inline_css = initial_inline_css)
+
 /**
  * public
  *
@@ -353,12 +373,7 @@
 			client << link(href_list["url"])
 		if("cacheReloaded")
 			// Reinitialize
-			initialize(
-				fancy = initial_fancy,
-				assets = initial_assets,
-				inline_html = initial_inline_html,
-				inline_js = initial_inline_js,
-				inline_css = initial_inline_css)
+			reinitialize()
 			// Resend the assets
 			for(var/asset in sent_assets)
-				send_asset(asset)
+				send_asset(asset)

tgui/global.d.ts

@@ -64,6 +64,18 @@ type ByondType = {
    */
   IS_LTE_IE11: boolean;
 
+  /**
+   * If `true`, unhandled errors and common mistakes result in a blue screen
+   * of death, which stops this window from handling incoming messages and
+   * closes the active instance of tgui datum if there was one.
+   *
+   * It can be defined in window.initialize() in DM, or changed in runtime
+   * here via this property to `true` or `false`.
+   *
+   * It is recommended that you keep this ON to detect hard to find bugs.
+   */
+  strictMode: boolean;
+
   /**
    * Makes a BYOND call.
    *

tgui/public/tgui.html

@@ -6,6 +6,7 @@
 
 <!-- Inlined metadata -->
 <meta id="tgui:windowId" content="[tgui:windowId]">
+<meta id="tgui:strictMode" content="[tgui:strictMode]">
 
 <!-- Early setup -->
 <script type="text/javascript">
@@ -65,6 +66,9 @@
   Byond.IS_LTE_IE10 = Byond.TRIDENT !== null && Byond.TRIDENT <= 6;
   Byond.IS_LTE_IE11 = Byond.TRIDENT !== null && Byond.TRIDENT <= 7;
 
+  // Strict mode flag
+  Byond.strictMode = Boolean(Number(parseMetaTag('tgui:strictMode')));
+
   // Callbacks for asynchronous calls
   Byond.__callbacks__ = [];
 
@@ -221,13 +225,13 @@
   };
 
   Byond.subscribeTo = function (type, listener) {
-    listener = function (_type, payload) {
+    var _listener = function (_type, payload) {
       if (_type === type) {
         listener(payload);
       }
     };
-    window.update.listeners.push(listener);
-    window.update.flushQueue(listener);
+    window.update.flushQueue(_listener);
+    window.update.listeners.push(_listener);
   };
 
   // Asset loaders
@@ -365,6 +369,7 @@
 // ------------------------------------------------------
 
 window.onerror = function (msg, url, line, col, error) {
+  window.onerror.errorCount = (window.onerror.errorCount || 0) + 1;
   // Send fallback command
   Byond.topic({
     tgui: 1,
@@ -383,39 +388,51 @@ window.onerror = function (msg, url, line, col, error) {
   // Augment the stack
   stack = window.__augmentStack__(stack, error);
   // Print error to the page
-  var errorRoot = document.getElementById('FatalError');
-  var errorStack = document.getElementById('FatalError__stack');
-  if (errorRoot) {
-    errorRoot.className = 'FatalError FatalError--visible';
-    if (window.onerror.__stack__) {
-      window.onerror.__stack__ += '\n\n' + stack;
+  if (Byond.strictMode) {
+    var errorRoot = document.getElementById('FatalError');
+    var errorStack = document.getElementById('FatalError__stack');
+    if (errorRoot) {
+      errorRoot.className = 'FatalError FatalError--visible';
+      if (window.onerror.__stack__) {
+        window.onerror.__stack__ += '\n\n' + stack;
+      }
+      else {
+        window.onerror.__stack__ = stack;
+      }
+      var textProp = Byond.IS_LTE_IE8 ? 'innerText' : 'textContent';
+      errorStack[textProp] = window.onerror.__stack__;
     }
-    else {
-      window.onerror.__stack__ = stack;
-    }
-    var textProp = Byond.IS_LTE_IE8 ? 'innerText' : 'textContent';
-    errorStack[textProp] = window.onerror.__stack__;
+    // Set window geometry
+    var setFatalErrorGeometry = function () {
+      Byond.winset(Byond.windowId, {
+        titlebar: true,
+        'is-visible': true,
+        'can-resize': true,
+      });
+    };
+    setFatalErrorGeometry();
+    setInterval(setFatalErrorGeometry, 1000);
   }
-  // Set window geometry
-  var setFatalErrorGeometry = function () {
-    Byond.winset(Byond.windowId, {
-      titlebar: true,
-      size: '600x600',
-      'is-visible': true,
-      'can-resize': true,
-    });
-  };
-  setFatalErrorGeometry();
-  setInterval(setFatalErrorGeometry, 1000);
   // Send logs to the game server
-  Byond.sendMessage({
-    type: 'log',
-    fatal: 1,
-    message: stack,
-  });
+  if (Byond.strictMode) {
+    Byond.sendMessage({
+      type: 'log',
+      fatal: 1,
+      message: stack,
+    });
+  }
+  else if (window.onerror.errorCount <= 1) {
+    stack += '\nWindow is in non-strict mode, future errors are suppressed.';
+    Byond.sendMessage({
+      type: 'log',
+      message: stack,
+    });
+  }
   // Short-circuit further updates
-  window.__updateQueue__ = [];
-  window.update = function () {};
+  if (Byond.strictMode) {
+    window.update = function () {};
+    window.update.queue = [];
+  }
   // Prevent default action
   return true;
 };