ref(issues): improve similar issues stacktrace diff

static/app/components/issueDiff/index.tsx

@@ -172,7 +172,7 @@ class IssueDiff extends Component<Props, State> {
               key={i}
               base={value}
               target={targetEvent[i] ?? ''}
-              type="words"
+              type="lines"
             />
           ))}
       </StyledIssueDiff>

static/app/components/replays/diff/replayTextDiff.tsx

@@ -52,7 +52,7 @@ export function ReplayTextDiff() {
         </After>
       </ContentSliderDiff.Header>
       <SplitDiffScrollWrapper>
-        <SplitDiff base={leftBody ?? ''} target={rightBody ?? ''} type="words" />
+        <SplitDiff base={leftBody ?? ''} target={rightBody ?? ''} type="lines" />
       </SplitDiffScrollWrapper>
     </Container>
   );

static/app/components/splitDiff.tsx

@@ -26,28 +26,71 @@ type Props = {
 function SplitDiff({className, type = 'lines', base, target}: Props) {
   const diffFn = diffFnMap[type];
 
-  const baseLines = base.split('\n');
-  const targetLines = target.split('\n');
-  const [largerArray] =
-    baseLines.length > targetLines.length
-      ? [baseLines, targetLines]
-      : [targetLines, baseLines];
-  const results = largerArray.map((_line, index) =>
-    diffFn(baseLines[index] || '', targetLines[index] || '', {newlineIsToken: true})
-  );
+  const results = diffFn(base, target, {newlineIsToken: true});
+
+  // split one change that includes multiple lines into one change per line (for formatting)
+  const processResults = (): Change[][] => {
+    let currentLine: Change[] = [];
+    const processedLines: Change[][] = [];
+    for (const change of results) {
+      const lines = change.value.split('\n');
+      for (let i = 0; i < lines.length; i++) {
+        const lineValue = lines[i];
+        if (lineValue !== undefined && lineValue !== '') {
+          currentLine.push({
+            value: lineValue,
+            added: change.added,
+            removed: change.removed,
+          });
+        }
+        if (i < lines.length - 1) {
+          processedLines.push(currentLine);
+          currentLine = [];
+        }
+      }
+    }
+    if (currentLine.length > 0) {
+      processedLines.push(currentLine);
+    }
+    return processedLines;
+  };
+
+  const groupedChanges = processResults();
 
   return (
     <SplitTable className={className} data-test-id="split-diff">
       <SplitBody>
-        {results.map((line, j) => {
+        {groupedChanges.map((line, j) => {
           const highlightAdded = line.find(result => result.added);
           const highlightRemoved = line.find(result => result.removed);
 
+          // Apply word-level diffing only to lines that have changes
+          const displayData =
+            highlightAdded || highlightRemoved
+              ? (() => {
+                  const leftText = line.reduce(
+                    (acc, result) => (result.added ? acc : acc + result.value),
+                    ''
+                  );
+                  const rightText = line.reduce(
+                    (acc, result) => (result.removed ? acc : acc + result.value),
+                    ''
+                  );
+
+                  // Handle edge cases where text might be empty
+                  if (!leftText && !rightText) {
+                    return line; // Return original line if both texts are empty
+                  }
+
+                  return diffWords(leftText, rightText);
+                })()
+              : line;
+
           return (
             <tr key={j}>
               <Cell isRemoved={highlightRemoved}>
                 <Line>
-                  {line
+                  {displayData
                     .filter(result => !result.added)
                     .map((result, i) => (
                       <Word key={i} isRemoved={result.removed}>
@@ -61,7 +104,7 @@ function SplitDiff({className, type = 'lines', base, target}: Props) {
 
               <Cell isAdded={highlightAdded}>
                 <Line>
-                  {line
+                  {displayData
                     .filter(result => !result.removed)
                     .map((result, i) => (
                       <Word key={i} isAdded={result.added}>