Add retry handling logic, in case of request failures.

README.md

@@ -6,14 +6,14 @@ To get started, request an API Key: api@flipsidecrypto.com.
 
 ## Live Example
 
-[View Live FCAS Widget Example](https://jsfiddle.net/flipsidejim/f7zpd0uj/18/)
+[View Live FCAS Widget Example](https://jsfiddle.net/flipsidejim/f7zpd0uj/20/)
 
 ## Install
 
 The FlipsideJS library is made available over our CDN to ensure a speedy response time.
 
 ```html
-<script src="https://d3sek7b10w79kp.cloudfront.net/flipside-v1.2.0.js"></script>
+<script src="https://d3sek7b10w79kp.cloudfront.net/flipside-v1.3.0.js"></script>
 ```
 
 ## Usage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flipside-js",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "FlipsideJS provides a library embeddable widgets that display data from the Flipside Platform API, including FCAS.",
   "main": "index.js",
   "scripts": {

src/api.js

@@ -8,16 +8,22 @@ export default class API {
     });
   }
 
-  async _fetch(url, params, retryCount = 0, retryMax = 100) {
-    const res = await this.client.get(url, { params: params });
-    if (res.status >= 200 || res.status < 300) {
-      return res.data;
+  async _fetch(url, params, retryCount = 0, retryMax = 15) {
+    let res;
+    try {
+      res = await this.client.get(url, { params: params });
+      if (res.status >= 200 && res.status < 300) {
+        return { data: res.data, success: true };
+      }
+    } catch (e) {
+      console.log(
+        `Failed to fetch data from: "${url}". \nError message: "${e}"`
+      );
     }
     if (retryCount < retryMax) {
       return await this._fetch(url, params, retryCount + 1);
-    } else {
-      throw `Failed to fetch data from: ${url}.`;
     }
+    return { data: null, success: false };
   }
 
   async fetchAssetMetric(symbol, metric = "FCAS", days = 7) {

src/fcas/index.js

@@ -10,12 +10,17 @@ export default class FCAS extends Component {
   }
 
   async _getData() {
-    const data = await this.props.api.fetchAssetMetric(
+    const { data, success } = await this.props.api.fetchAssetMetric(
       this.props.symbol,
       "FCAS"
     );
 
-    if (!data) return;
+    if (!success || !data) {
+      setTimeout(() => {
+        return this._getData();
+      }, 2000);
+      return success;
+    }
 
     this.setState({
       loading: false,
@@ -25,12 +30,13 @@ export default class FCAS extends Component {
         name: data.asset_name
       }
     });
+    return success;
   }
 
   _update() {
     this.interval = setInterval(async () => {
       await this._getData();
-    }, 30000);
+    }, 300000);
   }
 
   componentWillUnmount() {
@@ -38,7 +44,17 @@ export default class FCAS extends Component {
   }
 
   async componentDidMount() {
-    await this._getData();
+    const success = await this._getData();
+    if (!success) {
+      this.setState({
+        loading: false,
+        metric: {
+          fcas: "NA",
+          change: "NA",
+          name: "NA"
+        }
+      });
+    }
     this._update();
   }
 

src/fcas/plot/index.js

@@ -14,16 +14,23 @@ export default class Plot extends Component {
   }
 
   async _getData() {
-    let data = await this.props.api.fetchFCASDistribution();
+    const { data, success } = await this.props.api.fetchFCASDistribution();
+    if (!success || !data) {
+      setTimeout(() => {
+        return this._getData();
+      }, 2000);
+      return success;
+    }
     if (data && data.length > 0) {
       this.setState({ loading: false, distribution: data });
     }
+    return success;
   }
 
   _update() {
     this.interval = setInterval(async () => {
       await this._getData();
-    }, 30000);
+    }, 300000);
   }
 
   componentWillUnmount() {
@@ -31,7 +38,10 @@ export default class Plot extends Component {
   }
 
   async componentDidMount() {
-    await this._getData();
+    const success = await this._getData();
+    if (!success) {
+      this.setState({ loading: false, distribution: [] });
+    }
     this._update();
   }