Load local bundle into Salesforce static resource

Author: BeltranBulbarellaDD

.gitlab-ci.yml

@@ -254,29 +254,13 @@ e2e:
     - yarn build:apps
     # Browsers are pre-installed in the CI image. If playwright (current or pinned 1.40.1)
     # is upgraded without rebuilding the image, this job will crash — rebuild the image to fix it.
-    - FORCE_COLOR=1 PW_BROWSER=$BROWSER yarn test:e2e --project=$BROWSER --grep-invert @salesforce
-  after_script:
-    - node ./scripts/test/export-test-result.ts e2e
-
-salesforce-e2e:
-  extends:
-    - .base-configuration
-    - .test-allowed-branches
-    - .resource-allocation-4-cpus
-  resource_group: salesforce-engrumdev
-  interruptible: true
-  artifacts:
-    when: always
-    reports:
-      junit: test-report/e2e/*.xml
-  script:
-    - yarn
-    - yarn build
-    - yarn build:apps
-    - node scripts/salesforce-lwc-app.ts auth
-    - export SF_TARGET_ORG=sf-lwc-ci
-    - yarn salesforce:deploy-bundle
-    - FORCE_COLOR=1 PW_BROWSER=chromium yarn test:e2e --project=chromium --grep @salesforce
+    - |
+      if [ "$BROWSER" = "chromium" ]; then
+        node scripts/salesforce-lwc-app.ts auth
+        FORCE_COLOR=1 PW_BROWSER=$BROWSER yarn test:e2e --project=$BROWSER
+      else
+        FORCE_COLOR=1 PW_BROWSER=$BROWSER yarn test:e2e --project=$BROWSER --grep-invert @salesforce
+      fi
   after_script:
     - node ./scripts/test/export-test-result.ts e2e
 

package.json

@@ -16,7 +16,6 @@
     "build:bundle": "yarn workspaces foreach --all --parallel run build:bundle",
     "build:apps": "node scripts/build/build-test-apps.ts",
     "salesforce:deploy-app": "yarn workspace @datadog/browser-rum-slim build:bundle && node scripts/salesforce-lwc-app.ts deploy-app",
-    "salesforce:deploy-bundle": "yarn workspace @datadog/browser-rum-slim build:bundle && node scripts/salesforce-lwc-app.ts deploy-bundle",
     "salesforce:open": "node scripts/salesforce-lwc-app.ts open-url",
     "build:docs:json": "typedoc --logLevel Verbose --json ./generated-docs.json",
     "build:docs:html": "typedoc --out ./generated-docs",

scripts/build/build-test-apps.ts

@@ -35,6 +35,7 @@ const APPS: AppConfig[] = [
   { name: 'vue-router-app' },
   { name: 'nuxt-app' },
   { name: 'instrumentation-overhead' },
+  { name: 'sf-lwc-app', builderFn: buildSalesforceLwcApp },
 
   // React Router apps
   { name: 'react-router-app' },
@@ -157,6 +158,14 @@ async function buildApp(appName: string) {
   await command`yarn build`.withCurrentWorkingDirectory(appPath).runAsync()
 }
 
+function buildSalesforceLwcApp() {
+  const sourceBundle = 'packages/browser-rum-slim/bundle/datadog-rum-slim.js'
+  const targetBundle = 'test/apps/sf-lwc-app/force-app/main/default/staticresources/datadog_rum_slim.js'
+
+  printLog('Building app at test/apps/sf-lwc-app...')
+  fs.copyFileSync(sourceBundle, targetBundle)
+}
+
 async function buildReactRouterV6App() {
   await buildGeneratedApp('react-router-app', 'react-router-v6-app', async (appPath) => {
     await modifyFile(path.join(appPath, 'package.json'), (content: string) =>

scripts/salesforce-lwc-app.ts

@@ -1,5 +1,4 @@
-import { chmodSync, copyFileSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
-import { createHash } from 'node:crypto'
+import { chmodSync, copyFileSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs'
 import { dirname, resolve } from 'node:path'
 import { spawnSync } from 'node:child_process'
 import { fileURLToPath } from 'node:url'
@@ -13,9 +12,6 @@ const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..')
 const salesforceAppDir = resolve(repositoryRoot, 'test/apps/sf-lwc-app')
 const bundlePath = resolve(repositoryRoot, 'packages/browser-rum-slim/bundle/datadog-rum-slim.js')
 const stableStaticResourcePath = resolve(salesforceAppDir, 'force-app/main/default/staticresources/datadog_rum_slim.js')
-const generatedStateDir = resolve(salesforceAppDir, '.sf-e2e')
-const generatedStaticResourcesDir = resolve(generatedStateDir, 'force-app/main/default/staticresources')
-const resourceNamePath = resolve(generatedStateDir, 'resource-name')
 const salesforceHomePath = '/lightning/app/c__SF_LWC_App/page/home'
 const defaultTargetOrg = 'sf-lwc-ci'
 const salesforceCliPackage = '@salesforce/cli@2.139.6'
@@ -30,14 +26,11 @@ runMain(() => {
     case 'deploy-app':
       deployApp()
       break
-    case 'deploy-bundle':
-      deployBundle()
-      break
     case 'open-url':
       process.stdout.write(`${buildOpenUrl()}\n`)
       break
     default:
-      throw new Error('Usage: node scripts/salesforce-lwc-app.ts <auth|deploy-app|deploy-bundle|open-url>')
+      throw new Error('Usage: node scripts/salesforce-lwc-app.ts <auth|deploy-app|open-url>')
   }
 })
 
@@ -77,32 +70,45 @@ function deployApp() {
 
   printLog(`Deploying Salesforce LWC app to ${targetOrg}...`)
   copyFileSync(bundlePath, stableStaticResourcePath)
-  runSf(['project', 'deploy', 'start', '--target-org', targetOrg, '--source-dir', 'force-app'], { stdio: 'inherit' })
 
-  printLog('Salesforce LWC app deployed.')
-}
+  const deployArgs = [
+    'project',
+    'deploy',
+    'start',
+    '--target-org',
+    targetOrg,
+    '--source-dir',
+    'force-app',
+    '--ignore-conflicts',
+  ]
+  const spawnOptions: SpawnSyncOptionsWithStringEncoding = { encoding: 'utf8', cwd: salesforceAppDir, stdio: 'pipe' }
 
-function deployBundle() {
-  const targetOrg = getTargetOrg()
-  const bundle = readFileSync(bundlePath)
-  const resourceName = computeResourceName(bundle)
-
-  printLog(`Deploying Salesforce LWC bundle ${resourceName} to ${targetOrg}...`)
-  writeFileSync(stableStaticResourcePath, bundle)
-  writeGeneratedStaticResource(resourceName, bundle)
-  runSf(['project', 'deploy', 'start', '--target-org', targetOrg, '--source-dir', generatedStaticResourcesDir], {
-    stdio: 'inherit',
-  })
-  writeFileSync(resourceNamePath, `${resourceName}\n`)
-  printLog(`Salesforce LWC bundle deployed: ${resourceName}`)
+  let result = spawnSync('sf', deployArgs, spawnOptions)
+  if (result.error && (result.error as NodeJS.ErrnoException).code === 'ENOENT') {
+    result = spawnSync('yarn', ['dlx', '-p', salesforceCliPackage, 'sf', ...deployArgs], spawnOptions)
+  }
+
+  if (result.stdout) {
+    process.stdout.write(result.stdout)
+  }
+
+  if (result.status !== 0) {
+    const output = (result.stdout ?? '') + (result.stderr ?? '')
+    // Source tracking fails on orgs that don't support it (e.g. developer orgs), but components
+    // are deployed successfully. Treat this specific post-deploy tracking error as non-fatal.
+    if (!output.includes('Could not find HEAD')) {
+      throw new Error(result.stderr || result.stdout || result.error?.message)
+    }
+    printLog('Warning: Source tracking update failed (Could not find HEAD). Components were deployed successfully.')
+  }
+
+  printLog('Salesforce LWC app deployed.')
 }
 
 function buildOpenUrl(): string {
   const targetOrg = getTargetOrg()
-  const resourceName = readResourceName()
   const path = new URL(salesforceHomePath, 'https://salesforce.local')
 
-  path.searchParams.set('c__datadogResourceName', resourceName)
   path.searchParams.set(
     'c__datadogInitConfiguration',
     JSON.stringify({
@@ -195,31 +201,3 @@ function stripCliControlCharacters(output: string): string {
 function getTargetOrg(): string {
   return process.env.SF_TARGET_ORG || defaultTargetOrg
 }
-
-function computeResourceName(bundle: Buffer): string {
-  const hash = createHash('sha256').update(bundle).digest('hex').slice(0, 12)
-  return `datadog_rum_slim_${hash}`
-}
-
-function writeGeneratedStaticResource(resourceName: string, bundle: Buffer) {
-  rmSync(generatedStaticResourcesDir, { recursive: true, force: true })
-  mkdirSync(generatedStaticResourcesDir, { recursive: true })
-  writeFileSync(resolve(generatedStaticResourcesDir, `${resourceName}.js`), bundle)
-  writeFileSync(
-    resolve(generatedStaticResourcesDir, `${resourceName}.resource-meta.xml`),
-    `<?xml version="1.0" encoding="UTF-8" ?>
-<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
-    <cacheControl>Private</cacheControl>
-    <contentType>application/javascript</contentType>
-</StaticResource>
-`
-  )
-}
-
-function readResourceName(): string {
-  try {
-    return readFileSync(resourceNamePath, 'utf8').trim()
-  } catch {
-    throw new Error('SF LWC resource name not found. Run `yarn salesforce:deploy-bundle` first.')
-  }
-}

test/apps/sf-lwc-app/.gitignore

@@ -1,4 +1,3 @@
 .sf
 .sfdx
-.sf-e2e
-/force-app/main/default/staticresources/datadog_rum_slim.js
+/force-app/main/default/staticresources/datadog_rum_slim.js

test/apps/sf-lwc-app/README.md

@@ -15,7 +15,7 @@ This app is Lightning-only.
 
 The Salesforce flow uses the Salesforce CLI. Authenticate once, then deploy/open/test through the CLI alias.
 
-Credentials are set as CI variables. 
+Credentials are set as CI variables.
 
 For local overrides, set the matching environment variables from the repository root:
 
@@ -32,8 +32,6 @@ Then authenticate the default `sf-lwc-ci` alias:
 node scripts/salesforce-lwc-app.ts auth
 ```
 
-All Salesforce commands default to `sf-lwc-ci`. To use another authenticated alias, set `SF_TARGET_ORG` for the command.
-
 ## Initial App Deploy
 
 The full app deploy is only needed when Salesforce metadata changes or the org is being prepared from scratch:
@@ -44,21 +42,21 @@ yarn salesforce:deploy-app
 
 This builds the local RUM slim bundle, copies it to the stable `datadog_rum_slim` static resource, deploys the app metadata, and assigns the `SF_LWC_App` permission set.
 
-## Bundle Deploy
+## Local Bundle
 
-After the app exists in the org, deploy only the current RUM slim bundle with:
+After the app exists in the org, regular test runs do not deploy the current SDK bundle to Salesforce.
+Build the test apps from the repository root instead:
 
 ```sh
-yarn salesforce:deploy-bundle
+yarn build:apps --app sf-lwc-app
 ```
 
-This builds the local RUM slim bundle, deploys it as a content-hashed static resource, for example `datadog_rum_slim_012345abcdef`, and writes that resource name to `.sf-e2e/resource-name`.
-
-Tests can load a different deployed bundle by opening Salesforce with `c__datadogResourceName=<resourceName>` in the query string. If the query parameter is absent, `c:datadogInit` falls back to the stable `datadog_rum_slim` static resource.
+This copies the locally built RUM slim bundle into the ignored stable `datadog_rum_slim` static resource file.
+Playwright fulfills Salesforce static resource requests with this local file during E2E tests.
 
 ## Open The App
 
-Open the app with the current hashed resource:
+Open the app with the E2E RUM configuration:
 
 ```sh
 yarn salesforce:open
@@ -67,7 +65,7 @@ yarn salesforce:open
 The printed URL is authenticated and should be treated as sensitive. It opens the app with RUM query parameters shaped like:
 
 ```text
-/lightning/app/c__SF_LWC_App/page/home?c__datadogResourceName=<resourceName>&c__applicationId=<applicationId>&c__clientToken=<clientToken>&c__env=dev&c__service=browser-sdk-salesforce-e2e&c__site=datadoghq.com
+/lightning/app/c__SF_LWC_App/page/home?c__datadogInitConfiguration=<configuration>
 ```
 
 To open the app without the generated query parameters:
@@ -78,13 +76,14 @@ sf org open --target-org sf-lwc-ci --path /lightning/app/c__SF_LWC_App/page/home
 
 ## Run E2E Tests
 
-Deploy the current bundle, then run the Salesforce scenario:
+Build the SDK and test apps, then run the Salesforce scenario:
 
 ```sh
-yarn salesforce:deploy-bundle
+yarn build
+yarn build:apps --app sf-lwc-app
 FORCE_COLOR=1 PW_BROWSER=chromium yarn test:e2e --project=chromium --grep @salesforce
 ```
 
 ## CI
 
-The `salesforce-e2e` job retrieves Salesforce credentials through `scripts/lib/secrets.ts`, authenticates `sf-lwc-ci`, deploys only the generated hashed bundle, and runs the `@salesforce` Playwright scenario. The regular `e2e` matrix excludes `@salesforce`.
+The regular `e2e` job runs the Salesforce scenario in the Chromium matrix entry only. It authenticates `sf-lwc-ci`, opens the deployed Salesforce app, and serves the locally built SDK bundle through Playwright route fulfillment instead of deploying a bundle to Salesforce for each run.

test/apps/sf-lwc-app/force-app/main/default/lwc/datadogInit/datadogInit.js

@@ -10,7 +10,6 @@ const DATADOG_PARAMS = [
   'c__applicationId',
   'c__clientToken',
   'c__datadogInitConfiguration',
-  'c__datadogResourceName',
   'c__env',
   'c__service',
   'c__site',
@@ -75,10 +74,8 @@ export default class DatadogInit extends NavigationMixin(LightningElement) {
 
   loadDatadogRum() {
     const searchParams = new URLSearchParams(window.location.search)
-    const resourceName = searchParams.get('c__datadogResourceName')
-    const resourceUrl = resourceName ? `/resource/${encodeURIComponent(resourceName)}` : datadogRumSlim
 
-    return loadScript(this, resourceUrl).then(() => {
+    return loadScript(this, datadogRumSlim).then(() => {
       const initConfig = this.getInitConfiguration(searchParams)
       if (!initConfig.applicationId || !initConfig.clientToken) {
         window.console.warn('Datadog RUM not initialized: missing applicationId or clientToken')

test/e2e/lib/framework/createTest.ts

@@ -1,3 +1,4 @@
+import { readFile } from 'node:fs/promises'
 import type { LogsInitConfiguration } from '@datadog/browser-logs'
 import type { DebuggerInitConfiguration } from '@datadog/browser-debugger'
 import type { RumInitConfiguration, RemoteConfiguration } from '@datadog/browser-rum-core'
@@ -21,7 +22,7 @@ import {
   VUE_ROUTER_APP_PORT,
   VUE_ROUTER_V4_APP_PORT,
 } from '../helpers/playwright'
-import { buildSalesforceLwcUrl } from '../helpers/salesforceApp'
+import { buildSalesforceLwcUrl, salesforceLwcBundlePath } from '../helpers/salesforceApp'
 import { IntakeRegistry } from './intakeRegistry'
 import { flushEvents } from './flushEvents'
 import type { Servers } from './httpServers'
@@ -453,6 +454,12 @@ function declareTest(title: string, setupOptions: SetupOptions, factory: SetupFa
     servers.crossOrigin.bindServerApp(createMockServerApp(servers, setup))
 
     if (setupOptions.salesforceApp) {
+      await page.route(/\/resource(?:\/[^/?#]+)?\/datadog_rum_slim(?:\.js)?(?:[/?#].*)?$/, async (route) => {
+        await route.fulfill({
+          body: await readFile(salesforceLwcBundlePath),
+          contentType: 'application/javascript',
+        })
+      })
       await page.route('*/**/api/v2/rum**', async (route) => {
         const request = route.request()
         const infos = computeIntakeRequestInfos(request)

test/e2e/lib/helpers/salesforceApp.ts

@@ -3,6 +3,11 @@ import { resolve } from 'node:path'
 
 const repositoryRoot = resolve(__dirname, '../../../..')
 
+export const salesforceLwcBundlePath = resolve(
+  repositoryRoot,
+  'test/apps/sf-lwc-app/force-app/main/default/staticresources/datadog_rum_slim.js'
+)
+
 export function buildSalesforceLwcUrl(): string {
   const result = spawnSync('node', ['scripts/salesforce-lwc-app.ts', 'open-url'], {
     encoding: 'utf8',