[Gutenberg] Add error boundary components and exception logging

Gutenberg/config.yml

@@ -9,6 +9,6 @@
  #
  #   LOCAL_GUTENBERG=../my-gutenberg-fork bundle exec pod install
 ref:
-  tag: v1.115.0-alpha3
+  tag: v1.115.0-alpha5
 github_org: wordpress-mobile
 repo_name: gutenberg-mobile

Podfile

@@ -131,7 +131,7 @@ abstract_target 'Apps' do
 
   # Production
 
-  pod 'Automattic-Tracks-iOS', '~> 3.0'
+  pod 'Automattic-Tracks-iOS', '~> 3.3'
   # While in PR
   # pod 'Automattic-Tracks-iOS', git: 'https://github.com/Automattic/Automattic-Tracks-iOS.git', branch: ''
   # Local Development

Podfile.lock

@@ -14,7 +14,7 @@ PODS:
     - AppCenter/Core
   - AppCenter/Distribute (5.0.3):
     - AppCenter/Core
-  - Automattic-Tracks-iOS (3.2.0):
+  - Automattic-Tracks-iOS (3.3.0):
     - Sentry (~> 8.0)
     - Sodium (>= 0.9.1)
     - UIDeviceIdentifier (~> 2.0)
@@ -26,7 +26,7 @@ PODS:
   - FSInteractiveMap (0.1.0)
   - Gifu (3.3.1)
   - Gridicons (1.2.0)
-  - Gutenberg (1.114.0)
+  - Gutenberg (1.114.1)
   - JTAppleCalendar (8.0.5)
   - Kanvas (1.4.9):
     - CropViewController
@@ -49,12 +49,12 @@ PODS:
   - OHHTTPStubs/Swift (9.1.0):
     - OHHTTPStubs/Default
   - Reachability (3.2)
-  - Sentry (8.18.0):
-    - Sentry/Core (= 8.18.0)
-    - SentryPrivate (= 8.18.0)
-  - Sentry/Core (8.18.0):
-    - SentryPrivate (= 8.18.0)
-  - SentryPrivate (8.18.0)
+  - Sentry (8.21.0):
+    - Sentry/Core (= 8.21.0)
+    - SentryPrivate (= 8.21.0)
+  - Sentry/Core (8.21.0):
+    - SentryPrivate (= 8.21.0)
+  - SentryPrivate (8.21.0)
   - Sodium (0.9.1)
   - Starscream (4.0.6)
   - SVProgressHUD (2.2.5)
@@ -98,14 +98,14 @@ DEPENDENCIES:
   - AlamofireNetworkActivityIndicator (~> 3.0)
   - AppCenter (~> 5.0)
   - AppCenter/Distribute (~> 5.0)
-  - Automattic-Tracks-iOS (~> 3.0)
+  - Automattic-Tracks-iOS (~> 3.3)
   - CocoaLumberjack/Swift (~> 3.0)
   - CropViewController (= 2.5.3)
   - Down (~> 0.6.6)
   - FSInteractiveMap (from `https://github.com/wordpress-mobile/FSInteractiveMap.git`, tag `0.2.0`)
   - Gifu (= 3.3.1)
   - Gridicons (~> 1.2)
-  - Gutenberg (from `https://cdn.a8c-ci.services/gutenberg-mobile/Gutenberg-v1.115.0-alpha3.podspec`)
+  - Gutenberg (from `https://cdn.a8c-ci.services/gutenberg-mobile/Gutenberg-v1.115.0-alpha5.podspec`)
   - JTAppleCalendar (~> 8.0.5)
   - Kanvas (~> 1.4.4)
   - MediaEditor (>= 1.2.2, ~> 1.2)
@@ -174,7 +174,7 @@ EXTERNAL SOURCES:
     :git: https://github.com/wordpress-mobile/FSInteractiveMap.git
     :tag: 0.2.0
   Gutenberg:
-    :podspec: https://cdn.a8c-ci.services/gutenberg-mobile/Gutenberg-v1.115.0-alpha3.podspec
+    :podspec: https://cdn.a8c-ci.services/gutenberg-mobile/Gutenberg-v1.115.0-alpha5.podspec
 
 CHECKOUT OPTIONS:
   FSInteractiveMap:
@@ -186,14 +186,14 @@ SPEC CHECKSUMS:
   AlamofireImage: 843953fa97bee5f561cf05d83abd759e590b068d
   AlamofireNetworkActivityIndicator: 6564782bd7b9e6c430ae67d9277af01907b01ca4
   AppCenter: a4070ec3d4418b5539067a51f57155012e486ebd
-  Automattic-Tracks-iOS: baa126f98d2ce26fd54ee2534bef6e2d46480a5c
+  Automattic-Tracks-iOS: fc307762052ec20b733ae76363d1387a9d93d6a5
   CocoaLumberjack: 78abfb691154e2a9df8ded4350d504ee19d90732
   CropViewController: a5c143548a0fabcd6cc25f2d26e40460cfb8c78c
   Down: 71bf4af3c04fa093e65dffa25c4b64fa61287373
   FSInteractiveMap: a396f610f48b76cb540baa87139d056429abda86
   Gifu: 416d4e38c4c2fed012f019e0a1d3ffcb58e5b842
   Gridicons: 4455b9f366960121430e45997e32112ae49ffe1d
-  Gutenberg: c8aaa59f24cf3e5618a02d1a4f0c48db9981c3dd
+  Gutenberg: 8e3c5d6774939c3925ff8e8fbe77b52b06751e01
   JTAppleCalendar: 16c6501b22cb27520372c28b0a2e0b12c8d0cd73
   Kanvas: cc027f8058de881a4ae2b5aa5f05037b6d054d08
   MediaEditor: d08314cfcbfac74361071a306b4bc3a39b3356ae
@@ -202,8 +202,8 @@ SPEC CHECKSUMS:
   OCMock: 43565190abc78977ad44a61c0d20d7f0784d35ab
   OHHTTPStubs: 90eac6d8f2c18317baeca36698523dc67c513831
   Reachability: 33e18b67625424e47b6cde6d202dce689ad7af96
-  Sentry: 8984a4ffb2b9bd2894d74fb36e6f5833865bc18e
-  SentryPrivate: 2f0c9ba4c3fc993f70eab6ca95673509561e0085
+  Sentry: ebc12276bd17613a114ab359074096b6b3725203
+  SentryPrivate: d651efb234cf385ec9a1cdd3eff94b5e78a0e0fe
   Sodium: 23d11554ecd556196d313cf6130d406dfe7ac6da
   Starscream: fb2c4510bebf908c62bd383bcf05e673720e91fd
   SVProgressHUD: 1428aafac632c1f86f62aa4243ec12008d7a51d6
@@ -225,6 +225,6 @@ SPEC CHECKSUMS:
   ZendeskSupportSDK: 3a8e508ab1d9dd22dc038df6c694466414e037ba
   ZIPFoundation: d170fa8e270b2a32bef9dcdcabff5b8f1a5deced
 
-PODFILE CHECKSUM: e3e8f913d1e22d005cc0c351141a3055d6f23cca
+PODFILE CHECKSUM: e85bd1f26f3aacf5429ef8eb55c0f328a6174e7e
 
 COCOAPODS: 1.14.2

RELEASE-NOTES.txt

@@ -4,6 +4,7 @@
 * [**] [internal] Block editor: Upgrade React Native to version 0.73.3 [#22588]
 * [*] Remove "Edit" button from "Post Published" screen [#22762]
 * [*] Remove "Publish" button from "Preview" screen [#22763]
+* [**] Block editor: Add error boundary components and exception logging [#22655]
 
 24.4
 -----

Scripts/BuildPhases/CopyGutenbergJS.sh

@@ -13,6 +13,7 @@ DEST="$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH"
 # Update the matching .inputs.xcfilelist when changing these
 XCFRAMEWORK_BUNDLE_ROOT="$PODS_XCFRAMEWORKS_BUILD_DIR/Gutenberg/Gutenberg.framework"
 PODS_BUNDLE_ROOT="$PODS_ROOT/Gutenberg/bundle/ios"
+LOCAL_BUNDLE="$PODS_ROOT/../../gutenberg-mobile/bundle/ios"
 
 BUNDLE_FILE="$DEST/main.jsbundle"
 BUNDLE_ASSETS="$DEST/assets/"
@@ -23,6 +24,10 @@ if [[ -d $XCFRAMEWORK_BUNDLE_ROOT ]]; then
 elif [[ -d $PODS_BUNDLE_ROOT ]]; then
   cp "$PODS_BUNDLE_ROOT/App.js" "$BUNDLE_FILE"
   cp -r "$PODS_BUNDLE_ROOT/assets" "$BUNDLE_ASSETS"
+elif [[ -d $LOCAL_BUNDLE ]]; then
+  echo "warning: Using local bundle."
+  cp "$LOCAL_BUNDLE/App.js" "$BUNDLE_FILE"
+  cp -r "$LOCAL_BUNDLE/assets" "$BUNDLE_ASSETS"
 else
   if [[ "$CONFIGURATION" = *Debug* ]]; then
     echo "warning: Could not find Gutenberg bundle in either XCFramework or Pods. But running in Debug configuration so will assume you are working with a local version of Gutenberg."

WordPress/Classes/ViewRelated/Gutenberg/GutenbergViewController.swift

@@ -3,6 +3,7 @@ import Gutenberg
 import Aztec
 import WordPressFlux
 import React
+import AutomatticTracks
 
 class GutenbergViewController: UIViewController, PostEditor, FeaturedImageDelegate, PublishingEditor {
     let errorDomain: String = "GutenbergViewController.errorDomain"
@@ -1295,6 +1296,12 @@ extension GutenbergViewController: PostEditorNavigationBarManagerDelegate {
         }
     }
 
+    func gutenbergDidRequestLogException(_ exception: GutenbergJSException, with callback: @escaping () -> Void) {
+        DispatchQueue.main.async {
+            WordPressAppDelegate.crashLogging?.logJavaScriptException(exception, callback: callback)
+        }
+    }
+
     func navigationBarManager(_ manager: PostEditorNavigationBarManager, closeWasPressed sender: UIButton) {
         requestHTML(for: .close)
     }
@@ -1378,3 +1385,7 @@ extension GutenbergViewController {
         })
     }
 }
+
+// Extend Gutenberg JavaScript exception struct to conform the protocol defined in the Crash Logging service
+extension GutenbergJSException.StacktraceLine: AutomatticTracks.JSStacktraceLine {}
+extension GutenbergJSException: AutomatticTracks.JSException {}

fastlane/lanes/build.rb

@@ -169,6 +169,13 @@
       dsym_path: lane_context[SharedValues::DSYM_OUTPUT_PATH]
     )
 
+    upload_gutenberg_sourcemaps(
+      sentry_project_slug: SENTRY_PROJECT_SLUG_WORDPRESS,
+      release_version: release_version_current,
+      build_version: build_code_current,
+      app_identifier: WORDPRESS_BUNDLE_IDENTIFIER
+    )
+
     next unless options[:create_release]
 
     archive_zip_path = File.join(PROJECT_ROOT_FOLDER, 'WordPress.xarchive.zip')
@@ -217,6 +224,13 @@
       project_slug: SENTRY_PROJECT_SLUG_JETPACK,
       dsym_path: lane_context[SharedValues::DSYM_OUTPUT_PATH]
     )
+
+    upload_gutenberg_sourcemaps(
+      sentry_project_slug: SENTRY_PROJECT_SLUG_JETPACK,
+      release_version: release_version_current,
+      build_version: build_code_current,
+      app_identifier: JETPACK_BUNDLE_IDENTIFIER
+    )
   end
 
   # Builds the "WordPress Internal" app and uploads it to App Center
@@ -266,6 +280,13 @@
       project_slug: SENTRY_PROJECT_SLUG_WORDPRESS,
       dsym_path: lane_context[SharedValues::DSYM_OUTPUT_PATH]
     )
+
+    upload_gutenberg_sourcemaps(
+      sentry_project_slug: SENTRY_PROJECT_SLUG_WORDPRESS,
+      release_version: release_version_current_internal,
+      build_version: build_code_current_internal,
+      app_identifier: 'org.wordpress.internal'
+    )
   end
 
   # Builds the WordPress app for a Prototype Build ("WordPress Alpha" scheme), and uploads it to App Center
@@ -283,7 +304,8 @@
       output_app_name: 'WordPress Alpha',
       appcenter_app_name: 'WPiOS-One-Offs',
       app_icon: ':wordpress:', # Use Buildkite emoji
-      sentry_project_slug: SENTRY_PROJECT_SLUG_WORDPRESS
+      sentry_project_slug: SENTRY_PROJECT_SLUG_WORDPRESS,
+      app_identifier: 'org.wordpress.alpha'
     )
   end
 
@@ -302,7 +324,8 @@
       output_app_name: 'Jetpack Alpha',
       appcenter_app_name: 'jetpack-installable-builds',
       app_icon: ':jetpack:', # Use Buildkite emoji
-      sentry_project_slug: SENTRY_PROJECT_SLUG_JETPACK
+      sentry_project_slug: SENTRY_PROJECT_SLUG_JETPACK,
+      app_identifier: 'com.jetpack.alpha'
     )
   end
 
@@ -334,7 +357,8 @@ def generate_prototype_build_number
   # Builds a Prototype Build for WordPress or Jetpack, then uploads it to App Center and comment with a link to it on the PR.
   #
   # rubocop:disable Metrics/AbcSize
-  def build_and_upload_prototype_build(scheme:, output_app_name:, appcenter_app_name:, app_icon:, sentry_project_slug:)
+  # rubocop:disable Metrics/ParameterLists
+  def build_and_upload_prototype_build(scheme:, output_app_name:, appcenter_app_name:, app_icon:, sentry_project_slug:, app_identifier:)
     configuration = 'Release-Alpha'
 
     # Get the current build version, and update it if needed
@@ -385,6 +409,13 @@ def build_and_upload_prototype_build(scheme:, output_app_name:, appcenter_app_na
       dsym_path: lane_context[SharedValues::DSYM_OUTPUT_PATH]
     )
 
+    upload_gutenberg_sourcemaps(
+      sentry_project_slug:,
+      release_version: release_version_current,
+      build_version: build_number,
+      app_identifier:
+    )
+
     # Post PR Comment
     comment_body = prototype_build_details_comment(
       app_display_name: output_app_name,
@@ -410,6 +441,7 @@ def build_and_upload_prototype_build(scheme:, output_app_name:, appcenter_app_na
     buildkite_annotate(context: "appcenter-info-#{output_app_name}", style: 'info', message: "#{output_app_name} [App Center Build](#{appcenter_install_url}) Info:\n\n#{list}")
   end
   # rubocop:enable Metrics/AbcSize
+  # rubocop:enable Metrics/ParameterLists
 
   def inject_buildkite_analytics_environment(xctestrun_path:)
     require 'plist'
@@ -464,4 +496,41 @@ def upload_build_to_app_center(
       notify_testers: false
     )
   end
+
+  def upload_gutenberg_sourcemaps(sentry_project_slug:, release_version:, build_version:, app_identifier:)
+    # The bundle and source map files are the same for all architectures.
+    gutenberg_bundle = File.join(PROJECT_ROOT_FOLDER, 'Pods/Gutenberg/Frameworks/Gutenberg.xcframework/ios-arm64/Gutenberg.framework')
+
+    Dir.mktmpdir do |sourcemaps_folder|
+      # It's important that the bundle and source map files have specific names, otherwise, Sentry
+      # won't symbolicate the stack traces.
+      FileUtils.cp(File.join(gutenberg_bundle, 'App.js'), File.join(sourcemaps_folder, 'main.jsbundle'))
+      FileUtils.cp(File.join(gutenberg_bundle, 'App.composed.js.map'), File.join(sourcemaps_folder, 'main.jsbundle.map'))
+
+      # To generate the full release version string to attach the source maps, we need to specify:
+      # - App identifier
+      # - Release version
+      # - Build version
+      # This conforms to the following format: <app_identifier>@<release_version>+<build_version>
+      # Here are a couple of examples:
+      # - Prototype build: com.jetpack.alpha@24.2+pr22654-07765b3
+      # - App Store build: org.wordpress@24.1+24.1.0.3
+
+      sentry_upload_sourcemap(
+        auth_token: get_required_env('SENTRY_AUTH_TOKEN'),
+        org_slug: SENTRY_ORG_SLUG,
+        project_slug: sentry_project_slug,
+        version: release_version,
+        dist: build_version,
+        build: build_version,
+        app_identifier:,
+        # When the React native bundle is generated, the source map file references
+        # include the local machine path, with the `rewrite` and `strip_common_prefix`
+        # options Sentry automatically strips this part.
+        rewrite: true,
+        strip_common_prefix: true,
+        sourcemap: sourcemaps_folder
+      )
+    end
+  end
 end