Fix component stacks for tsx, ts, and jsx files (#43370)

Summary: Pull Request resolved: #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
facebook · Mar 8, 2024 · adaf5eb · adaf5eb
1 parent 2d547a3
commit adaf5eb
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 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
@@ -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
@@ -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 {