feat: add network error and timeout toast

.npmrc

@@ -1,2 +1 @@
 package-lock=false
-legacy-peer-deps=true

package.json

@@ -123,6 +123,7 @@
     "@types/react-redux": "7.0.0",
     "@types/use-subscription": "^1.0.0",
     "@yuyongmao/react-native-chart-kit": "^1.0.0",
+    "apollo-link-timeout": "^4.0.0",
     "axios": "^0.21.1",
     "buffer": "^6.0.3",
     "currency-icons": "^1.0.14",
@@ -170,8 +171,7 @@
     "redux-persist": "^5.10.0",
     "redux-thunk": "2.3.0",
     "sentry-expo": "^2.1.2",
-    "short-number": "^1.0.7",
-    "ts-invariant": "^0.7.0"
+    "short-number": "^1.0.7"
   },
   "devDependencies": {
     "@puncsky/eslint-config-onefx": "^2.3.0",

src/common/apollo-client.ts

@@ -9,6 +9,9 @@ import fetch from "isomorphic-unfetch";
 import { getEndpoint } from "@/common/request";
 import { store } from "@/common/store";
 import { onErrorLink } from "@/common/apollo-error-handling";
+import ApolloLinkTimeout from "apollo-link-timeout";
+
+const timeoutLink = new ApolloLinkTimeout(10000);
 
 const middlewareLink = new ApolloLink((operation, forward) => {
   operation.setContext({
@@ -21,6 +24,7 @@ const middlewareLink = new ApolloLink((operation, forward) => {
 const link = middlewareLink.concat(
   ApolloLink.from([
     onErrorLink,
+    timeoutLink,
     new HttpLink({
       uri: getEndpoint("api-gateway/"),
       fetch,

src/common/apollo-error-handling.ts

@@ -1,5 +1,7 @@
 import { onError } from "@apollo/client/link/error";
 import { store } from "@/common/store";
+import { Toast } from "@ant-design/react-native";
+import { i18n } from "@/translations";
 
 export const onErrorLink = onError(({ graphQLErrors, networkError }) => {
   if (graphQLErrors) {
@@ -18,7 +20,12 @@ export const onErrorLink = onError(({ graphQLErrors, networkError }) => {
     }
   }
   if (networkError) {
-    // eslint-disable-next-line no-console
-    console.log(`[Network error]: ${networkError}`);
+    if (networkError.message.indexOf("Network request failed") >= 0) {
+      Toast.info(i18n.t("netError"));
+    } else if (networkError.message.indexOf("Timeout") >= 0) {
+      Toast.info(i18n.t("netTimeout"));
+    } else {
+      Toast.info(i18n.t("serverError"));
+    }
   }
 });

src/translations/en.ts

@@ -84,4 +84,7 @@ export const en = {
   "10": "OCT",
   "11": "NOV",
   "12": "DEC",
+  netTimeout: "Network request timeout",
+  netError: "Network request failed",
+  serverError: "Server error",
 };

src/translations/zh.ts

@@ -81,4 +81,7 @@ export const zh = {
   "10": "十月",
   "11": "十一月",
   "12": "十二月",
+  netTimeout: "网络请求超时",
+  netError: "网络请求失败",
+  serverError: "服务器错误",
 };