feat(app) added js app

YYChen01988 · YYChen01988 · commit 4decc94d01a9 · 2025-07-18T09:19:59.000+01:00
diff --git a/example/BugsnagExample/composeApp/build.gradle.kts b/example/BugsnagExample/composeApp/build.gradle.kts
@@ -1,5 +1,5 @@
-import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
 
 plugins {
     alias(libs.plugins.kotlinMultiplatform)
@@ -11,7 +11,6 @@ plugins {
 
 kotlin {
     androidTarget {
-        @OptIn(ExperimentalKotlinGradlePluginApi::class)
         compilerOptions {
             jvmTarget.set(JvmTarget.JVM_11)
         }
@@ -28,6 +27,20 @@ kotlin {
         }
     }
 
+    js(IR) {
+        moduleName = "composeApp"
+        useEsModules()
+        browser {
+            commonWebpackConfig {
+                mode = KotlinWebpackConfig.Mode.PRODUCTION
+            }
+        }
+        binaries.executable()
+    }
+
+    applyDefaultHierarchyTemplate()
+
+
     sourceSets {
 
         androidMain.dependencies {
@@ -45,8 +58,9 @@ kotlin {
             implementation(libs.androidx.lifecycle.runtimeCompose)
             implementation(libs.bugsnag.kmp)
         }
-        commonTest.dependencies {
-            implementation(libs.kotlin.test)
+        jsMain.dependencies {
+            implementation(libs.compose.html)
+            implementation(npm("@bugsnag/browser", "=${libs.versions.bugsnag.js.get()}"))
         }
     }
 }
@@ -75,15 +89,15 @@ android {
         }
     }
     compileOptions {
-        sourceCompatibility = JavaVersion.VERSION_1_8
-        targetCompatibility = JavaVersion.VERSION_1_8
+        sourceCompatibility = JavaVersion.VERSION_11
+        targetCompatibility = JavaVersion.VERSION_11
     }
 }
 
 dependencies {
-    implementation(libs.androidx.appcompat)
     debugImplementation(compose.uiTooling)
 
+    implementation(libs.androidx.appcompat)
     implementation(libs.bugsnag.android)
     implementation(libs.bugsnag.kmp)
 }
diff --git a/example/BugsnagExample/composeApp/src/androidMain/kotlin/com/example/bugsnag/kmp/MainActivity.kt b/example/BugsnagExample/composeApp/src/androidMain/kotlin/com/example/bugsnag/kmp/MainActivity.kt
@@ -12,11 +12,8 @@ import com.bugsnag.kmp.Configuration
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        startBugsnag(
-            Configuration(applicationContext).apply {
-                apiKey = BUGSNAG_API_KEY
-            },
-        )
+        val config = Configuration(applicationContext, BUGSNAG_API_KEY)
+        startBugsnag(config)
 
         setContent {
             Surface(
diff --git a/example/BugsnagExample/composeApp/src/commonMain/composeResources/drawable/compose-multiplatform.xml b/example/BugsnagExample/composeApp/src/commonMain/composeResources/drawable/compose-multiplatform.xml
diff --git a/example/BugsnagExample/composeApp/src/commonMain/kotlin/com/example/bugsnag/kmp/App.kt b/example/BugsnagExample/composeApp/src/commonMain/kotlin/com/example/bugsnag/kmp/App.kt
@@ -9,12 +9,19 @@ import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.bugsnag.kmp.Bugsnag
+import kotlinx.coroutines.delay
 
 @Composable
 fun App() {
+    val message = remember { mutableStateOf("") }
+
     MaterialTheme {
         Column(
             modifier = Modifier
@@ -27,6 +34,7 @@ fun App() {
             Button(
                 onClick = {
                     throw RuntimeException("Unhandled Kotlin Exception")
+                    message.value = "Unhandled Kotlin Exception triggered"
                 },
                 modifier = Modifier.fillMaxWidth(),
             ) {
@@ -36,6 +44,7 @@ fun App() {
             Button(
                 onClick = {
                     Bugsnag.notify(RuntimeException("Handled Kotlin Exception"))
+                    message.value = "Handled Kotlin Exception reported"
                 },
                 modifier = Modifier.fillMaxWidth(),
             ) {
@@ -49,11 +58,25 @@ fun App() {
                         mapOf("reason" to "incorrect password"),
                     )
                     Bugsnag.notify(RuntimeException("Error Report with Breadcrumbs"))
+                    message.value = "Custom Breadcrumbs attached"
                 },
                 modifier = Modifier.fillMaxWidth(),
             ) {
                 Text("Attach Custom Breadcrumbs")
             }
+
+            if (message.value.isNotEmpty()) {
+                Text(
+                    text = message.value,
+                    modifier = Modifier.padding(top = 16.dp),
+                    style = MaterialTheme.typography.bodyLarge,
+                    color = Color.Red
+                )
+                LaunchedEffect(message.value) {
+                    delay(1500)
+                    message.value = ""
+                }
+            }
         }
     }
 }
diff --git a/example/BugsnagExample/composeApp/src/jsMain/kotlin/com/example/bugsnag/kmp/JsApp.kt b/example/BugsnagExample/composeApp/src/jsMain/kotlin/com/example/bugsnag/kmp/JsApp.kt
@@ -1,22 +1,24 @@
 package com.example.bugsnag.kmp
 
+import androidx.compose.runtime.Composable
 import com.bugsnag.kmp.Bugsnag
 import com.bugsnag.kmp.Configuration
+import kotlinx.browser.window
 import org.jetbrains.compose.web.css.DisplayStyle
 import org.jetbrains.compose.web.css.FlexDirection
 import org.jetbrains.compose.web.css.display
 import org.jetbrains.compose.web.css.flexDirection
 import org.jetbrains.compose.web.css.percent
 import org.jetbrains.compose.web.css.width
+import org.jetbrains.compose.web.dom.Button
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.H1
 import org.jetbrains.compose.web.dom.Text
 import org.jetbrains.compose.web.renderComposable
 
-@Suppress("FunctionName")
 @JsExport
 @OptIn(ExperimentalJsExport::class)
-fun StartComposeAppWeb(rootId: String) {
+fun StartJsApp(rootId: String) {
     startBugsnag(Configuration(BUGSNAG_API_KEY))
     renderComposable(rootId) {
         Div {
@@ -31,17 +33,47 @@ fun StartComposeAppWeb(rootId: String) {
                 },
             ) {
                 TextButton(
-                    text = "Trigger A Fatal Crash",
-                    onClick = { Bugsnag.notify(Exception("Fatal Crash")) },
+                    text = "Throw An Unhandled Exception",
+                    onClick = {
+                        throw Exception("Unhandled Kotlin Exception")
+                        window.alert("Unhandled Exception sent to Bugsnag")
+                    },
                 )
+
+                TextButton(
+                    text = "A Handled Exception",
+                    onClick = {
+                        Bugsnag.notify(Exception("Handled Kotlin Exception"))
+                        window.alert("Handled Exception sent to Bugsnag")
+                    },
+                )
+
                 TextButton(
                     text = "Attach Custom Breadcrumbs",
                     onClick = {
-                        Bugsnag.leaveBreadcrumb("WebAuthFailure")
+                        Bugsnag.leaveBreadcrumb(
+                            "WebAuthFailure",
+                            mapOf("reason" to "incorrect password"),
+                        )
                         Bugsnag.notify(RuntimeException("Error Report with Breadcrumbs"))
+                        window.alert("Breadcrumbs sent to Bugsnag")
                     },
                 )
             }
         }
     }
 }
+
+@Composable
+fun TextButton(
+    text: String,
+    onClick: () -> Unit,
+) {
+    Button(
+        attrs = {
+            onClick { onClick() }
+        },
+    ) {
+        Text(text)
+    }
+}
diff --git a/example/BugsnagExample/composeApp/src/jsMain/resources/index.html b/example/BugsnagExample/composeApp/src/jsMain/resources/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>BugSnag Example</title>
+</head>
+<body>
+<div id="compose-content">
+
+</div>
+<script src="composeApp.js"></script>
+<script>
+    window.onload = (event) => {
+        composeApp.StartJsApp("compose-content");
+    }
+</script>
+</body>
+</html>
diff --git a/example/BugsnagExample/composeApp/src/jsMain/resources/styles.css b/example/BugsnagExample/composeApp/src/jsMain/resources/styles.css
@@ -0,0 +1,7 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
diff --git a/example/BugsnagExample/composeApp/src/webpack.config.d/configModuleName.js b/example/BugsnagExample/composeApp/src/webpack.config.d/configModuleName.js
@@ -0,0 +1,2 @@
+config.output = config.output || {};
+config.output.library = "composeApp";
diff --git a/example/BugsnagExample/gradle.properties b/example/BugsnagExample/gradle.properties
@@ -9,4 +9,6 @@ org.gradle.caching=true
 
 #Android
 android.nonTransitiveRClass=true
-android.useAndroidX=true
+android.useAndroidX=true
+
+org.jetbrains.compose.experimental.jscanvas.enabled=true
diff --git a/example/BugsnagExample/gradle/libs.versions.toml b/example/BugsnagExample/gradle/libs.versions.toml
@@ -6,22 +6,23 @@ androidx-lifecycle = "2.9.1"
 bugsnag-android = "6.13.0"
 bugsnag-gradle = "0.4.0"
 composeMultiplatform = "1.8.2"
-kotlin = "2.2.0"
+kotlin = "2.1.0"
 kmp = "+"
+bugsnag-js = "8.2.0"
 
 [libraries]
-kotlin-test = { module = "org.jetbrains.kotlin:kotlin-test", version.ref = "kotlin" }
 androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "androidx-appcompat" }
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity" }
 androidx-lifecycle-viewmodel = { module = "org.jetbrains.androidx.lifecycle:lifecycle-viewmodel", version.ref = "androidx-lifecycle" }
 androidx-lifecycle-runtimeCompose = { module = "org.jetbrains.androidx.lifecycle:lifecycle-runtime-compose", version.ref = "androidx-lifecycle" }
 bugsnag-android = { group = "com.bugsnag", name = "bugsnag-android", version.ref = "bugsnag-android"}
 bugsnag-kmp = { module = "com.bugsnag:bugsnag-kmp", version.ref = "kmp" }
+compose-html = { module = "org.jetbrains.compose.html:html-core-js", version = "1.7.3" }
 
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }
 androidLibrary = { id = "com.android.library", version.ref = "agp" }
 bugsnag-gradle = { id = "com.bugsnag.gradle", version.ref = "bugsnag-gradle"}
 composeMultiplatform = { id = "org.jetbrains.compose", version.ref = "composeMultiplatform" }
 composeCompiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
-kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
+kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi`
`2`	`1`	`import org.jetbrains.kotlin.gradle.dsl.JvmTarget`
	`2`	`+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig`
`3`	`3`
`4`	`4`	`plugins {`
`5`	`5`	`alias(libs.plugins.kotlinMultiplatform)`
`@@ -11,7 +11,6 @@ plugins {`
`11`	`11`
`12`	`12`	`kotlin {`
`13`	`13`	`androidTarget {`
`14`		`- @OptIn(ExperimentalKotlinGradlePluginApi::class)`
`15`	`14`	`compilerOptions {`
`16`	`15`	`jvmTarget.set(JvmTarget.JVM_11)`
`17`	`16`	`}`
`@@ -28,6 +27,20 @@ kotlin {`
`28`	`27`	`}`
`29`	`28`	`}`
`30`	`29`
	`30`	`+ js(IR) {`
	`31`	`+ moduleName = "composeApp"`
	`32`	`+ useEsModules()`
	`33`	`+ browser {`
	`34`	`+ commonWebpackConfig {`
	`35`	`+ mode = KotlinWebpackConfig.Mode.PRODUCTION`
	`36`	`+ }`
	`37`	`+ }`
	`38`	`+ binaries.executable()`
	`39`	`+ }`
	`40`	`+`
	`41`	`+ applyDefaultHierarchyTemplate()`
	`42`	`+`
	`43`	`+`
`31`	`44`	`sourceSets {`
`32`	`45`
`33`	`46`	`androidMain.dependencies {`
`@@ -45,8 +58,9 @@ kotlin {`
`45`	`58`	`implementation(libs.androidx.lifecycle.runtimeCompose)`
`46`	`59`	`implementation(libs.bugsnag.kmp)`
`47`	`60`	`}`
`48`		`- commonTest.dependencies {`
`49`		`- implementation(libs.kotlin.test)`
	`61`	`+ jsMain.dependencies {`
	`62`	`+ implementation(libs.compose.html)`
	`63`	`+ implementation(npm("@bugsnag/browser", "=${libs.versions.bugsnag.js.get()}"))`
`50`	`64`	`}`
`51`	`65`	`}`
`52`	`66`	`}`
`@@ -75,15 +89,15 @@ android {`
`75`	`89`	`}`
`76`	`90`	`}`
`77`	`91`	`compileOptions {`
`78`		`- sourceCompatibility = JavaVersion.VERSION_1_8`
`79`		`- targetCompatibility = JavaVersion.VERSION_1_8`
	`92`	`+ sourceCompatibility = JavaVersion.VERSION_11`
	`93`	`+ targetCompatibility = JavaVersion.VERSION_11`
`80`	`94`	`}`
`81`	`95`	`}`
`82`	`96`
`83`	`97`	`dependencies {`
`84`		`- implementation(libs.androidx.appcompat)`
`85`	`98`	`debugImplementation(compose.uiTooling)`
`86`	`99`
	`100`	`+ implementation(libs.androidx.appcompat)`
`87`	`101`	`implementation(libs.bugsnag.android)`
`88`	`102`	`implementation(libs.bugsnag.kmp)`
`89`	`103`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+config.output = config.output \|\| {};`
	`2`	`+config.output.library = "composeApp";`