YellowBox: Allow Retrying Symbolication

Summary: When symbolication fails, allow retrying without having to reload the current JS VM.

Reviewed By: ejanzer

Differential Revision: D9760666

fbshipit-source-id: 63837c81fe77a9b0b897a858e3d64bc7dcf2c3bd

Libraries/YellowBox/Data/YellowBoxSymbolication.js

@@ -21,6 +21,10 @@ export type Stack = Array<StackFrame>;
 const cache: Map<CacheKey, Promise<Stack>> = new Map();
 
 const YellowBoxSymbolication = {
+  delete(stack: Stack): void {
+    cache.delete(getCacheKey(stack));
+  },
+
   symbolicate(stack: Stack): Promise<Stack> {
     const key = getCacheKey(stack);
 

Libraries/YellowBox/Data/YellowBoxWarning.js

@@ -63,6 +63,11 @@ class YellowBoxWarning {
       : this.stack;
   }
 
+  retrySymbolicate(callback: () => void): SymbolicationRequest {
+    YellowBoxSymbolication.delete(this.stack);
+    return this.symbolicate(callback);
+  }
+
   symbolicate(callback: () => void): SymbolicationRequest {
     let aborted = false;
 

Libraries/YellowBox/UI/YellowBoxInspector.js

@@ -77,6 +77,11 @@ class YellowBoxInspector extends React.Component<Props, State> {
             <View style={styles.bodyHeading}>
               <Text style={styles.bodyHeadingText}>Stack</Text>
               <YellowBoxInspectorSourceMapStatus
+                onPress={
+                  warning.symbolicated.status === 'FAILED'
+                    ? this._handleRetrySymbolication
+                    : null
+                }
                 status={warning.symbolicated.status}
               />
             </View>
@@ -121,6 +126,16 @@ class YellowBoxInspector extends React.Component<Props, State> {
     this._cancelSymbolication();
   }
 
+  _handleRetrySymbolication = () => {
+    this._cancelSymbolication();
+    this.forceUpdate(() => {
+      const warning = this.props.warnings[this.state.selectedIndex];
+      this._symbolication = warning.retrySymbolicate(() => {
+        this.forceUpdate();
+      });
+    });
+  };
+
   _handleSymbolication(): void {
     const warning = this.props.warnings[this.state.selectedIndex];
     if (warning.symbolicated.status !== 'COMPLETE') {

Libraries/YellowBox/UI/YellowBoxInspectorSourceMapStatus.js

@@ -15,14 +15,16 @@ const Easing = require('Easing');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
-const View = require('View');
 const YellowBoxImageSource = require('YellowBoxImageSource');
+const YellowBoxPressable = require('YellowBoxPressable');
 const YellowBoxStyle = require('YellowBoxStyle');
 
 import type {CompositeAnimation} from 'AnimatedImplementation';
 import type AnimatedInterpolation from 'AnimatedInterpolation';
+import type {PressEvent} from 'CoreEventTypes';
 
 type Props = $ReadOnly<{|
+  onPress?: ?(event: PressEvent) => void,
   status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
 |}>;
 
@@ -52,7 +54,13 @@ class YellowBoxInspectorSourceMapStatus extends React.Component<Props, State> {
     }
 
     return image == null ? null : (
-      <View
+      <YellowBoxPressable
+        backgroundColor={{
+          default: YellowBoxStyle.getTextColor(0.8),
+          pressed: YellowBoxStyle.getTextColor(0.6),
+        }}
+        hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
+        onPress={this.props.onPress}
         style={StyleSheet.compose(
           styles.root,
           this.props.status === 'PENDING' ? styles.pending : null,
@@ -67,7 +75,7 @@ class YellowBoxInspectorSourceMapStatus extends React.Component<Props, State> {
           )}
         />
         <Text style={styles.text}>Source Map</Text>
-      </View>
+      </YellowBoxPressable>
     );
   }
 
@@ -125,7 +133,6 @@ class YellowBoxInspectorSourceMapStatus extends React.Component<Props, State> {
 const styles = StyleSheet.create({
   root: {
     alignItems: 'center',
-    backgroundColor: YellowBoxStyle.getTextColor(0.8),
     borderRadius: 12,
     flexDirection: 'row',
     height: 24,