Fix script error alert (#37458)

After using CSP nonce, the "onerror" doesn't work anymore. Change it to
use a global variable to detect

Also help users like #37379 to catch errors more easily.

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

services/context/context_template.go

@@ -5,13 +5,11 @@ package context
 
 import (
 	"context"
-	"fmt"
 	"html"
 	"html/template"
 	"net/http"
 	"strconv"
 	"strings"
-	"sync"
 	"time"
 
 	"code.gitea.io/gitea/modules/httplib"
@@ -91,31 +89,14 @@ func (c TemplateContext) AppFullLink(link ...string) template.URL {
 	return template.URL(s + "/" + strings.TrimPrefix(link[0], "/"))
 }
 
-var globalVars = sync.OnceValue(func() (ret struct {
-	scriptImportRemainingPart string
-},
-) {
-	// add onerror handler to alert users when the script fails to load:
-	// * for end users: there were many users reporting that "UI doesn't work", actually they made mistakes in their config
-	// * for developers: help them to remember to run "make watch-frontend" to build frontend assets
-	// the message will be directly put in the onerror JS code's string
-	onScriptErrorPrompt := `Please make sure the asset files can be accessed.`
-	if !setting.IsProd {
-		onScriptErrorPrompt += `\n\nFor development, run: make watch-frontend.`
-	}
-	onScriptErrorJS := fmt.Sprintf(`alert('Failed to load asset file from ' + this.src + '. %s')`, onScriptErrorPrompt)
-	ret.scriptImportRemainingPart = `onerror="` + html.EscapeString(onScriptErrorJS) + `"></script>`
-	return ret
-})
-
 func (c TemplateContext) ScriptImport(path string, typ ...string) template.HTML {
 	if len(typ) > 0 {
 		if typ[0] == "module" {
-			return template.HTML(`<script nonce="` + c.CspScriptNonce() + `" type="module" src="` + html.EscapeString(public.AssetURI(path)) + `" ` + globalVars().scriptImportRemainingPart)
+			return template.HTML(`<script nonce="` + c.CspScriptNonce() + `" type="module" src="` + html.EscapeString(public.AssetURI(path)) + `"></script>`)
 		}
 		panic("unsupported script type: " + typ[0])
 	}
-	return template.HTML(`<script nonce="` + c.CspScriptNonce() + `" src="` + html.EscapeString(public.AssetURI(path)) + `" ` + globalVars().scriptImportRemainingPart)
+	return template.HTML(`<script nonce="` + c.CspScriptNonce() + `" src="` + html.EscapeString(public.AssetURI(path)) + `"></script>`)
 }
 
 func (c TemplateContext) CspScriptNonce() (ret string) {

templates/base/footer.tmpl

@@ -11,5 +11,8 @@
 	{{template "base/footer_content" .}}
 	{{ctx.ScriptImport "js/index.js" "module"}}
 	{{template "custom/footer" .}}
+	<script nonce="{{ctx.CspScriptNonce}}" type="module">
+	if (!window.config?.frontendInited) alert("Frontend is not initialized, check console errors or asset files.")
+	</script>
 </body>
 </html>

web_src/js/globals.d.ts

@@ -53,6 +53,7 @@ interface Window {
     enableTimeTracking: boolean,
     mermaidMaxSourceCharacters: number,
     i18n: Record<string, string>,
+    frontendInited: boolean,
   },
   $: JQueryStatic,
   jQuery: JQueryStatic,

web_src/js/index.ts

@@ -171,3 +171,5 @@ const initDur = performance.now() - initStartTime;
 if (initDur > 500) {
   console.error(`slow init functions took ${initDur.toFixed(3)}ms`);
 }
+
+window.config.frontendInited = true;

web_src/js/vitest.setup.ts

@@ -12,6 +12,7 @@ window.config = {
   enableTimeTracking: true,
   mermaidMaxSourceCharacters: 5000,
   i18n: {},
+  frontendInited: false,
 };
 
 window.testModules = {};