Symbolicate unhandled promise rejections

packages/react-native/Libraries/LogBox/Data/LogBoxData.js

@@ -9,9 +9,10 @@
  */
 
 ('use strict');
-
+import type {CodeFrame} from '../../Core/Devtools/symbolicateStackTrace';
 import type {ExtendedError} from '../../Core/ExtendedError';
 import type {LogLevel} from './LogBoxLog';
+import type {Stack} from './LogBoxSymbolication';
 import type {
   Category,
   ComponentStack,
@@ -30,6 +31,8 @@ export type LogData = $ReadOnly<{|
   message: Message,
   category: Category,
   componentStack: ComponentStack,
+  codeFrame?: ?CodeFrame,
+  stack?: Stack,
 |}>;
 
 export type Observer = (
@@ -198,16 +201,17 @@ export function addLog(log: LogData): void {
   // otherwise spammy logs would pause rendering.
   setImmediate(() => {
     try {
-      const stack = parseErrorStack(errorForStackTrace?.stack);
+      const defaultStack = parseErrorStack(errorForStackTrace?.stack);
 
       appendNewLog(
         new LogBoxLog({
           level: log.level,
           message: log.message,
           isComponentError: false,
-          stack,
+          stack: log.stack ?? defaultStack,
           category: log.category,
           componentStack: log.componentStack,
+          codeFrame: log.codeFrame,
         }),
       );
     } catch (error) {

packages/react-native/Libraries/promiseRejectionTrackingOptions.js

@@ -10,7 +10,9 @@
 
 import typeof {enable} from 'promise/setimmediate/rejection-tracking';
 
-let rejectionTrackingOptions: $NonMaybeType<Parameters<enable>[0]> = {
+type ExtractOptionsType = <P>(((options?: ?P) => void)) => P;
+
+let rejectionTrackingOptions: $Call<ExtractOptionsType, enable> = {
   allRejections: true,
   onUnhandled: (id, rejection = {}) => {
     let message: string;
@@ -22,7 +24,50 @@ let rejectionTrackingOptions: $NonMaybeType<Parameters<enable>[0]> = {
       // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       message = Error.prototype.toString.call(rejection);
       const error: Error = (rejection: $FlowFixMe);
-      stack = error.stack;
+
+      // Print pretty unhandled rejections while on DEV
+      if (__DEV__) {
+        const parseErrorStack = require('./Core/Devtools/parseErrorStack');
+        const symbolicateStackTrace = require('./Core/Devtools/symbolicateStackTrace');
+        const LogBox = require('./LogBox/LogBox').default;
+
+        const parsedStack = parseErrorStack(error.stack);
+
+        symbolicateStackTrace(parsedStack)
+          .then(prettyStack => {
+            let warning =
+              `Possible Unhandled Promise Rejection (id: ${id}):\n` +
+              `${message ?? ''}\n`;
+
+            if (prettyStack.codeFrame != null) {
+              warning += `at File: ${prettyStack.codeFrame.fileName}, row: ${
+                prettyStack.codeFrame.location?.row ?? 'Unknown'
+              }, column: ${
+                prettyStack.codeFrame.location?.column ?? 'Unknown'
+              }`;
+
+              LogBox.addLog({
+                level: 'warn',
+                message: {content: warning, substitutions: []},
+                componentStack: [],
+                codeFrame: prettyStack.codeFrame,
+                category: `${prettyStack.codeFrame.fileName}-${
+                  prettyStack.codeFrame.location?.row ?? 'unknown'
+                }-${prettyStack.codeFrame.location?.column ?? 'unknown'}`,
+              });
+            } else {
+              console.warn(warning);
+            }
+          })
+          .catch(() => {
+            const warning =
+              `Possible Unhandled Promise Rejection (id: ${id}):\n` +
+              `${message ?? ''}\n` +
+              (stack == null ? '' : stack);
+            console.warn(warning);
+          });
+        return;
+      }
     } else {
       try {
         message = require('pretty-format')(rejection);