[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.112.0
+  commit: 6a50374aa5d1dd6475826a61ea0801b61e90fdea
 github_org: wordpress-mobile
 repo_name: gutenberg-mobile

Podfile

@@ -132,9 +132,9 @@ abstract_target 'Apps' do
 
   # Production
 
-  pod 'Automattic-Tracks-iOS', '~> 3.0'
+  # pod 'Automattic-Tracks-iOS', '~> 3.0'
   # While in PR
-  # pod 'Automattic-Tracks-iOS', git: 'https://github.com/Automattic/Automattic-Tracks-iOS.git', branch: ''
+  pod 'Automattic-Tracks-iOS', git: 'https://github.com/Automattic/Automattic-Tracks-iOS.git', branch: 'add/sentry-js-exception'
   # Local Development
   # pod 'Automattic-Tracks-iOS', path: '~/Projects/Automattic-Tracks-iOS'
 

Podfile.lock

@@ -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.20.0):
+    - Sentry/Core (= 8.20.0)
+    - SentryPrivate (= 8.20.0)
+  - Sentry/Core (8.20.0):
+    - SentryPrivate (= 8.20.0)
+  - SentryPrivate (8.20.0)
   - Sodium (0.9.1)
   - Starscream (4.0.6)
   - SVProgressHUD (2.2.5)
@@ -99,14 +99,14 @@ DEPENDENCIES:
   - AlamofireNetworkActivityIndicator (~> 2.4)
   - AppCenter (~> 5.0)
   - AppCenter/Distribute (~> 5.0)
-  - Automattic-Tracks-iOS (~> 3.0)
+  - Automattic-Tracks-iOS (from `https://github.com/Automattic/Automattic-Tracks-iOS.git`, branch `add/sentry-js-exception`)
   - 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.112.0.podspec`)
+  - Gutenberg (from `https://cdn.a8c-ci.services/gutenberg-mobile/Gutenberg-6a50374aa5d1dd6475826a61ea0801b61e90fdea.podspec`)
   - JTAppleCalendar (~> 8.0.5)
   - Kanvas (~> 1.4.4)
   - MediaEditor (>= 1.2.2, ~> 1.2)
@@ -134,7 +134,6 @@ SPEC REPOS:
     - AlamofireImage
     - AlamofireNetworkActivityIndicator
     - AppCenter
-    - Automattic-Tracks-iOS
     - CocoaLumberjack
     - CropViewController
     - Down
@@ -169,11 +168,14 @@ SPEC REPOS:
     - ZIPFoundation
 
 EXTERNAL SOURCES:
+  Automattic-Tracks-iOS:
+    :branch: add/sentry-js-exception
+    :git: https://github.com/Automattic/Automattic-Tracks-iOS.git
   FSInteractiveMap:
     :git: https://github.com/wordpress-mobile/FSInteractiveMap.git
     :tag: 0.2.0
   Gutenberg:
-    :podspec: https://cdn.a8c-ci.services/gutenberg-mobile/Gutenberg-v1.112.0.podspec
+    :podspec: https://cdn.a8c-ci.services/gutenberg-mobile/Gutenberg-6a50374aa5d1dd6475826a61ea0801b61e90fdea.podspec
   WordPressAuthenticator:
     :commit: fa06fca7178b268d382d91861752b3be0729e8a8
     :git: https://github.com/wordpress-mobile/WordPressAuthenticator-iOS.git
@@ -182,6 +184,9 @@ EXTERNAL SOURCES:
     :git: https://github.com/wordpress-mobile/WordPressKit-iOS.git
 
 CHECKOUT OPTIONS:
+  Automattic-Tracks-iOS:
+    :commit: f7920171e01f7b42cca94cefe090940b7e64c8d0
+    :git: https://github.com/Automattic/Automattic-Tracks-iOS.git
   FSInteractiveMap:
     :git: https://github.com/wordpress-mobile/FSInteractiveMap.git
     :tag: 0.2.0
@@ -204,7 +209,7 @@ SPEC CHECKSUMS:
   FSInteractiveMap: a396f610f48b76cb540baa87139d056429abda86
   Gifu: 416d4e38c4c2fed012f019e0a1d3ffcb58e5b842
   Gridicons: 4455b9f366960121430e45997e32112ae49ffe1d
-  Gutenberg: ba97dd36571958f64108233a692e6057f5010dc2
+  Gutenberg: ff644c2a62eda321e735125d931dc27cec98a893
   JTAppleCalendar: 16c6501b22cb27520372c28b0a2e0b12c8d0cd73
   Kanvas: cc027f8058de881a4ae2b5aa5f05037b6d054d08
   MediaEditor: d08314cfcbfac74361071a306b4bc3a39b3356ae
@@ -213,8 +218,8 @@ SPEC CHECKSUMS:
   OCMock: 43565190abc78977ad44a61c0d20d7f0784d35ab
   OHHTTPStubs: 90eac6d8f2c18317baeca36698523dc67c513831
   Reachability: 33e18b67625424e47b6cde6d202dce689ad7af96
-  Sentry: 8984a4ffb2b9bd2894d74fb36e6f5833865bc18e
-  SentryPrivate: 2f0c9ba4c3fc993f70eab6ca95673509561e0085
+  Sentry: a8d7b373b9f9868442b02a0c425192f693103cbf
+  SentryPrivate: 006b24af16828441f70e2ab6adf241bd0a8ad130
   Sodium: 23d11554ecd556196d313cf6130d406dfe7ac6da
   Starscream: fb2c4510bebf908c62bd383bcf05e673720e91fd
   SVProgressHUD: 1428aafac632c1f86f62aa4243ec12008d7a51d6
@@ -236,6 +241,6 @@ SPEC CHECKSUMS:
   ZendeskSupportSDK: 3a8e508ab1d9dd22dc038df6c694466414e037ba
   ZIPFoundation: d170fa8e270b2a32bef9dcdcabff5b8f1a5deced
 
-PODFILE CHECKSUM: cde235b576e5cd0b95b5a64d6bc75628c7adad12
+PODFILE CHECKSUM: b2628bd1c79c3a469983ab29ea29b5ef594968b2
 
 COCOAPODS: 1.14.2

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

@@ -1353,6 +1353,12 @@ extension GutenbergViewController: PostEditorNavigationBarManagerDelegate {
         }
     }
 
+    func gutenbergDidRequestLogException(_ exception: [AnyHashable: Any], with callback: @escaping () -> Void) {
+        DispatchQueue.main.async {
+            WordPressAppDelegate.crashLogging?.logJavaScriptException(exception, callback: callback)
+        }
+    }
+
     func navigationBarManager(_ manager: PostEditorNavigationBarManager, closeWasPressed sender: UIButton) {
         requestHTML(for: .close)
     }

fastlane/lanes/build.rb

@@ -175,6 +175,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')
@@ -220,6 +227,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
@@ -271,6 +285,14 @@
       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
@@ -288,7 +310,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
 
@@ -307,7 +330,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
 
@@ -339,7 +363,7 @@ 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:)
+  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
@@ -394,6 +418,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: sentry_project_slug,
+      release_version: release_version_current,
+      build_version: build_number,
+      app_identifier: app_identifier
+    )
+
     # Post PR Comment
     comment_body = prototype_build_details_comment(
       app_display_name: output_app_name,
@@ -450,4 +481,41 @@ def upload_build_to_testflight(whats_new_path:)
       changelog: File.read(whats_new_path)
     )
   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: 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