Fix: Unhandled error rejection (#2186)

* task: do not throw an error when response is 403

* task: optional chain res.data

* task: show error when api call is not successful

Author: finnar-bin

src/shell/components/load-instance/index.js

@@ -38,15 +38,14 @@ export default connect((state) => {
   memo(function LoadInstance(props) {
     const [error, setError] = useState("");
     useEffect(() => {
-      props
-        .dispatch(fetchInstance())
-        .then((res) => {
-          document.title = `Manager - ${res.data.name} - Zesty`;
-          CONFIG.URL_PREVIEW_FULL = `${CONFIG.URL_PREVIEW_PROTOCOL}${res.data.randomHashID}${CONFIG.URL_PREVIEW}`;
-        })
-        .catch((res) => {
-          setError(res.message);
-        });
+      props.dispatch(fetchInstance()).then((res) => {
+        if (res.status !== 200) {
+          setError("You do not have permission to access this instance");
+        } else {
+          document.title = `Manager - ${res.data?.name} - Zesty`;
+          CONFIG.URL_PREVIEW_FULL = `${CONFIG.URL_PREVIEW_PROTOCOL}${res.data?.randomHashID}${CONFIG.URL_PREVIEW}`;
+        }
+      });
 
       Promise.all([
         props.dispatch(fetchUser(props.user.ZUID)),

src/shell/store/instance.js

@@ -32,17 +32,14 @@ export function fetchInstance() {
     });
 
     return request(`${CONFIG.API_ACCOUNTS}/instances/${ZUID}`).then((res) => {
-      if (res.status === 403) {
-        throw new Error(
-          "You do not have permission to access to this instance"
-        );
+      if (res.status === 200) {
+        dispatch({
+          type: "FETCHING_INSTANCE_SUCCESS",
+          payload: {
+            data: res.data,
+          },
+        });
       }
-      dispatch({
-        type: "FETCHING_INSTANCE_SUCCESS",
-        payload: {
-          data: res.data,
-        },
-      });
 
       return res;
     });