feat: Catch and log exceptions (#64)

* feat: Add rudimentary error boundary

Catch render errors with Gutenberg's default error boundary component.

* feat: Log render errors to the host app

Allow the host app to act on errors.

* feat: Log error details to iOS host app

Allow the iOS host app to act on errors.

* feat: Parse errors

Extract relevant attributes for logging to monitoring services.

* refactor: Hoist error boundary into layout component

Catch errors within the editor component.

* build: Add Gson

Enable parsing stringified JSON objects sent from WebViews to the host
Android app.

* feat: Add logic for logging exceptions to Android host

Enable the Android host app to act upon editor exceptions.

* task: Capture build output

* refactor: Improve editor exception type safety

* refactor: Rename "error" to "exception"

The latter better describes these "handled" errors.

android/Gutenberg/build.gradle.kts

@@ -49,6 +49,7 @@ dependencies {
     implementation(libs.androidx.appcompat)
     implementation(libs.material)
     implementation(libs.androidx.webkit)
+    implementation(libs.gson)
 
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)

android/Gutenberg/src/main/java/org/wordpress/gutenberg/GutenbergJsException.kt

@@ -0,0 +1,66 @@
+package org.wordpress.gutenberg
+
+import com.google.gson.Gson
+import com.google.gson.JsonObject
+
+data class JsExceptionStackTraceElement (
+    val fileName: String?,
+    val lineNumber: Int?,
+    val colNumber: Int?,
+    val function: String,
+)
+class GutenbergJsException (
+    val type: String,
+    val message: String,
+    var stackTrace: List<JsExceptionStackTraceElement>,
+    val context: Map<String, Any> = emptyMap(),
+    val tags: Map<String,String> = emptyMap(),
+    val isHandled: Boolean,
+    val handledBy: String
+) {
+
+    companion object {
+        @JvmStatic
+        fun fromString(exceptionString: String): GutenbergJsException {
+            val gson = Gson()
+            val rawException = gson.fromJson(exceptionString, JsonObject::class.java)
+
+            val type = rawException.get("type")?.asString ?: ""
+            val message = rawException.get("message")?.asString ?: ""
+
+            val stackTrace = rawException.getAsJsonArray("stacktrace")?.map { element ->
+                val stackTraceElement = element.asJsonObject
+                val stackTraceFunction = stackTraceElement.get("function")?.asString
+                stackTraceFunction?.let {
+                    JsExceptionStackTraceElement(
+                        stackTraceElement.get("filename")?.asString,
+                        stackTraceElement.get("lineno")?.asInt,
+                        stackTraceElement.get("colno")?.asInt,
+                        stackTraceFunction
+                    )
+                }
+            }?.filterNotNull() ?: emptyList()
+
+            val context = rawException.getAsJsonObject("context")?.entrySet()?.associate {
+                it.key to it.value.asString
+            } ?: emptyMap()
+
+            val tags = rawException.getAsJsonObject("tags")?.entrySet()?.associate {
+                it.key to it.value.asString
+            } ?: emptyMap()
+
+            val isHandled = rawException.get("isHandled")?.asBoolean ?: false
+            val handledBy = rawException.get("handledBy")?.asString ?: ""
+
+            return GutenbergJsException(
+                type,
+                message,
+                stackTrace,
+                context,
+                tags,
+                isHandled,
+                handledBy
+            )
+        }
+    }
+}

android/Gutenberg/src/main/java/org/wordpress/gutenberg/GutenbergView.kt

@@ -56,6 +56,7 @@ class GutenbergView : WebView {
     private var historyChangeListener: HistoryChangeListener? = null
     private var openMediaLibraryListener: OpenMediaLibraryListener? = null
     private var editorDidBecomeAvailableListener: EditorAvailableListener? = null
+    private var logJsExceptionListener: LogJsExceptionListener? = null
 
     var textEditorEnabled: Boolean = false
         set(value) {
@@ -78,6 +79,10 @@ class GutenbergView : WebView {
         openMediaLibraryListener = listener
     }
 
+    fun setLogJsExceptionListener(listener: LogJsExceptionListener) {
+        logJsExceptionListener = listener
+    }
+
     fun setOnFileChooserRequestedListener(listener: (Intent, Int) -> Unit) {
         onFileChooserRequested = listener
     }
@@ -305,6 +310,10 @@ class GutenbergView : WebView {
         fun onEditorAvailable(view: GutenbergView?)
     }
 
+    interface LogJsExceptionListener {
+        fun onLogJsException(exception: GutenbergJsException)
+    }
+
     fun getTitleAndContent(callback: TitleAndContentCallback, clearFocus: Boolean = true) {
         if (!isEditorLoaded) {
             Log.e("GutenbergView", "You can't change the editor content until it has loaded")
@@ -422,6 +431,12 @@ class GutenbergView : WebView {
         this.evaluateJavascript("editor.setMediaUploadAttachment($media);", null)
     }
 
+    @JavascriptInterface
+    fun onEditorExceptionLogged(exception: String) {
+        val parsedException = GutenbergJsException.fromString(exception)
+        logJsExceptionListener?.onLogJsException(parsedException)
+    }
+
     @JavascriptInterface
     fun showBlockPicker() {
         Log.i("GutenbergView", "BlockPickerShouldShow")

android/gradle/libs.versions.toml

@@ -10,6 +10,7 @@ material = "1.12.0"
 activity = "1.9.0"
 constraintlayout = "2.1.4"
 webkit = "1.11.0"
+gson = "2.8.9"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -21,6 +22,7 @@ material = { group = "com.google.android.material", name = "material", version.r
 androidx-activity = { group = "androidx.activity", name = "activity", version.ref = "activity" }
 androidx-constraintlayout = { group = "androidx.constraintlayout", name = "constraintlayout", version.ref = "constraintlayout" }
 androidx-webkit = { group = "androidx.webkit", name = "webkit", version.ref = "webkit" }
+gson = { group = "com.google.code.gson", name = "gson", version.ref = "gson" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }