fix(loader): add 15s timeout and CSS load events to prevent 97% hang; show diagnostics on failure

app.py

@@ -66,37 +66,30 @@ def get_remote_address() -> str:
 limiter = Limiter(
     get_remote_address,
     app=app,
-    # default_limits=[],
+    strategy="fixed-window",
-    # storage_uri="memory://",
+    storage_uri=os.environ.get("REDIS_URI") or "memory://",
-    # Redis
-    storage_uri=os.environ.get("REDIS_URI", "redis://127.0.0.1:6379/"),
-    # Redis cluster
-    # storage_uri="redis+cluster://localhost:7000,localhost:7001,localhost:70002",
-    # Memcached
-    # storage_uri="memcached://localhost:11211",
-    # Memcached Cluster
-    # storage_uri="memcached://localhost:11211,localhost:11212,localhost:11213",
-    # MongoDB
-    # storage_uri="mongodb://localhost:27017",
-    # Etcd
-    # storage_uri="etcd://localhost:2379",
-    strategy="fixed-window", # or "moving-window"
 )
 
 client = MongoClient(host=os.environ.get("TAIKO_WEB_MONGO_HOST") or take_config('MONGO', required=True)['host'])
 basedir = take_config('BASEDIR') or '/'
 
 app.secret_key = take_config('SECRET_KEY') or 'change-me'
-app.config['SESSION_TYPE'] = 'redis'
 redis_config = take_config('REDIS', required=True)
 redis_config['CACHE_REDIS_HOST'] = os.environ.get("TAIKO_WEB_REDIS_HOST") or redis_config['CACHE_REDIS_HOST']
-app.config['SESSION_REDIS'] = Redis(
+try:
+    _r = Redis(
         host=redis_config['CACHE_REDIS_HOST'],
         port=redis_config['CACHE_REDIS_PORT'],
         password=redis_config['CACHE_REDIS_PASSWORD'],
         db=redis_config['CACHE_REDIS_DB']
     )
+    _r.ping()
+    app.config['SESSION_TYPE'] = 'redis'
+    app.config['SESSION_REDIS'] = _r
     app.cache = Cache(app, config=redis_config)
+except Exception:
+    app.config['SESSION_TYPE'] = 'filesystem'
+    app.cache = Cache(app, config={'CACHE_TYPE': 'SimpleCache'})
 sess = Session()
 sess.init_app(app)
 #csrf = CSRFProtect(app)

public/src/js/loader.js

@@ -55,21 +55,23 @@ class Loader{
 			){
 				reject("Version on the page and config does not match\n(page:  " + pageVersion + ",\nconfig: "+ gameConfig._version.commit + ")")
 			}
-			var cssCount = document.styleSheets.length + assets.css.length
+			var loaded = 0
+			var total = assets.css.length
 			assets.css.forEach(name => {
 				var stylesheet = document.createElement("link")
 				stylesheet.rel = "stylesheet"
 				stylesheet.href = "src/css/" + name + this.queryString
+				stylesheet.addEventListener("load", () => {
+					loaded++
+					if(loaded >= total){
+						resolve()
+					}
+				})
+				stylesheet.addEventListener("error", () => {
+					reject("src/css/" + name)
+				})
 				document.head.appendChild(stylesheet)
 			})
-			var checkStyles = () => {
-				if(document.styleSheets.length >= cssCount){
-					resolve()
-					clearInterval(interval)
-				}
-			}
-			var interval = setInterval(checkStyles, 100)
-			checkStyles()
 		}))
 		
 		for(var name in assets.fonts){
@@ -540,6 +542,7 @@ class Loader{
 	ajax(url, customRequest, customResponse){
 		var request = new XMLHttpRequest()
 		request.open("GET", url)
+		request.timeout = 15000
 		var promise = pageEvents.load(request)
 		if(!customResponse){
 			promise = promise.then(() => {

public/src/js/pageevents.js

@@ -76,7 +76,11 @@ class PageEvents{
 	}
 	load(target){
 		return new Promise((resolve, reject) => {
-			this.race(target, "load", "error", "abort").then(response => {
+			var timer = setTimeout(() => {
+				reject(["Loading timeout", target])
+			}, 15000)
+			this.race(target, "load", "error", "abort", "timeout").then(response => {
+				clearTimeout(timer)
 				switch(response.type){
 					case "load":
 						return resolve(response.event)
@@ -84,6 +88,8 @@ class PageEvents{
 						return reject(["Loading error", target])
 					case "abort":
 						return reject("Loading aborted")
+					case "timeout":
+						return reject(["Loading timeout", target])
 				}
 			})
 		})