Fixed. Changed the logic and dependencies, included extra error handl…

…ing, removed CDN dependencies

config/package-solution.json

@@ -3,11 +3,12 @@
   "solution": {
     "name": "Instagram Feed",
     "id": "2d0ddffd-2b2b-497c-8ed7-f52d1bbd4d48",
-    "version": "1.0.0.0",
+    "version": "1.0.1.0",
     "includeClientSideAssets": true,
-    "skipFeatureDeployment": true
+    "skipFeatureDeployment": true,
+    "iconPath": "images/tnk-sp-ig-feed-icon.png"
   },
   "paths": {
     "zippedPackage": "solution/thenikhilk-sp-ig-feed.sppkg"
   }
-}
+}

package.json

@@ -10,33 +10,35 @@
     "build": "gulp bundle",
     "clean": "gulp clean",
     "test": "gulp test",
-    "package": "gulp bundle --ship && gulp package-solution --ship"    
+    "package": "gulp bundle --ship && gulp package-solution --ship"
   },
   "dependencies": {
-    "react": "16.8.5",
-    "react-dom": "16.8.5",
-    "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.3",
-    "office-ui-fabric-react": "6.189.2",
     "@microsoft/sp-core-library": "1.9.1",
-    "@microsoft/sp-webpart-base": "1.9.1",
     "@microsoft/sp-lodash-subset": "1.9.1",
     "@microsoft/sp-office-ui-fabric-core": "1.9.1",
+    "@microsoft/sp-webpart-base": "1.9.1",
+    "@types/es6-promise": "0.0.33",
+    "@types/react": "16.8.8",
+    "@types/react-dom": "16.8.3",
     "@types/webpack-env": "1.13.1",
-    "@types/es6-promise": "0.0.33"
+    "jquery": "^3.4.1",
+    "office-ui-fabric-react": "6.189.2",
+    "react": "16.8.5",
+    "react-dom": "16.8.5"
   },
   "resolutions": {
     "@types/react": "16.8.8"
   },
   "devDependencies": {
+    "@microsoft/rush-stack-compiler-2.9": "0.7.16",
     "@microsoft/sp-build-web": "1.9.1",
-    "@microsoft/sp-tslint-rules": "1.9.1",
     "@microsoft/sp-module-interfaces": "1.9.1",
+    "@microsoft/sp-tslint-rules": "1.9.1",
     "@microsoft/sp-webpart-workbench": "1.9.1",
-    "@microsoft/rush-stack-compiler-2.9": "0.7.16",
-    "gulp": "~3.9.1",
     "@types/chai": "3.4.34",
+    "@types/jquery": "^3.3.31",
     "@types/mocha": "2.2.38",
-    "ajv": "~5.2.2"
+    "ajv": "~5.2.2",
+    "gulp": "~3.9.1"
   }
 }

src/models/IError.ts

@@ -2,5 +2,4 @@ export interface IError {
     status: number;
     heading: string;
     message: string;
-    error: TypeError;
 }

src/webparts/instagramFeed/components/InstagramFeed.tsx

@@ -12,6 +12,7 @@ import { ITheme, getTheme, mergeStyleSets } from 'office-ui-fabric-react/lib/Sty
 import * as strings from 'InstagramFeedWebPartStrings';
 import { IInstagramFeed, Edge } from '../../../models/IInstagramFeed';
 import { IError } from '../../../models/IError';
+import * as $ from "jquery";
 
 const shimmerWrapperClass = mergeStyles({
   padding: 2,
@@ -84,58 +85,87 @@ export default class InstagramFeed extends React.Component<IInstagramFeedProps,
     };
   }
 
-  private async _loadData() {
-    await fetch(`https://images${~~(Math.random() * 33)}-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/${this.props.username ? this.props.username : strings.DefaultUsername}`,
-      {
-        method: "GET",
-      })
-      .then(async (response) => {
-        let responseText = await response.text();
-        let regex = /_sharedData = ({.*);<\/script>/m,
-          json = JSON.parse(regex.exec(responseText)[1]),
-          data = json.entry_data.ProfilePage[0];
-        return data;
-      })
-      .then(
-        (result) => {
-          this.setState({
-            isLoaded: true,
-            items: result,
-            error: null
-          });
-          this.render();
-        },
-        (error) => {
-          let failure: IError = {
-            heading: strings.ErrorHeading,
-            message: strings.ErrorMessage,
-            status: 404,
-            error: error
-          };
-          // show error
-          this.setState({
-            items: null,
-            isLoaded: true,
-            error: failure
-          });
-        }
-      )
-      .catch(
-        (exception) => {
-          let failure: IError = {
-            heading: strings.ExceptionHeading,
-            message: strings.ExceptionMessage,
-            status: 500,
-            error: exception
-          };
-          // show exception
-          this.setState({
-            items: null,
-            isLoaded: true,
-            error: failure
-          });
+  private handleSuccess(success) {
+    let regex = /_sharedData = ({.*);<\/script>/m;
+    // let json = JSON.parse(regex.exec(success)[1]);
+    let json = JSON.parse(success);
+    if (json && json.graphql && json.graphql.user) {
+      let data = json;
+      this.setState({
+        isLoaded: true,
+        items: data,
+        error: null
+      });
+      this.render();
+    }
+  }
+
+  private handleFailure(error) {
+    let failure: IError = {
+      heading: strings.ErrorHeading,
+      message: strings.ErrorMessage,
+      status: error
+    };
+    // show error
+    this.setState({
+      items: null,
+      isLoaded: true,
+      error: failure
+    });
+  }
+
+  private getData(count) {
+    var params = {
+      url: `https://www.instagram.com/${this.props.username ? this.props.username.trim() : strings.DefaultUsername}/?__a=1`,
+      container: 'none'
+    };
+
+    var esc = encodeURIComponent;
+    var query = Object.keys(params)
+      .map(k => esc(k) + '=' + esc(params[k]))
+      .join('&');
+
+    let dataURL: string = `https://images${~~(Math.random() * 33)}-focus-opensocial.googleusercontent.com/gadgets/proxy?${query}`;
+    // let dataURL: string = `https://images${~~(Math.random() * 33)}-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/${this.props.username ? this.props.username.trim() : strings.DefaultUsername}/?__a=1`;
+    try {
+      let xhr = new XMLHttpRequest();
+      xhr.open('GET', dataURL);
+      xhr.onload = () => {
+        if (xhr.status === 200) {
+          this.handleSuccess(xhr.responseText);
+        } else if (xhr.status === 404) {
+          this.handleFailure(xhr.status);
+        } else {
+          this.getData(1);
         }
-      );
+      };
+      xhr.send();
+    } catch (exception) {
+      if (0 === count) {
+        this.getData(1);
+      } else {
+        throw exception;
+      }
+    }
+  }
+
+  private async _loadData() {
+    try {
+      this.getData(0);
+    } catch (exception) {
+      console.warn(`${exception.code}-${exception.name}: ${exception.message}`);
+      let failure: IError = {
+        heading: strings.ExceptionHeading,
+        message: strings.ExceptionMessage,
+        status: 500
+      };
+      // show exception
+      this.setState({
+        items: null,
+        isLoaded: true,
+        error: failure
+      });
+    }
   }
 
   public componentDidMount() {
@@ -159,7 +189,7 @@ export default class InstagramFeed extends React.Component<IInstagramFeedProps,
   }
 
   private _errorNotification = (): JSX.Element => {
-    console.error(this.state.error.error);
+    console.error(`${this.state.error.status}: ${this.state.error.message}`);
     return (
       <MessageBar
         messageBarType={MessageBarType.error}

src/webparts/instagramFeed/loc/en-us.js

@@ -9,7 +9,7 @@ define([], function () {
     "ShowAliasToggleFalseLabel": "No",
     "ToggleExpandText": "See more",
     "ToggleCollapseText": "Close",
-    "ExceptionHeading": "An error occurred",
+    "ExceptionHeading": "An exception occurred",
     "ExceptionMessage": "Failed to load data, please check WebPart settings or try again later.",
     "ErrorHeading": "An error occurred",
     "ErrorMessage": "Failed to load data, please check WebPart settings or try again later."