Browse Source

fix(replays): show all clicks in DOM events tab (#55378)

Temporary fix for https://github.com/getsentry/sentry/issues/54291; more
investigation to come

Show all clicks (both rage/dead and normal) in the DOM events tab (no
more missing clicks), but these are not yet mapped to HTML selectors.

Before:
<img width="1181" alt="SCR-20230829-kwjh"
src="https://github.com/getsentry/sentry/assets/56095982/c9bd2e8d-a321-4c40-9873-c2ac2bd21460">


After:
<img width="1206" alt="SCR-20230829-mcng"
src="https://github.com/getsentry/sentry/assets/56095982/ac3df2c6-65ec-4753-83ac-93ac3c730bd5">
Michelle Zhang 1 year ago
parent
commit
cec2d362b6

+ 7 - 1
static/app/utils/replays/extractDomNodes.tsx

@@ -12,7 +12,7 @@ import requestIdleCallback from 'sentry/utils/window/requestIdleCallback';
 
 export type Extraction = {
   frame: BreadcrumbFrame | SpanFrame;
-  html: string;
+  html: string | null;
   timestamp: number;
 };
 
@@ -146,6 +146,12 @@ class BreadcrumbReferencesPlugin {
         html: truncated,
         timestamp: frame.timestampMs,
       });
+    } else {
+      this.activities.push({
+        frame,
+        html: null,
+        timestamp: frame.timestampMs,
+      });
     }
 
     this.nextExtract = null;

+ 7 - 5
static/app/views/replays/detail/domMutations/domMutationRow.tsx

@@ -67,11 +67,13 @@ function DomMutationRow({
         </Row>
         {/* @ts-expect-error */}
         <Selector>{frame.message ?? ''}</Selector>
-        <CodeContainer>
-          <CodeSnippet language="html" hideCopyButton>
-            {beautify.html(html, {indent_size: 2})}
-          </CodeSnippet>
-        </CodeContainer>
+        {html ? (
+          <CodeContainer>
+            <CodeSnippet language="html" hideCopyButton>
+              {beautify.html(html, {indent_size: 2})}
+            </CodeSnippet>
+          </CodeContainer>
+        ) : null}
       </List>
     </MutationListItem>
   );