Timeout promise while exporting flipper plugin

Summary:
Added a promiseTimeout util so that we limit the time taken to export flipper plugin. I had received a feedback from the user stating that that the loader for the export stays for ages and never finishes. So this diff adds a timeout to the promise which is returned by `exportPersistedState` function. This function is currently implemented just by Layout inspector to fetch the entire view hierarchy. I suspect the the former mentioned bug may be due to the unresponsive client.

This diff also shows the plugin and the client information for which `exportPersistedState` timed out. Also this will hopefully solve the problem surfaced recently stating that the bug report gets stuck, the reason for which I suspect would be the same as the above mentioned reason, because we export flipper data when we create a bug report.

Reviewed By: danielbuechele

Differential Revision: D14712633

fbshipit-source-id: 35f8cfa722ec3b7ff94ebda943d618834ac3207d

src/chrome/ShareSheetExportFile.js

@@ -54,11 +54,21 @@ const InfoText = styled(Text)({
   marginBottom: 15,
 });
 
+const Padder = styled('div')(
+  ({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({
+    paddingLeft: paddingLeft || 0,
+    paddingRight: paddingRight || 0,
+    paddingBottom: paddingBottom || 0,
+    paddingTop: paddingTop || 0,
+  }),
+);
+
 type Props = {
   onHide: () => mixed,
   file: string,
 };
 type State = {
+  errorArray: Array<Error>,
   result: ?{
     success: boolean,
     error: ?Error,
@@ -71,18 +81,19 @@ export default class ShareSheetExportFile extends Component<Props, State> {
   };
 
   state = {
+    errorArray: [],
     result: null,
   };
 
   async componentDidMount() {
     try {
-      await reportPlatformFailures(
+      const {errorArray} = await reportPlatformFailures(
         exportStoreToFile(this.props.file, this.context.store),
         `${EXPORT_FLIPPER_TRACE_EVENT}:UI`,
       );
-      this.setState({result: {success: true, error: null}});
+      this.setState({errorArray, result: {success: true, error: null}});
     } catch (err) {
-      this.setState({result: {success: false, error: err}});
+      this.setState({errorArray: [], result: {success: false, error: err}});
     }
   }
 
@@ -100,6 +111,16 @@ export default class ShareSheetExportFile extends Component<Props, State> {
                 might contain sensitive information like access tokens used in
                 network requests.
               </InfoText>
+              {this.state.errorArray.length > 0 && (
+                <Padder paddingBottom={8}>
+                  <FlexColumn>
+                    <Title bold>Errors: </Title>
+                    {this.state.errorArray.map((e: Error) => {
+                      return <ErrorMessage code>{e.toString()}</ErrorMessage>;
+                    })}
+                  </FlexColumn>
+                </Padder>
+              )}
             </FlexColumn>
             <FlexRow>
               <Spacer />