task: Log network activity (#238)

* task: Add `onNetworkRequest` bridge utility

* docs: Direct Claude to format and lint code

* task: Add fetch override utility

* refactor: Avoid overriding fetch if network logging is disabled

* refactor: Sort functions by usage occurrence

* docs: Direct Claude to order functions by usage occurrence

Make reading files easier, encountering high-level logic first before
the implementation details of helper utilities.

* task: Initialize fetch interceptor

* task: Add network logging configuration option

* task: Add iOS network logging delegate methods

* task: Add Android network logging delegate methods

* task: Enable networking logging in the iOS demo app

* task: Enable networking logging in the Android demo app

* fix: Prevent logging logic locking the Android response

All requests were failing due to the blocking processing of the body.

* fix: Custom bridge method sends expected Android data

The data structure for networking logging is incompatible with
`dispatchToBridge`.

* fix: Retain values during `toBuilder` conversion

The absence of these keys resulted in resetting the value to its default
when converting the configuration to a builder.

* test: Assert configuration builder properties

* fix: Serialize various request body types

Avoid logging `[Object object]` string values.

* refactor: Organize fetch interceptor tests

* refactor: Extract async logging test helper

* refactor: Prefer Vitest utilities over mock call extraction

Improve assertion explicitness.

* fix: Parse headers from both Header objects and plain objects

* feat: Demo app logs headers

* refactor: Rename `NetworkRequest` to `RecordedNetworkRequest`

Further clarify both request and response data is captured.

* task: Report status text

Author: dcalhoun

CLAUDE.md

@@ -173,6 +173,16 @@ The project follows WordPress coding standards for JavaScript:
 -   **ESLint**: Uses `@wordpress/eslint-plugin/recommended` configuration
 -   **Prettier**: Uses `@wordpress/prettier-config` for code formatting
 
+### Function Ordering Convention
+
+Functions in this project are ordered by usage/call order rather than alphabetically:
+
+-   **Main/exported functions first**: The primary exported function appears at the top of the file
+-   **Helper functions follow in call order**: Helper functions are ordered based on when they are first called in the main function
+-   **Example**: If `mainFunction()` calls `helperA()` then `helperB()`, the file order should be: `mainFunction`, `helperA`, `helperB`
+
+This ordering makes code easier to read top-to-bottom, as you encounter function definitions before needing to understand their implementation details.
+
 ### Logging Guidelines
 
 The project uses a custom logger utility (`src/utils/logger.js`) instead of direct `console` methods:
@@ -186,12 +196,19 @@ The project uses a custom logger utility (`src/utils/logger.js`) instead of dire
 
 Note: Console logs should be used sparingly. For verbose or development-specific logging, prefer the `debug()` function which can be controlled via log levels.
 
-Always run these commands before committing:
+### Pre-Commit Checklist
 
-```bash
-# Lint JavaScript code
-make lint-js
+**IMPORTANT**: Always run these commands after making code changes and before presenting work for review/commit:
 
+```bash
 # Format JavaScript code
 make format
+
+# Auto-fix linting errors
+make lint-js-fix
+
+# Verify linting passes
+make lint-js
 ```
+
+These commands ensure code quality and prevent lint errors from blocking commits.

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

@@ -22,7 +22,8 @@ open class EditorConfiguration constructor(
     val cookies: Map<String, String>,
     val enableAssetCaching: Boolean = false,
     val cachedAssetHosts: Set<String> = emptySet(),
-    val editorAssetsEndpoint: String? = null
+    val editorAssetsEndpoint: String? = null,
+    val enableNetworkLogging: Boolean = false
 ): Parcelable {
     companion object {
         @JvmStatic
@@ -48,6 +49,7 @@ open class EditorConfiguration constructor(
         private var enableAssetCaching: Boolean = false
         private var cachedAssetHosts: Set<String> = emptySet()
         private var editorAssetsEndpoint: String? = null
+        private var enableNetworkLogging: Boolean = false
 
         fun setTitle(title: String) = apply { this.title = title }
         fun setContent(content: String) = apply { this.content = content }
@@ -67,6 +69,7 @@ open class EditorConfiguration constructor(
         fun setEnableAssetCaching(enableAssetCaching: Boolean) = apply { this.enableAssetCaching = enableAssetCaching }
         fun setCachedAssetHosts(cachedAssetHosts: Set<String>) = apply { this.cachedAssetHosts = cachedAssetHosts }
         fun setEditorAssetsEndpoint(editorAssetsEndpoint: String?) = apply { this.editorAssetsEndpoint = editorAssetsEndpoint }
+        fun setEnableNetworkLogging(enableNetworkLogging: Boolean) = apply { this.enableNetworkLogging = enableNetworkLogging }
 
         fun build(): EditorConfiguration = EditorConfiguration(
             title = title,
@@ -86,7 +89,8 @@ open class EditorConfiguration constructor(
             cookies = cookies,
             enableAssetCaching = enableAssetCaching,
             cachedAssetHosts = cachedAssetHosts,
-            editorAssetsEndpoint = editorAssetsEndpoint
+            editorAssetsEndpoint = editorAssetsEndpoint,
+            enableNetworkLogging = enableNetworkLogging
         )
     }
 
@@ -114,6 +118,7 @@ open class EditorConfiguration constructor(
         if (enableAssetCaching != other.enableAssetCaching) return false
         if (cachedAssetHosts != other.cachedAssetHosts) return false
         if (editorAssetsEndpoint != other.editorAssetsEndpoint) return false
+        if (enableNetworkLogging != other.enableNetworkLogging) return false
 
         return true
     }
@@ -137,6 +142,7 @@ open class EditorConfiguration constructor(
         result = 31 * result + enableAssetCaching.hashCode()
         result = 31 * result + cachedAssetHosts.hashCode()
         result = 31 * result + (editorAssetsEndpoint?.hashCode() ?: 0)
+        result = 31 * result + enableNetworkLogging.hashCode()
         return result
     }
 }

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

@@ -55,6 +55,7 @@ class GutenbergView : WebView {
     private var logJsExceptionListener: LogJsExceptionListener? = null
     private var autocompleterTriggeredListener: AutocompleterTriggeredListener? = null
     private var modalDialogStateListener: ModalDialogStateListener? = null
+    private var networkRequestListener: NetworkRequestListener? = null
 
     /**
      * Stores the contextId from the most recent openMediaLibrary call
@@ -99,6 +100,10 @@ class GutenbergView : WebView {
         modalDialogStateListener = listener
     }
 
+    fun setNetworkRequestListener(listener: NetworkRequestListener) {
+        networkRequestListener = listener
+    }
+
     fun setOnFileChooserRequestedListener(listener: (Intent, Int) -> Unit) {
         onFileChooserRequested = listener
     }
@@ -307,6 +312,7 @@ class GutenbergView : WebView {
                 "editorSettings": $editorSettings,
                 "locale": "${configuration.locale}",
                 ${if (configuration.editorAssetsEndpoint != null) "\"editorAssetsEndpoint\": \"${configuration.editorAssetsEndpoint}\"," else ""}
+                "enableNetworkLogging": ${configuration.enableNetworkLogging},
                 "post": {
                     "id": ${configuration.postId ?: -1},
                     "title": "$escapedTitle",
@@ -403,6 +409,10 @@ class GutenbergView : WebView {
         fun onModalDialogClosed(dialogType: String)
     }
 
+    interface NetworkRequestListener {
+        fun onNetworkRequest(request: RecordedNetworkRequest)
+    }
+
     fun getTitleAndContent(originalContent: CharSequence, callback: TitleAndContentCallback, completeComposition: Boolean = false) {
         if (!isEditorLoaded) {
             Log.e("GutenbergView", "You can't change the editor content until it has loaded")
@@ -609,6 +619,19 @@ class GutenbergView : WebView {
         }
     }
 
+    @JavascriptInterface
+    fun onNetworkRequest(requestData: String) {
+        handler.post {
+            try {
+                val json = JSONObject(requestData)
+                val request = RecordedNetworkRequest.fromJson(json)
+                networkRequestListener?.onNetworkRequest(request)
+            } catch (e: Exception) {
+                Log.e("GutenbergView", "Error parsing network request: ${e.message}")
+            }
+        }
+    }
+
     fun resetFilePathCallback() {
         filePathCallback = null
     }
@@ -690,6 +713,7 @@ class GutenbergView : WebView {
         onFileChooserRequested = null
         autocompleterTriggeredListener = null
         modalDialogStateListener = null
+        networkRequestListener = null
         handler.removeCallbacksAndMessages(null)
         this.destroy()
     }

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

@@ -0,0 +1,41 @@
+package org.wordpress.gutenberg
+
+import org.json.JSONObject
+
+data class RecordedNetworkRequest(
+    val url: String,
+    val method: String,
+    val requestHeaders: Map<String, String>,
+    val requestBody: String?,
+    val status: Int,
+    val statusText: String,
+    val responseHeaders: Map<String, String>,
+    val responseBody: String?,
+    val duration: Int
+) {
+    companion object {
+        fun fromJson(json: JSONObject): RecordedNetworkRequest {
+            return RecordedNetworkRequest(
+                url = json.getString("url"),
+                method = json.getString("method"),
+                requestHeaders = jsonObjectToMap(json.getJSONObject("requestHeaders")),
+                requestBody = json.optString("requestBody").takeIf { it.isNotEmpty() },
+                status = json.getInt("status"),
+                statusText = json.optString("statusText", ""),
+                responseHeaders = jsonObjectToMap(json.getJSONObject("responseHeaders")),
+                responseBody = json.optString("responseBody").takeIf { it.isNotEmpty() },
+                duration = json.getInt("duration")
+            )
+        }
+
+        private fun jsonObjectToMap(jsonObject: JSONObject): Map<String, String> {
+            val map = mutableMapOf<String, String>()
+            val keys = jsonObject.keys()
+            while (keys.hasNext()) {
+                val key = keys.next()
+                map[key] = jsonObject.getString(key)
+            }
+            return map
+        }
+    }
+}

android/Gutenberg/src/test/java/org/wordpress/gutenberg/EditorConfigurationTest.kt

@@ -2,14 +2,12 @@ package org.wordpress.gutenberg
 
 import org.junit.Test
 import org.junit.Assert.*
-import org.junit.Before
 
 class EditorConfigurationTest {
-    private lateinit var editorConfig: EditorConfiguration
 
-    @Before
-    fun setup() {
-        editorConfig = EditorConfiguration.builder()
+    @Test
+    fun `test EditorConfiguration builder sets all properties correctly`() {
+        val config = EditorConfiguration.builder()
             .setTitle("Test Title")
             .setContent("Test Content")
             .setPostId(123)
@@ -22,23 +20,34 @@ class EditorConfigurationTest {
             .setSiteApiNamespace(arrayOf("wp/v2"))
             .setNamespaceExcludedPaths(arrayOf("users"))
             .setAuthHeader("Bearer token")
+            .setEditorSettings("{\"foo\":\"bar\"}")
+            .setLocale("fr")
+            .setCookies(mapOf("session" to "abc123"))
+            .setEnableAssetCaching(true)
+            .setCachedAssetHosts(setOf("example.com", "cdn.example.com"))
+            .setEditorAssetsEndpoint("https://example.com/assets")
+            .setEnableNetworkLogging(true)
             .build()
-    }
 
-    @Test
-    fun `test EditorConfiguration builder creates correct configuration`() {
-        assertEquals("Test Title", editorConfig.title)
-        assertEquals("Test Content", editorConfig.content)
-        assertEquals(123, editorConfig.postId)
-        assertEquals("post", editorConfig.postType)
-        assertTrue(editorConfig.themeStyles)
-        assertTrue(editorConfig.plugins)
-        assertFalse(editorConfig.hideTitle)
-        assertEquals("https://example.com", editorConfig.siteURL)
-        assertEquals("https://example.com/wp-json", editorConfig.siteApiRoot)
-        assertArrayEquals(arrayOf("wp/v2"), editorConfig.siteApiNamespace)
-        assertArrayEquals(arrayOf("users"), editorConfig.namespaceExcludedPaths)
-        assertEquals("Bearer token", editorConfig.authHeader)
+        assertEquals("Test Title", config.title)
+        assertEquals("Test Content", config.content)
+        assertEquals(123, config.postId)
+        assertEquals("post", config.postType)
+        assertTrue(config.themeStyles)
+        assertTrue(config.plugins)
+        assertFalse(config.hideTitle)
+        assertEquals("https://example.com", config.siteURL)
+        assertEquals("https://example.com/wp-json", config.siteApiRoot)
+        assertArrayEquals(arrayOf("wp/v2"), config.siteApiNamespace)
+        assertArrayEquals(arrayOf("users"), config.namespaceExcludedPaths)
+        assertEquals("Bearer token", config.authHeader)
+        assertEquals("{\"foo\":\"bar\"}", config.editorSettings)
+        assertEquals("fr", config.locale)
+        assertEquals(mapOf("session" to "abc123"), config.cookies)
+        assertTrue(config.enableAssetCaching)
+        assertEquals(setOf("example.com", "cdn.example.com"), config.cachedAssetHosts)
+        assertEquals("https://example.com/assets", config.editorAssetsEndpoint)
+        assertTrue(config.enableNetworkLogging)
     }
 
     @Test
@@ -71,4 +80,4 @@ class EditorConfigurationTest {
 
         assertNotEquals(config1, config2)
     }
-}
+}

android/app/src/main/java/com/example/gutenbergkit/EditorActivity.kt

@@ -225,6 +225,36 @@ fun EditorScreen(
                             hasRedoState = hasRedo
                         }
                     })
+                    setNetworkRequestListener(object : GutenbergView.NetworkRequestListener {
+                        override fun onNetworkRequest(request: org.wordpress.gutenberg.RecordedNetworkRequest) {
+                            android.util.Log.d("EditorActivity", "🌐 Network Request: ${request.method} ${request.url}")
+                            android.util.Log.d("EditorActivity", "   Status: ${request.status} ${request.statusText}, Duration: ${request.duration}ms")
+
+                            // Log request headers
+                            if (request.requestHeaders.isNotEmpty()) {
+                                android.util.Log.d("EditorActivity", "   Request Headers:")
+                                request.requestHeaders.toSortedMap().forEach { (key, value) ->
+                                    android.util.Log.d("EditorActivity", "      $key: $value")
+                                }
+                            }
+
+                            request.requestBody?.let {
+                                android.util.Log.d("EditorActivity", "   Request Body: ${it.take(200)}...")
+                            }
+
+                            // Log response headers
+                            if (request.responseHeaders.isNotEmpty()) {
+                                android.util.Log.d("EditorActivity", "   Response Headers:")
+                                request.responseHeaders.toSortedMap().forEach { (key, value) ->
+                                    android.util.Log.d("EditorActivity", "      $key: $value")
+                                }
+                            }
+
+                            request.responseBody?.let {
+                                android.util.Log.d("EditorActivity", "   Response Body: ${it.take(200)}...")
+                            }
+                        }
+                    })
                     start(configuration)
                     onGutenbergViewCreated(this)
                 }

android/app/src/main/java/com/example/gutenbergkit/MainActivity.kt

@@ -160,6 +160,7 @@ class MainActivity : ComponentActivity(), AuthenticationManager.AuthenticationCa
             .setThemeStyles(false)
             .setHideTitle(false)
             .setCookies(emptyMap())
+            .setEnableNetworkLogging(true)
 
     private fun launchEditor(configuration: EditorConfiguration) {
         val intent = Intent(this, EditorActivity::class.java)

ios/Demo-iOS/Sources/Views/AppRootView.swift

@@ -80,6 +80,7 @@ struct AppRootView: View {
                     .setAuthHeader(config.authHeader)
                     .setNativeInserterEnabled(isNativeInserterEnabled)
                     .setLogLevel(.debug)
+                    .setEnableNetworkLogging(true)
                     .build()
 
                 self.activeEditorConfiguration = updatedConfiguration
@@ -102,6 +103,7 @@ struct AppRootView: View {
             .setSiteApiRoot("")
             .setAuthHeader("")
             .setNativeInserterEnabled(isNativeInserterEnabled)
+            .setEnableNetworkLogging(true)
             .build()
     }
 }

ios/Demo-iOS/Sources/Views/EditorView.swift

@@ -182,6 +182,35 @@ private struct _EditorView: UIViewControllerRepresentable {
         func editor(_ viewController: EditorViewController, didCloseModalDialog dialogType: String) {
             viewModel.isModalDialogOpen = false
         }
+
+        func editor(_ viewController: EditorViewController, didLogNetworkRequest request: RecordedNetworkRequest) {
+            print("🌐 Network Request: \(request.method) \(request.url)")
+            print("   Status: \(request.status) \(request.statusText), Duration: \(request.duration)ms")
+
+            // Log request headers
+            if !request.requestHeaders.isEmpty {
+                print("   Request Headers:")
+                for (key, value) in request.requestHeaders.sorted(by: { $0.key < $1.key }) {
+                    print("      \(key): \(value)")
+                }
+            }
+
+            if let requestBody = request.requestBody {
+                print("   Request Body: \(requestBody.prefix(200))...")
+            }
+
+            // Log response headers
+            if !request.responseHeaders.isEmpty {
+                print("   Response Headers:")
+                for (key, value) in request.responseHeaders.sorted(by: { $0.key < $1.key }) {
+                    print("      \(key): \(value)")
+                }
+            }
+
+            if let responseBody = request.responseBody {
+                print("   Response Body: \(responseBody.prefix(200))...")
+            }
+        }
     }
 }