From 5c65cbade11850af8ee5e42c0df1f166e6612ea4 Mon Sep 17 00:00:00 2001
From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>
Date: Wed, 17 Apr 2024 10:20:08 -0700
Subject: [PATCH] ref(replays): add error boundaries around breadcrumb rows

---
 .../replays/breadcrumbs/breadcrumbItem.tsx    | 130 +++++++++---------
 1 file changed, 67 insertions(+), 63 deletions(-)

diff --git a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx b/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx
index a5c227e074fa60..3906d4a33ac359 100644
--- a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx
+++ b/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx
@@ -5,6 +5,7 @@ import beautify from 'js-beautify';
 
 import ProjectAvatar from 'sentry/components/avatar/projectAvatar';
 import {CodeSnippet} from 'sentry/components/codeSnippet';
+import ErrorBoundary from 'sentry/components/errorBoundary';
 import Link from 'sentry/components/links/link';
 import ObjectInspector from 'sentry/components/objectInspector';
 import PanelItem from 'sentry/components/panels/panelItem';
@@ -80,71 +81,74 @@ function BreadcrumbItem({
       <IconWrapper color={color} hasOccurred>
         {icon}
       </IconWrapper>
-      <CrumbDetails>
-        <Flex column>
-          <TitleContainer>
-            {<Title>{title}</Title>}
-            {onClick ? (
-              <TimestampButton
-                startTimestampMs={startTimestampMs}
-                timestampMs={frame.timestampMs}
-              />
-            ) : null}
-          </TitleContainer>
-
-          {typeof description === 'string' ||
-          (description !== undefined && isValidElement(description)) ? (
-            <Description title={description} showOnlyOnOverflow isHoverable>
-              {description}
-            </Description>
-          ) : (
-            <InspectorWrapper>
-              <ObjectInspector
-                data={description}
-                expandPaths={expandPaths}
-                onExpand={onInspectorExpanded}
-                theme={{
-                  TREENODE_FONT_SIZE: '0.7rem',
-                  ARROW_FONT_SIZE: '0.5rem',
-                }}
+
+      <ErrorBoundary mini>
+        <CrumbDetails>
+          <Flex column>
+            <TitleContainer>
+              {<Title>{title}</Title>}
+              {onClick ? (
+                <TimestampButton
+                  startTimestampMs={startTimestampMs}
+                  timestampMs={frame.timestampMs}
+                />
+              ) : null}
+            </TitleContainer>
+
+            {typeof description === 'string' ||
+            (description !== undefined && isValidElement(description)) ? (
+              <Description title={description} showOnlyOnOverflow isHoverable>
+                {description}
+              </Description>
+            ) : (
+              <InspectorWrapper>
+                <ObjectInspector
+                  data={description}
+                  expandPaths={expandPaths}
+                  onExpand={onInspectorExpanded}
+                  theme={{
+                    TREENODE_FONT_SIZE: '0.7rem',
+                    ARROW_FONT_SIZE: '0.5rem',
+                  }}
+                />
+              </InspectorWrapper>
+            )}
+          </Flex>
+
+          {'data' in frame && frame.data && 'mutations' in frame.data ? (
+            <div>
+              <OpenReplayComparisonButton
+                replay={replay}
+                leftTimestamp={frame.offsetMs}
+                rightTimestamp={
+                  (frame.data.mutations.next?.timestamp ?? 0) -
+                  (replay?.getReplay().started_at.getTime() ?? 0)
+                }
               />
-            </InspectorWrapper>
-          )}
-        </Flex>
-
-        {'data' in frame && frame.data && 'mutations' in frame.data ? (
-          <div>
-            <OpenReplayComparisonButton
-              replay={replay}
-              leftTimestamp={frame.offsetMs}
-              rightTimestamp={
-                (frame.data.mutations.next?.timestamp ?? 0) -
-                (replay?.getReplay().started_at.getTime() ?? 0)
-              }
+            </div>
+          ) : null}
+
+          {extraction?.html ? (
+            <CodeContainer>
+              <CodeSnippet language="html" hideCopyButton>
+                {beautify.html(extraction?.html, {indent_size: 2})}
+              </CodeSnippet>
+            </CodeContainer>
+          ) : null}
+
+          {traces?.flattenedTraces.map((flatTrace, i) => (
+            <TraceGrid
+              key={i}
+              flattenedTrace={flatTrace}
+              onDimensionChange={onDimensionChange}
             />
-          </div>
-        ) : null}
-
-        {extraction?.html ? (
-          <CodeContainer>
-            <CodeSnippet language="html" hideCopyButton>
-              {beautify.html(extraction?.html, {indent_size: 2})}
-            </CodeSnippet>
-          </CodeContainer>
-        ) : null}
-
-        {traces?.flattenedTraces.map((flatTrace, i) => (
-          <TraceGrid
-            key={i}
-            flattenedTrace={flatTrace}
-            onDimensionChange={onDimensionChange}
-          />
-        ))}
-
-        {isErrorFrame(frame) || isFeedbackFrame(frame) ? (
-          <CrumbErrorIssue frame={frame} />
-        ) : null}
-      </CrumbDetails>
+          ))}
+
+          {isErrorFrame(frame) || isFeedbackFrame(frame) ? (
+            <CrumbErrorIssue frame={frame} />
+          ) : null}
+        </CrumbDetails>
+      </ErrorBoundary>
     </CrumbItem>
   );
 }