Show messages for users if the ROOT_URL is wrong, show JavaScript errors

templates/base/footer.tmpl

@@ -22,7 +22,7 @@
 		<script src='https://hcaptcha.com/1/api.js' async></script>
 	{{end}}
 {{end}}
-	<script src="{{AssetUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
+	<script src="{{AssetUrlPrefix}}/js/index.js?v={{MD5 AppVer}}" onerror="alert('Failed to load asset files from ' + this.src + ', please make sure the asset files can be accessed and the ROOT_URL setting in app.ini is correct.')"></script>
 {{template "custom/footer" .}}
 </body>
 </html>

templates/base/head.tmpl

@@ -21,8 +21,10 @@
 {{end}}
 	<script>
 		<!-- /* eslint-disable */ -->
+		window.addEventListener('error', function(e) {window._globalHandlerErrors = window._globalHandlerErrors||[]; window._globalHandlerErrors.push(e);});
 		window.config = {
 			appVer: '{{AppVer}}',
+			appUrl: '{{AppUrl}}',
 			appSubUrl: '{{AppSubUrl}}',
 			assetUrlPrefix: '{{AssetUrlPrefix}}',
 			runModeIsProd: {{.RunModeIsProd}},

web_src/js/features/common-global.js

@@ -3,8 +3,9 @@ import 'jquery.are-you-sure';
 import {mqBinarySearch} from '../utils.js';
 import createDropzone from './dropzone.js';
 import {initCompColorPicker} from './comp/ColorPicker.js';
+import {htmlEscape} from 'escape-goat';
 
-const {csrfToken} = window.config;
+const {appUrl, csrfToken} = window.config;
 
 export function initGlobalFormDirtyLeaveConfirm() {
   // Warn users that try to leave a page after entering data into a form.
@@ -343,3 +344,42 @@ export function initGlobalButtons() {
     });
   });
 }
+
+function showErrorMessageHtml(msgHtml) {
+  const $pageContent = $('.page-content');
+  if (!$pageContent.length) {
+    return;
+  }
+  const $tip = $(`<div class="ui container negative message center aligned">${msgHtml}</div>`);
+  $($pageContent[0]).prepend($tip);
+}
+
+function processWindowErrorEvent(e) {
+  showErrorMessageHtml(`JavaScript error: ${e.message} (${e.filename} @ ${e.lineno}:${e.colno}). Open browser console to see more details.`);
+}
+
+export function initGlobalErrorHandler() {
+  for (const e of window._globalHandlerErrors || []) {
+    processWindowErrorEvent(e);
+  }
+  window._globalHandlerErrors = {'push': (e) => processWindowErrorEvent(e)};
+}
+
+/**
+ * Too many users set their ROOT_URL to wrong value, and it causes a lot of problems:
+ *   * Cross-origin API request without correct cookie
+ *   * Incorrect href in <a>
+ *   * ...
+ * So we check whether current URL starts with AppUrl(ROOT_URL).
+ * If they don't match, show a warning to users.
+ */
+export function checkAppUrl() {
+  const curUrl = window.location.href;
+  if (curUrl.startsWith(appUrl)) {
+    return;
+  }
+  showErrorMessageHtml(`
+Your ROOT_URL in app.ini is ${htmlEscape(appUrl)} but you are visiting ${htmlEscape(curUrl)}<br />
+You should set ROOT_URL correctly, otherwise the web may not work correctly.
+`);
+}

web_src/js/index.js

@@ -39,12 +39,13 @@ import {
 } from './features/repo-issue.js';
 import {initRepoEllipsisButton, initRepoCommitLastCommitLoader} from './features/repo-commit.js';
 import {
+  checkAppUrl,
   initFootLanguageMenu,
   initGlobalButtonClickOnEnter,
   initGlobalButtons,
   initGlobalCommon,
   initGlobalDropzone,
-  initGlobalEnterQuickSubmit,
+  initGlobalEnterQuickSubmit, initGlobalErrorHandler,
   initGlobalFormDirtyLeaveConfirm,
   initGlobalLinkActions,
   initHeadNavbarContentToggle,
@@ -84,6 +85,7 @@ $.fn.checkbox.settings.enableEnterKey = false;
 initVueEnv();
 
 $(document).ready(() => {
+  initGlobalErrorHandler();
   initGlobalCommon();
 
   initGlobalButtonClickOnEnter();
@@ -169,4 +171,6 @@ $(document).ready(() => {
   initUserAuthWebAuthn();
   initUserAuthWebAuthnRegister();
   initUserSettings();
+
+  checkAppUrl();
 });