✅ Add Salesforce LWC Test Application.

.prettierignore

@@ -13,6 +13,7 @@ yarn.lock
 /generated-docs
 /developer-extension/.output
 /developer-extension/.wxt
+/test/apps/sf-lwc-app/*
 
 # Symlinks (prettier would otherwise resolve and overwrite the target file or replace the symlink with a regular file)
 /packages/browser-rum-slim/BROWSER_SUPPORT.md

eslint.config.ts

@@ -52,6 +52,7 @@ export default defineConfig(
       'test/apps/vue-router-v4-app',
       'test/apps/nuxt-app',
       'test/apps/nuxt-vue-router-v4-app',
+      'test/apps/sf-lwc-app',
       'sandbox',
       'coverage',
       'rum-events-format',

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

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

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

@@ -0,0 +1,24 @@
+# SF LWC App
+
+Salesforce DX project used to exercise browser-sdk behavior in a real Lightning Web Components runtime.
+
+This app is Lightning-only.
+
+## What It Contains
+
+- A Lightning app named `SF LWC App`
+- A trimmed Home page with Datadog test controls
+- A `Product Explorer` app page with three hardcoded editable products
+- `c:datadogInit` in the utility bar, backed by the `datadog_rum_slim` static resource
+
+## Deploy
+
+From this directory:
+
+```sh
+npm run setup -- -o engrumdev --ignore-conflicts
+```
+
+The setup script copies the local RUM slim bundle into the static resource, deploys the app, assigns the app permission set to the target user, and prints the app-specific Home URL.
+
+If prompted for a user. Log into 1Password and use `beltran.bulbarella@datadoghq.com.engrumdev`

test/apps/sf-lwc-app/config/project-scratch-def.json

@@ -0,0 +1,10 @@
+{
+  "orgName": "SF LWC App",
+  "edition": "Developer",
+  "features": ["EnableSetPasswordInApi"],
+  "settings": {
+    "lightningExperienceSettings": {
+      "enableS1DesktopEnabled": true
+    }
+  }
+}

test/apps/sf-lwc-app/force-app/main/default/applications/SF_LWC_App.app-meta.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CustomApplication xmlns="http://soap.sforce.com/2006/04/metadata">
+    <actionOverrides>
+        <actionName>Tab</actionName>
+        <content>SF_LWC_App_Home</content>
+        <formFactor>Large</formFactor>
+        <skipRecordTypeSelect>false</skipRecordTypeSelect>
+        <type>Flexipage</type>
+        <pageOrSobjectType>standard-home</pageOrSobjectType>
+    </actionOverrides>
+    <formFactors>Small</formFactors>
+    <formFactors>Large</formFactors>
+    <isNavAutoTempTabsDisabled>false</isNavAutoTempTabsDisabled>
+    <isNavPersonalizationDisabled>false</isNavPersonalizationDisabled>
+    <isNavTabPersistenceDisabled>false</isNavTabPersistenceDisabled>
+    <isOmniPinnedViewEnabled>false</isOmniPinnedViewEnabled>
+    <label>SF LWC App</label>
+    <navType>Standard</navType>
+    <setupExperience>all</setupExperience>
+    <tabs>standard-home</tabs>
+    <tabs>Product_Explorer</tabs>
+    <uiType>Lightning</uiType>
+    <utilityBar>SF_LWC_App_UtilityBar</utilityBar>
+</CustomApplication>

test/apps/sf-lwc-app/force-app/main/default/cspTrustedSites/browser_intake_datadoghq_com.cspTrustedSite-meta.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
+    <canAccessCamera>false</canAccessCamera>
+    <canAccessMicrophone>false</canAccessMicrophone>
+    <context>All</context>
+    <description>Datadog browser RUM intake for US1</description>
+    <endpointUrl>https://browser-intake-datadoghq.com</endpointUrl>
+    <isActive>true</isActive>
+    <isApplicableToConnectSrc>true</isApplicableToConnectSrc>
+    <isApplicableToFontSrc>false</isApplicableToFontSrc>
+    <isApplicableToFrameSrc>false</isApplicableToFrameSrc>
+    <isApplicableToImgSrc>false</isApplicableToImgSrc>
+    <isApplicableToMediaSrc>false</isApplicableToMediaSrc>
+    <isApplicableToStyleSrc>false</isApplicableToStyleSrc>
+</CspTrustedSite>

test/apps/sf-lwc-app/force-app/main/default/flexipages/Product_Explorer.flexipage-meta.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
+    <flexiPageRegions>
+        <itemInstances>
+            <componentInstance>
+                <componentName>productExplorer</componentName>
+                <identifier>productExplorer</identifier>
+            </componentInstance>
+        </itemInstances>
+        <name>main</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <masterLabel>Product Explorer</masterLabel>
+    <template>
+        <name>flexipage:defaultAppHomeTemplate</name>
+    </template>
+    <type>AppPage</type>
+</FlexiPage>

test/apps/sf-lwc-app/force-app/main/default/flexipages/SF_LWC_App_Home.flexipage-meta.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
+    <flexiPageRegions>
+        <itemInstances>
+            <componentInstance>
+                <componentName>customActionButtons</componentName>
+                <identifier>customActionButtons</identifier>
+            </componentInstance>
+        </itemInstances>
+        <name>top</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <masterLabel>SF LWC App Home</masterLabel>
+    <template>
+        <name>home:desktopTemplate</name>
+    </template>
+    <type>HomePage</type>
+</FlexiPage>

test/apps/sf-lwc-app/force-app/main/default/flexipages/SF_LWC_App_UtilityBar.flexipage-meta.xml

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
+    <flexiPageRegions>
+        <itemInstances>
+            <componentInstance>
+                <componentInstanceProperties>
+                    <name>applicationId</name>
+                    <value>1397744d-34f4-4a6a-a735-801e31c18221</value>
+                </componentInstanceProperties>
+                <componentInstanceProperties>
+                    <name>clientToken</name>
+                    <value>pub2ad3fe2578f01b9f329bd0ea4a2f08c5</value>
+                </componentInstanceProperties>
+                <componentInstanceProperties>
+                    <name>site</name>
+                    <value>datadoghq.com</value>
+                </componentInstanceProperties>
+                <componentInstanceProperties>
+                    <name>service</name>
+                    <value>browser-sdk-sandbox</value>
+                </componentInstanceProperties>
+                <componentInstanceProperties>
+                    <name>env</name>
+                    <value>dev</value>
+                </componentInstanceProperties>
+                <componentInstanceProperties>
+                    <name>eager</name>
+                    <type>decorator</type>
+                    <value>true</value>
+                </componentInstanceProperties>
+                <componentInstanceProperties>
+                    <name>height</name>
+                    <type>decorator</type>
+                    <value>240</value>
+                </componentInstanceProperties>
+                <componentInstanceProperties>
+                    <name>icon</name>
+                    <type>decorator</type>
+                    <value>metrics</value>
+                </componentInstanceProperties>
+                <componentInstanceProperties>
+                    <name>label</name>
+                    <type>decorator</type>
+                    <value>Datadog Init</value>
+                </componentInstanceProperties>
+                <componentInstanceProperties>
+                    <name>scrollable</name>
+                    <type>decorator</type>
+                    <value>false</value>
+                </componentInstanceProperties>
+                <componentInstanceProperties>
+                    <name>width</name>
+                    <type>decorator</type>
+                    <value>320</value>
+                </componentInstanceProperties>
+                <componentName>datadogInit</componentName>
+                <identifier>datadogInit</identifier>
+            </componentInstance>
+        </itemInstances>
+        <name>utilityItems</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <flexiPageRegions>
+        <name>backgroundComponents</name>
+        <type>Background</type>
+    </flexiPageRegions>
+    <masterLabel>SF LWC App UtilityBar</masterLabel>
+    <template>
+        <name>one:utilityBarTemplateDesktop</name>
+        <properties>
+            <name>isLeftAligned</name>
+            <value>true</value>
+        </properties>
+    </template>
+    <type>UtilityBar</type>
+</FlexiPage>

test/apps/sf-lwc-app/force-app/main/default/lwc/customActionButtons/customActionButtons.css

@@ -0,0 +1,49 @@
+.action-card {
+  background: #ffffff;
+  border: 1px solid #d8dde6;
+  border-radius: 0.75rem;
+  box-shadow: 0 6px 18px rgba(24, 24, 24, 0.08);
+  margin: 1.5rem auto;
+  max-width: 48rem;
+  padding: 1.5rem;
+}
+
+.action-card__header h2 {
+  color: #032d60;
+  font-size: 1.25rem;
+  margin: 0 0 0.25rem;
+}
+
+.action-card__header p {
+  color: #5c5c5c;
+  margin: 0;
+}
+
+.action-card__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.action-card__status {
+  color: #032d60;
+  font-size: 0.875rem;
+  margin-top: 1rem;
+}
+
+.selector-probe {
+  background: #0176d3;
+  border: 1px solid #0176d3;
+  border-radius: 0.25rem;
+  color: #ffffff;
+  cursor: pointer;
+  font: inherit;
+  min-height: 2rem;
+  padding: 0 1rem;
+}
+
+.selector-probe:hover {
+  background: #014486;
+  border-color: #014486;
+}

test/apps/sf-lwc-app/force-app/main/default/lwc/customActionButtons/customActionButtons.html

@@ -0,0 +1,135 @@
+<template>
+  <section class="action-card" data-testid="home-custom-actions">
+    <div class="action-card__header">
+      <h2>Datadog Custom Actions</h2>
+      <p>Use these buttons to send manual RUM custom actions from the home page.</p>
+    </div>
+    <div class="action-card__buttons">
+      <lightning-button
+        label="Custom Action 1"
+        variant="brand"
+        data-action-name="custom action 1"
+        data-testid="custom-action-1"
+        onclick="{handleActionClick}"
+      ></lightning-button>
+      <lightning-button
+        label="Custom Action 2"
+        variant="neutral"
+        data-action-name="custom action 2"
+        onclick="{handleActionClick}"
+      ></lightning-button>
+    </div>
+    <template lwc:if="{lastActionName}">
+      <p class="action-card__status">Last sent: {lastActionName}</p>
+    </template>
+  </section>
+  <section class="action-card">
+    <div class="action-card__header">
+      <h2>Datadog Custom Errors</h2>
+      <p>Use these buttons to send manual RUM custom errors from the home page.</p>
+    </div>
+    <div class="action-card__buttons">
+      <lightning-button
+        label="Custom Error 1"
+        variant="destructive"
+        data-error-name="custom error 1"
+        data-testid="custom-error-1"
+        onclick="{handleErrorClick}"
+      ></lightning-button>
+      <lightning-button
+        label="Custom Error 2"
+        variant="destructive-text"
+        data-error-name="custom error 2"
+        onclick="{handleErrorClick}"
+      ></lightning-button>
+    </div>
+    <template lwc:if="{lastErrorName}">
+      <p class="action-card__status">Last sent: {lastErrorName}</p>
+    </template>
+  </section>
+  <section class="action-card">
+    <div class="action-card__header">
+      <h2>Datadog Runtime Errors</h2>
+      <p>Use this button to trigger an unhandled error that should be captured via window.onerror.</p>
+    </div>
+    <div class="action-card__buttons">
+      <lightning-button
+        label="Runtime Error"
+        variant="destructive"
+        onclick="{handleRuntimeErrorClick}"
+      ></lightning-button>
+    </div>
+  </section>
+  <section class="action-card">
+    <div class="action-card__header">
+      <h2>Datadog Long Tasks</h2>
+      <p>Blocks the main thread to generate a long_task RUM event.</p>
+    </div>
+    <div class="action-card__buttons">
+      <lightning-button
+        label="Long Task"
+        variant="brand"
+        data-testid="long-task"
+        onclick="{handleLongTaskClick}"
+      ></lightning-button>
+    </div>
+  </section>
+  <section class="action-card">
+    <div class="action-card__header">
+      <h2>Datadog Vitals</h2>
+      <p>Add Duration Vital and Start/Stop Vital use the DD_RUM vitals API directly.</p>
+    </div>
+    <div class="action-card__buttons">
+      <lightning-button
+        label="Add Duration Vital"
+        variant="brand"
+        onclick="{handleAddDurationVitalClick}"
+      ></lightning-button>
+      <lightning-button
+        label="Start/Stop Vital"
+        variant="brand"
+        onclick="{handleStartStopVitalClick}"
+      ></lightning-button>
+    </div>
+  </section>
+  <section class="action-card">
+    <div class="action-card__header">
+      <h2>Datadog Resources</h2>
+      <p>Use these buttons to generate resource timing entries for fetch and XHR.</p>
+    </div>
+    <div class="action-card__buttons">
+      <lightning-button
+        label="Fetch Resource"
+        variant="brand"
+        onclick="{handleFetchResourceClick}"
+      ></lightning-button>
+      <lightning-button
+        label="XHR Resource"
+        variant="brand"
+        onclick="{handleXhrResourceClick}"
+      ></lightning-button>
+    </div>
+    <template lwc:if="{lastResourceName}">
+      <p class="action-card__status">Last requested: {lastResourceName}</p>
+    </template>
+  </section>
+  <section class="action-card">
+    <div class="action-card__header">
+      <h2>Datadog Selector Probe</h2>
+      <p>Use this button to compare the LWC internal click target with the automatic RUM click selector.</p>
+    </div>
+    <div class="action-card__buttons">
+      <button
+        class="selector-probe"
+        data-dd-action-name="inner selector probe button"
+        data-testid="inner-selector-probe-button"
+        onclick="{handleSelectorProbeClick}"
+      >
+        Inner Selector Probe
+      </button>
+    </div>
+    <template lwc:if="{lastSelectorProbe}">
+      <p class="action-card__status">Last probe: {lastSelectorProbe}</p>
+    </template>
+  </section>
+</template>