From adaf5eba3e8381d0b499257ab04d30d6f3fb4c93 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@meta.com>
Date: Thu, 7 Mar 2024 23:15:55 -0800
Subject: [PATCH] Fix component stacks for tsx, ts, and jsx files (#43370)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43370

Component stacks with files ending in .ts, .tsx, or .jsx were skipped in LogBox reporting. This diff fixes the regex.

Changelog:
[General][Fixed] - Support .tsx, .ts, and .jsx in component stacks

Reviewed By: yungsters

Differential Revision: D54638526

fbshipit-source-id: a5271daaa7b687e8e075be3f94ab9b9c03f79b66
---
 .../Data/__tests__/parseLogBoxLog-test.js     | 48 +++++++++++++++++++
 .../Libraries/LogBox/Data/parseLogBoxLog.js   |  2 +-
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/packages/react-native/Libraries/LogBox/Data/__tests__/parseLogBoxLog-test.js b/packages/react-native/Libraries/LogBox/Data/__tests__/parseLogBoxLog-test.js
index e2773b28d738bd..9d98a9d29c4459 100644
--- a/packages/react-native/Libraries/LogBox/Data/__tests__/parseLogBoxLog-test.js
+++ b/packages/react-native/Libraries/LogBox/Data/__tests__/parseLogBoxLog-test.js
@@ -1287,6 +1287,54 @@ Please follow the instructions at: fburl.com/rn-remote-assets`,
       });
     });
 
+    it('detects a component stack for ts, tsx, jsx, and js files', () => {
+      expect(
+        parseLogBoxLog([
+          'Some kind of message\n    in MyTSComponent (at MyTSXComponent.ts:1)\n    in MyTSXComponent (at MyTSCComponent.tsx:1)\n    in MyJSXComponent (at MyJSXComponent.jsx:1)\n    in MyJSComponent (at MyJSComponent.js:1)',
+        ]),
+      ).toEqual({
+        componentStack: [
+          {
+            content: 'MyTSComponent',
+            fileName: 'MyTSXComponent.ts',
+            location: {
+              column: -1,
+              row: 1,
+            },
+          },
+          {
+            content: 'MyTSXComponent',
+            fileName: 'MyTSCComponent.tsx',
+            location: {
+              column: -1,
+              row: 1,
+            },
+          },
+          {
+            content: 'MyJSXComponent',
+            fileName: 'MyJSXComponent.jsx',
+            location: {
+              column: -1,
+              row: 1,
+            },
+          },
+          {
+            content: 'MyJSComponent',
+            fileName: 'MyJSComponent.js',
+            location: {
+              column: -1,
+              row: 1,
+            },
+          },
+        ],
+        category: 'Some kind of message',
+        message: {
+          content: 'Some kind of message',
+          substitutions: [],
+        },
+      });
+    });
+
     it('detects a component stack in the first argument (JSC)', () => {
       expect(
         parseLogBoxLog([
diff --git a/packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js b/packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js
index f72d1227170823..84828adb6ab7ad 100644
--- a/packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js
+++ b/packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js
@@ -192,7 +192,7 @@ export function parseComponentStack(message: string): ComponentStack {
       if (!s) {
         return null;
       }
-      const match = s.match(/(.*) \(at (.*\.js):([\d]+)\)/);
+      const match = s.match(/(.*) \(at (.*\.(?:js|jsx|ts|tsx)):([\d]+)\)/);
       if (match) {
         let [content, fileName, row] = match.slice(1);
         return {