From 55c2c33b463d412a4a58c3190f26d552f1b5b670 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Fo=C5=99t?= <marekfort@me.com>
Date: Fri, 10 Nov 2023 14:48:39 +0100
Subject: [PATCH] Symbolicate unhandled promise rejections (#40914) (#41377)

Summary:
For a very long time when a promise rejects without an attached catch we get this warning screen without a correct stack trace, only some internal calls to the RN internals.

<img src="https://github.com/facebook/react-native/assets/1634213/75aa7615-ee3e-4229-80d6-1744130de6e5" width="200" />

I created [an issue for discussion](https://github.com/react-native-community/discussions-and-proposals/discussions/718) in the react-native-community repo and we figured out it was only a matter of symbolication. While it cannot be done on release without external packages and source maps, at least while developing we can provide a symbolicated stack-trace so developers can better debug the source of rejected promise.

I got the stack trace symbolicated and the correct code frame. I'm missing some help trying to display it in the warning view but at the very least I can now correctly show the line of the error and log the codeframe to the console.

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[GENERAL] [FIXED] - Show correct stack frame on unhandled promise rejections on development mode.

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

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

Test Plan:
I simply created a throwing function on a dummy app, and checked the output of the console and the warning view:

```ts
import React from 'react';
import {SafeAreaView, Text} from 'react-native';

async function throwme() {
  throw new Error('UNHANDLED');
}

function App(): JSX.Element {
  throwme();

  return (
    <SafeAreaView>
      <Text>Throw test</Text>
    </SafeAreaView>
  );
}

export default App;
```

Here is the output

<img src="https://github.com/facebook/react-native/assets/1634213/2c100e4d-618e-4143-8d64-4095e8370f4f" width="200" />

Edit: I got the warning window working properly:

<img src="https://github.com/facebook/react-native/assets/1634213/f02a2568-da3e-4daa-8132-e05cbe591737" width="200" />

Reviewed By: yungsters

Differential Revision: D50324344

Pulled By: javache

fbshipit-source-id: 66850312d444cf1ae5333b493222ae0868d47056

Co-authored-by: Oscar Franco <ospfranco@gmail.com>
---
 .../Libraries/LogBox/Data/LogBoxData.js       |  3 +-
 .../promiseRejectionTrackingOptions.js        | 28 ++++++++++++++-----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/react-native/Libraries/LogBox/Data/LogBoxData.js b/packages/react-native/Libraries/LogBox/Data/LogBoxData.js
index d3e06b0451303c..abc2401ac42159 100644
--- a/packages/react-native/Libraries/LogBox/Data/LogBoxData.js
+++ b/packages/react-native/Libraries/LogBox/Data/LogBoxData.js
@@ -30,6 +30,7 @@ export type LogData = $ReadOnly<{|
   message: Message,
   category: Category,
   componentStack: ComponentStack,
+  stack?: string,
 |}>;
 
 export type Observer = (
@@ -198,7 +199,7 @@ export function addLog(log: LogData): void {
   // otherwise spammy logs would pause rendering.
   setImmediate(() => {
     try {
-      const stack = parseErrorStack(errorForStackTrace?.stack);
+      const stack = parseErrorStack(log.stack ?? errorForStackTrace?.stack);
 
       appendNewLog(
         new LogBoxLog({
diff --git a/packages/react-native/Libraries/promiseRejectionTrackingOptions.js b/packages/react-native/Libraries/promiseRejectionTrackingOptions.js
index a57f3666899d62..fbdcd4abf88f91 100644
--- a/packages/react-native/Libraries/promiseRejectionTrackingOptions.js
+++ b/packages/react-native/Libraries/promiseRejectionTrackingOptions.js
@@ -10,6 +10,8 @@
 
 import typeof {enable} from 'promise/setimmediate/rejection-tracking';
 
+import LogBox from './LogBox/LogBox';
+
 type ExtractOptionsType = <P>(((options?: ?P) => void)) => P;
 
 let rejectionTrackingOptions: $Call<ExtractOptionsType, enable> = {
@@ -36,17 +38,29 @@ let rejectionTrackingOptions: $Call<ExtractOptionsType, enable> = {
       }
     }
 
-    const warning =
-      `Possible Unhandled Promise Rejection (id: ${id}):\n` +
-      `${message ?? ''}\n` +
-      (stack == null ? '' : stack);
-    console.warn(warning);
+    const warning = `Possible unhandled promise rejection (id: ${id}):\n${
+      message ?? ''
+    }`;
+    if (__DEV__) {
+      LogBox.addLog({
+        level: 'warn',
+        message: {
+          content: warning,
+          substitutions: [],
+        },
+        componentStack: [],
+        stack,
+        category: 'possible_unhandled_promise_rejection',
+      });
+    } else {
+      console.warn(warning);
+    }
   },
   onHandled: id => {
     const warning =
-      `Promise Rejection Handled (id: ${id})\n` +
+      `Promise rejection handled (id: ${id})\n` +
       'This means you can ignore any previous messages of the form ' +
-      `"Possible Unhandled Promise Rejection (id: ${id}):"`;
+      `"Possible unhandled promise rejection (id: ${id}):"`;
     console.warn(warning);
   },
 };