Merge branch 'dev' of https://github.com/martis-git/github-client into dev

Author: azinit

src/app/error-handling/index.ts

@@ -11,3 +11,5 @@ import withAntd from "./with-antd";
  * - логику инициализации роутера (withRouter)
  */
 export const withHocs = compose(withAntd, withRouter, withApollo);
+
+export { ErrorHandlingProvider } from "./with-error-handling";

src/app/hocs/index.ts

@@ -0,0 +1,21 @@
+import React, { lazy } from "react";
+import { alert } from "shared/helpers";
+import { Error } from "features";
+import { AppError } from "models";
+
+const ErrorPage = lazy(() => import("pages/error"));
+
+/**
+ * @hoc Инициализация отлова ошибок
+ */
+export const ErrorHandlingProvider = ({ children }: PropsWithChildren) => {
+    const onNetworkError = ({ message, description }: AppError) => alert.warn(message, description);
+    return (
+        <Error.Catcher
+            onNetworkError={onNetworkError}
+            handler={({ error }) => <ErrorPage error={error} />}
+        >
+            {children}
+        </Error.Catcher>
+    );
+};

src/app/hocs/with-error-handling.tsx

@@ -1,14 +1,10 @@
-import React, { lazy } from "react";
+import React from "react";
 import { Layout } from "antd";
 import Routing from "pages";
-import { ErrorCatcher } from "./error-handling";
 import Header from "./header";
-import { withHocs } from "./hocs";
+import { withHocs, ErrorHandlingProvider } from "./hocs";
 import "./index.scss";
 
-// !!! FIXME: manage access
-const ErrorPage = lazy(() => import("pages/error"));
-
 /**
  * Entry-point приложения
  * @remark Содержит в HOC-обертке инициализирующую логику приложения
@@ -20,9 +16,9 @@ const App = () => {
             <Layout>
                 <Header />
                 <Layout.Content className="gc-app-content">
-                    <ErrorCatcher handler={({ error }) => <ErrorPage error={error} />}>
+                    <ErrorHandlingProvider>
                         <Routing />
-                    </ErrorCatcher>
+                    </ErrorHandlingProvider>
                 </Layout.Content>
             </Layout>
         </div>

src/app/index.tsx

@@ -3,11 +3,13 @@ import { onError } from "@apollo/client/link/error";
 import { useApolloClient } from "@apollo/client";
 import { useLocation } from "react-router";
 import { AppError } from "models";
+import { Definitions } from "./definitions";
 import { mapError } from "./helpers";
 
 type Props = PropsWithChildren<{
     /** Отрисовщик-обработчик ошибки */
     handler: (props: { error: AppError }) => ReactNode;
+    onNetworkError?: (error: AppError) => void;
 }>;
 
 /**
@@ -19,7 +21,8 @@ const useAppError = () => {
 
     useEffect(() => {
         const errorLink = onError(({ graphQLErrors, networkError }) => {
-            setError(mapError(graphQLErrors?.[0] || networkError));
+            const appError = mapError(graphQLErrors?.[0] || networkError);
+            setError(appError || null);
         });
         apolloClient.setLink(errorLink.concat(apolloClient.link));
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -29,19 +32,23 @@ const useAppError = () => {
 };
 
 /**
- * Обертка для обработки ошибок
+ * @feature Обертка для обработки ошибок
  * FIXME: add ErrorBoundaries
  */
-const ErrorCatcher = ({ handler, children }: Props) => {
+const Catcher = ({ handler, children, onNetworkError }: Props) => {
     const location = useLocation();
     const { error, setError } = useAppError();
 
     useEffect(() => setError(null), [location, setError]);
+    useEffect(() => {
+        if (error?.code !== Definitions.NETWORK_ERROR.code) return;
+        onNetworkError?.(error);
+    }, [error, onNetworkError]);
 
-    if (error) {
+    if (error && error.code !== Definitions.NETWORK_ERROR.code) {
         return <>{handler({ error })}</>;
     }
     return <>{children}</>;
 };
 
-export default ErrorCatcher;
+export default Catcher;

src/app/error-handling/error-catcher.tsx src/features/error/catcher.tsxsrc/app/error-handling/error-catcher.tsx renamed to src/features/error/catcher.tsx

@@ -3,7 +3,7 @@ import { AppError } from "models";
 /**
  * Обрабатываемые ошибки приложения
  */
-export const ErrorDefinitions: Record<string, AppError> = {
+export const Definitions: Record<string, AppError> = {
     UNAUTHORIZED: {
         code: 401,
         message: "You shall not pass!",
@@ -24,4 +24,9 @@ export const ErrorDefinitions: Record<string, AppError> = {
         message: "500 Server Error\nSomething’s wrong!",
         description: "we’re doing smth",
     },
+    NETWORK_ERROR: {
+        code: -1,
+        message: "Check your connection",
+        description: "Failed to make a request",
+    },
 };

…/app/error-handling/error-definitions.ts src/features/error/definitions.tssrc/app/error-handling/error-definitions.ts renamed to src/features/error/definitions.ts src/app/error-handling/error-definitions.ts renamed to src/features/error/definitions.ts

@@ -1,7 +1,7 @@
 import { ServerError } from "@apollo/client";
 import { GraphQLError } from "graphql";
 import { AppError } from "models";
-import { ErrorDefinitions } from "./error-definitions";
+import { Definitions } from "./definitions";
 
 /**
  * Проверка: является ли ошибка GitHub Error
@@ -26,12 +26,15 @@ export function mapError(error?: GraphQLError | Error | ServerError): AppError |
     if (isGithubError(error)) {
         // FIXME: handle 403 and 500 errors as well w/o side effects
         if (error.type === "NOT_FOUND") {
-            return ErrorDefinitions[error.type];
+            return Definitions[error.type];
         }
     }
     if (isServerError(error)) {
-        if (error.statusCode === 401) return ErrorDefinitions.UNAUTHORIZED;
+        if (error.statusCode === 401) return Definitions.UNAUTHORIZED;
     }
-    // TODO: handle network errors and whatever can be broken
+    if (error instanceof TypeError && error.message === "Failed to fetch") {
+        return Definitions.NETWORK_ERROR;
+    }
+    // TODO: handle other errors and whatever can be broken
     return null;
 }

src/app/error-handling/helpers.ts src/features/error/helpers.tssrc/app/error-handling/helpers.ts renamed to src/features/error/helpers.ts

@@ -0,0 +1,2 @@
+export { default as Catcher } from "./catcher";
+export * from "./definitions";

src/features/error/index.ts

@@ -1,5 +1,6 @@
 // Импортим отдельно, т.к. фича экспортит из себя много подмодулей
 import * as Auth from "./auth";
+import * as Error from "./error";
 
 // FIXME: Нормализовать экспорты к единому виду
 
@@ -12,3 +13,4 @@ export { default as Search } from "./search";
 export { default as Origin } from "./origin";
 export { default as HeroSheet } from "./hero-sheet";
 export { Auth };
+export { Error };

src/features/index.ts

@@ -1,8 +1,5 @@
 import React from "react";
-// !!! FIXME: это плохо(
-// eslint-disable-next-line import/order
-import { ErrorDefinitions } from "app/error-handling";
-import { Auth, HeroSheet } from "features";
+import { Auth, Error, HeroSheet } from "features";
 import { AppError } from "models";
 import { useTitle } from "../helpers";
 
@@ -28,7 +25,7 @@ const useAppErrors = (error: AppError) => {
     };
 
     const action =
-        error.code === ErrorDefinitions.UNAUTHORIZED.code ? unauthorizedAction : undefined;
+        error.code === Error.Definitions.UNAUTHORIZED.code ? unauthorizedAction : undefined;
     return { action };
 };
 
@@ -37,7 +34,7 @@ const useAppErrors = (error: AppError) => {
  * @remark Отображается при возникающих ошибках в приложении
  */
 const ErrorPage = ({ error }: Props) => {
-    useTitle(`Error occured · ${error.code || "Unknown"}`);
+    useTitle(`Error occurred · ${error.code || "Unknown"}`);
     const { action } = useAppErrors(error);
 
     return (