Fix fallout from bug 1771463 and show errors during initializtion (#89)

manifest.json

@@ -11,7 +11,7 @@
   "applications": {
     "gecko": {
       "id": "[email protected]",
-      "strict_min_version": "72.0a1"
+      "strict_min_version": "103.0a1"
     }
   },
 

src/CollectionsViewer.jsx

@@ -93,7 +93,8 @@ const collectionComponentBuilders = {
   },
 
   async clients(provider, serverRecords) {
-    const fxAccounts = importLocal("resource://gre/modules/FxAccounts.jsm").fxAccounts;
+    const { getFxAccountsSingleton } = importLocal("resource://gre/modules/FxAccounts.jsm");
+    const fxAccounts = getFxAccountsSingleton();
     let fxaDevices = [];
     if (typeof fxAccounts.device == "object" && "recentDeviceList" in fxAccounts.device) {
       // Force a refresh of the device list, so that we always show the most

src/common.jsx

@@ -85,6 +85,7 @@ class ErrorDisplay extends React.Component {
       onClose: PropTypes.func,
       prefix: PropTypes.string,
       formatError: PropTypes.func,
+      stack: PropTypes.func,
       error: PropTypes.any,
     };
   }
@@ -93,6 +94,7 @@ class ErrorDisplay extends React.Component {
     return {
       prefix: "Error: ",
       formatError: ErrorDisplay.defaultFormatter,
+      stack: ErrorDisplay.stack
     };
   }
 
@@ -111,6 +113,9 @@ class ErrorDisplay extends React.Component {
           {this.props.prefix}
           {this.props.formatError(this.props.error)}
         </p>
+        <pre>
+          {this.props.stack(this.props.error)}
+        </pre>
       </div>
     );
   }
@@ -125,6 +130,13 @@ class ErrorDisplay extends React.Component {
     }
     return result;
   }
+
+  static stack(err) {
+    if (err && err.stack) {
+      return err.stack;
+    }
+    return "<no stack available>";
+  }
 }
 
 // Like Async.jankYielder, but without adding another Cu.import, and uses the

src/main.jsx

@@ -10,13 +10,15 @@ const { CollectionsViewer } = require("./CollectionsViewer");
 const { ErrorDisplay, Fetching, importLocal } = require("./common");
 
 const { Services } = importLocal("resource://gre/modules/Services.jsm");
-const { fxAccounts } = importLocal("resource://gre/modules/FxAccounts.jsm");
 const { Weave } = importLocal("resource://services-sync/main.js");
 
 const weaveService = Cc["@mozilla.org/weave/service;1"]
                      .getService(Ci.nsISupports)
                      .wrappedJSObject;
 
+const { getFxAccountsSingleton } = importLocal("resource://gre/modules/FxAccounts.jsm");
+const fxAccounts = getFxAccountsSingleton();
+
 // Returns a promise that resolves when Sync is ready and logged in.
 function whenSyncReady() {
   return weaveService.whenLoaded().then(() => {
@@ -97,6 +99,7 @@ class AboutSyncComponent extends React.Component {
         provider: ProviderState.newProvider(),
       });
     }).catch(e => {
+      console.error("Failed to load initial state", e);
       this.setState({error: e})
     })
   }
@@ -109,6 +112,13 @@ class AboutSyncComponent extends React.Component {
 
   render() {
     let loginState = this.state.ready ? String(this.state.loggedIn) : "unknown";
+    if (this.state && this.state.error) {
+      return (
+        <ErrorDisplay error={this.state.error}
+                      prefix="Failed to initialize"/>
+      );
+    }
+
     return (
       <div className="mainContainer">
         <div hidden={this.state.ready}>