Handle exceptions when loading resources and fetching assets (#5627)

Handle exceptions when loading resources and fetching assets

Fixes https://youtrack.jetbrains.com/issue/CMP-10325

## Testing
Add related test cases

## Release Notes
### Fixes - Resources
- Web: fixed a app crash when a resource fetch is failed

Author: terrakok

components/resources/library/build.gradle.kts

@@ -1,5 +1,4 @@
 import kotlinx.validation.ExperimentalBCVApi
-import org.jetbrains.compose.ExperimentalComposeLibrary
 import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 
@@ -28,9 +27,9 @@ kotlin {
     iosSimulatorArm64()
     js {
         browser {
-            testTask(Action {
-                enabled = false
-            })
+            testTask {
+                useKarma { useChromeHeadless() }
+            }
         }
     }
 
@@ -41,12 +40,9 @@ kotlin {
             compilerOptions.freeCompilerArgs.add("-Xwasm-enable-array-range-checks")
         }
         browser {
-            testTask(Action {
-                useKarma {
-                    useChromeHeadless()
-                    useConfigDirectory(project.projectDir.resolve("karma.config.d").resolve("wasm"))
-                }
-            })
+            testTask {
+                useKarma { useChromeHeadless() }
+            }
         }
         binaries.executable()
     }

components/resources/library/karma.config.d/config.js

@@ -0,0 +1,64 @@
+// see https://kotlinlang.org/docs/js-project-setup.html#webpack-configuration-file
+// This file provides karma.config.d configuration to run tests with k/wasm and k/js.
+//
+// The whole body is wrapped in an IIFE so that local declarations (e.g. `path`) do not
+// leak into the shared karma.conf.js scope. For k/js the Compose plugin concatenates this
+// file with `compose-skiko-runtime.js`, which also declares `const path`, and top-level
+// re-declarations would throw "Identifier 'path' has already been declared".
+(function (config) {
+    const path = require("path");
+
+    config.browserConsoleLogOptions.level = "debug";
+
+    const basePath = config.basePath;
+    const projectPath = path.resolve(basePath, "..", "..", "..", "..");
+    const generatedAssetsPath = path.resolve(projectPath, "build", "karma-webpack-out")
+
+    const debug = message => console.log(`[karma-config] ${message}`);
+
+    debug(`karma basePath: ${basePath}`);
+    debug(`karma generatedAssetsPath: ${generatedAssetsPath}`);
+
+    config.proxies["/"] = path.resolve(basePath, "kotlin");
+
+    config.files = [
+        {pattern: path.resolve(generatedAssetsPath, "**/*"), included: false, served: true, watched: false},
+        {pattern: path.resolve(basePath, "kotlin", "**/*.png"), included: false, served: true, watched: false},
+        {pattern: path.resolve(basePath, "kotlin", "**/*.cvr"), included: false, served: true, watched: false},
+        {pattern: path.resolve(basePath, "kotlin", "**/*.otf"), included: false, served: true, watched: false},
+        {pattern: path.resolve(basePath, "kotlin", "**/*.gif"), included: false, served: true, watched: false},
+        {pattern: path.resolve(basePath, "kotlin", "**/*.ttf"), included: false, served: true, watched: false},
+        {pattern: path.resolve(basePath, "kotlin", "**/*.txt"), included: false, served: true, watched: false},
+        {pattern: path.resolve(basePath, "kotlin", "**/*.json"), included: false, served: true, watched: false},
+        {pattern: path.resolve(basePath, "kotlin", "**/*.xml"), included: false, served: true, watched: false},
+        path.resolve(basePath, "kotlin", "test_setup.js"),
+    ].concat(config.files);
+
+    function KarmaWebpackOutputFramework(config) {
+        // This controller is instantiated and set during the preprocessor phase.
+        const controller = config.__karmaWebpackController;
+
+        // only if webpack has instantiated its controller
+        if (!controller) {
+            console.warn(
+                "Webpack has not instantiated controller yet.\n" +
+                "Check if you have enabled webpack preprocessor and framework before this framework"
+            )
+            return
+        }
+
+        config.files.push({
+            pattern: `${controller.outputPath}/**/*`,
+            included: false,
+            served: true,
+            watched: false
+        })
+    }
+
+    const KarmaWebpackOutputPlugin = {
+        'framework:webpack-output': ['factory', KarmaWebpackOutputFramework],
+    };
+
+    config.plugins.push(KarmaWebpackOutputPlugin);
+    config.frameworks.push("webpack-output");
+})(config);

components/resources/library/karma.config.d/wasm/config.js

@@ -53,7 +53,11 @@ internal object DefaultJsResourceReader : ResourceReader {
     private suspend fun readAsBlob(path: String): Blob {
         val resPath = WebResourcesConfiguration.getResourcePath(path)
         val response =  ResourceWebCache.load(resPath) {
-            cancellableFetch(resPath)
+            try {
+                cancellableFetch(resPath)
+            } catch (_: Throwable) {
+                throw MissingResourceException(resPath)
+            }
         }
         if (!response.ok) {
             throw MissingResourceException(resPath)

components/resources/library/src/jsMain/kotlin/org/jetbrains/compose/resources/ResourceReader.js.kt

@@ -19,7 +19,11 @@ class VariationFontCacheTest {
         val setting = FontVariation.Setting("wght", 700f)
         val settings = FontVariation.Settings(setting)
         val cacheKey = settings.getCacheKey()
-        assertEquals("SettingFloat(wght,700.0)", cacheKey, "Cache key for a single setting is incorrect")
+        assertEquals(
+            "SettingFloat(wght,700)",
+            cacheKey.replace("700.0", "700"),
+            "Cache key for a single setting is incorrect"
+        )
     }
 
     @Test
@@ -29,8 +33,8 @@ class VariationFontCacheTest {
         val settings = FontVariation.Settings(setting1, setting2)
         val cacheKey = settings.getCacheKey()
         assertEquals(
-            "SettingFloat(ital,1.0),SettingFloat(wght,400.0)",
-            cacheKey,
+            "SettingFloat(ital,1),SettingFloat(wght,400)",
+            cacheKey.replace("400.0", "400").replace("1.0", "1"),
             "Cache key should sort settings by class name and axis name"
         )
     }

components/resources/library/src/skikoTest/kotlin/org/jetbrains/compose/resources/VariationFontCacheTest.kt

@@ -3,7 +3,6 @@
 package org.jetbrains.compose.resources
 
 import kotlinx.browser.window
-import kotlinx.coroutines.CancellationException
 import kotlinx.coroutines.await
 import kotlinx.coroutines.suspendCancellableCoroutine
 import org.khronos.webgl.ArrayBuffer
@@ -12,7 +11,6 @@ import org.w3c.files.Blob
 import kotlin.coroutines.resume
 import kotlin.coroutines.resumeWithException
 import kotlin.js.Promise
-import kotlin.js.unsafeCast
 
 @JsFun("(blob) => blob.arrayBuffer()")
 private external fun jsExportBlobAsArrayBuffer(blob: Blob): Promise<ArrayBuffer>
@@ -59,7 +57,11 @@ internal object DefaultWasmResourceReader : ResourceReader {
     private suspend fun readAsBlob(path: String): Blob {
         val resPath = WebResourcesConfiguration.getResourcePath(path)
         val response = ResourceWebCache.load(resPath) {
-            cancellableFetch(resPath)
+            try {
+                cancellableFetch(resPath)
+            } catch (_: Throwable) {
+                throw MissingResourceException(resPath)
+            }
         }
         if (!response.ok) {
             throw MissingResourceException(resPath)

components/resources/library/src/wasmJsMain/kotlin/org/jetbrains/compose/resources/ResourceReader.wasmJs.kt

@@ -1,10 +1,6 @@
 package org.jetbrains.compose.resources
 
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.State
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.*
 import kotlinx.coroutines.CoroutineStart
 import kotlinx.coroutines.launch
 
@@ -19,7 +15,11 @@ internal actual fun <T> rememberResourceState(
     return remember(key1, environment) {
         val mutableState = mutableStateOf(getDefault())
         scope.launch(start = CoroutineStart.UNDISPATCHED) {
-            mutableState.value = block(environment)
+            try {
+                mutableState.value = block(environment)
+            } catch (_: Exception) {
+                //resource loading failed
+            }
         }
         mutableState
     }
@@ -37,7 +37,11 @@ internal actual fun <T> rememberResourceState(
     return remember(key1, key2, environment) {
         val mutableState = mutableStateOf(getDefault())
         scope.launch(start = CoroutineStart.UNDISPATCHED) {
-            mutableState.value = block(environment)
+            try {
+                mutableState.value = block(environment)
+            } catch (_: Exception) {
+                //resource loading failed
+            }
         }
         mutableState
     }
@@ -56,7 +60,11 @@ internal actual fun <T> rememberResourceState(
     return remember(key1, key2, key3, environment) {
         val mutableState = mutableStateOf(getDefault())
         scope.launch(start = CoroutineStart.UNDISPATCHED) {
-            mutableState.value = block(environment)
+            try {
+                mutableState.value = block(environment)
+            } catch (_: Exception) {
+                //resource loading failed
+            }
         }
         mutableState
     }
@@ -76,7 +84,11 @@ internal actual fun <T> rememberResourceState(
     return remember(key1, key2, key3, key4, environment) {
         val mutableState = mutableStateOf(getDefault())
         scope.launch(start = CoroutineStart.UNDISPATCHED) {
-            mutableState.value = block(environment)
+            try {
+                mutableState.value = block(environment)
+            } catch (_: Exception) {
+                //resource loading failed
+            }
         }
         mutableState
     }