🐛 Fix Shopify Custom Pixel actions being marked as background events, flatten ui_extension_errored context (#4946)

Author: lierniel

packages/browser-rum-shopify/src/boot/patchSandboxedIframeApis.ts

@@ -11,8 +11,10 @@ import { globalObject } from '@datadog/browser-core'
  * denied without Permissions Policy delegation), but the SDK only catches an async rejection.
  * - `getPristineWindow()` creates a nested iframe to read an unpatched `URL` constructor; that
  * nested iframe's `contentWindow` is cross-origin here, and reading a property off it throws.
+ * - `document.hasFocus()` always returns `false`: the pixel iframe has no focusable UI, so it can
+ * never hold browser focus regardless of whether the customer is actively looking at the page.
  * Shimming these away makes the SDK fall back to code paths that do work in this context
- * (`document.cookie`, same-document promise chaining, `globalObject.URL`).
+ * (`document.cookie`, same-document promise chaining, `globalObject.URL`, always-focused state).
  */
 export function patchSandboxedIframeApis() {
   disableProperty(globalObject, 'cookieStore')
@@ -24,6 +26,12 @@ export function patchSandboxedIframeApis() {
     },
     configurable: true,
   })
+
+  Object.defineProperty(document, 'hasFocus', {
+    value: () => true,
+    configurable: true,
+    writable: true,
+  })
 }
 
 function disableProperty(target: object, key: string) {

packages/browser-rum-shopify/src/domain/shopifyBindings.spec.ts

@@ -122,7 +122,7 @@ describe('initShopifyBindings', () => {
     expect(stopAction).toHaveBeenCalledWith('element-without-id', { type: 'click' })
   })
 
-  it('maps "ui_extension_errored" to addError with the extension context', () => {
+  it('maps "ui_extension_errored" to addError with the flattened extension context', () => {
     const { rumPublicApi, addError } = createFakeRumPublicApi()
     const { analytics, emit } = createFakeAnalytics()
 
@@ -138,18 +138,20 @@ describe('initShopifyBindings', () => {
           extensionName: 'my-extension',
           extensionTarget: 'purchase.checkout.block.render',
           type: 'RUNTIME',
+          appId: 'gid://shopify/App/1',
           appName: 'my-app',
+          appVersion: '1.2.3',
         },
       },
     })
 
     expect(addError).toHaveBeenCalledWith(jasmine.objectContaining({ message: 'Boom', stack: 'stack trace' }), {
-      extension: {
-        name: 'my-extension',
-        target: 'purchase.checkout.block.render',
-        type: 'RUNTIME',
-        appName: 'my-app',
-      },
+      extensionName: 'my-extension',
+      extensionTarget: 'purchase.checkout.block.render',
+      extensionErrorType: 'RUNTIME',
+      appId: 'gid://shopify/App/1',
+      appName: 'my-app',
+      appVersion: '1.2.3',
     })
   })
 })

packages/browser-rum-shopify/src/domain/shopifyBindings.ts

@@ -11,7 +11,9 @@ export interface ErrorData {
   extensionName?: string
   extensionTarget?: string
   type?: string
+  appId?: string
   appName?: string
+  appVersion?: string
 }
 
 // Matches /checkouts/*, /checkout, including locale-prefixed paths.
@@ -54,12 +56,12 @@ export function initShopifyBindings(rumPublicApi: RumPublicApi, analytics: Shopi
     const err = new Error(error?.message)
     err.stack = error?.trace
     rumPublicApi.addError(err, {
-      extension: {
-        name: error?.extensionName,
-        target: error?.extensionTarget,
-        type: error?.type,
-        appName: error?.appName,
-      },
+      extensionName: error?.extensionName,
+      extensionTarget: error?.extensionTarget,
+      extensionErrorType: error?.type,
+      appId: error?.appId,
+      appName: error?.appName,
+      appVersion: error?.appVersion,
     })
   })
 }