fix types on error message extraction

frontend/apps/remark42/app/common/types.ts

@@ -150,9 +150,13 @@ export interface Image {
 
 /** error struct returned in case of api call error */
 export interface ApiError {
-  code: number;
+  /**
+   * Error code, that is part of server error response.
+   * Note that -1 is reserved for error where `error` field shall be used directly
+   */
+  code?: number;
   /** simple explanation */
-  details: string;
+  details?: string;
   /** in-depth explanation */
   error: string;
 }

frontend/apps/remark42/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx

@@ -166,9 +166,8 @@ export const SubscribeByEmailForm: FunctionComponent = () => {
           default:
             break;
         }
-      } catch (e) {
-        // @ts-ignore
-        setError(extractErrorMessageFromResponse(e, intl));
+      } catch (err) {
+        setError(extractErrorMessageFromResponse(err, intl));
       } finally {
         setLoading(false);
       }
@@ -226,9 +225,8 @@ export const SubscribeByEmailForm: FunctionComponent = () => {
       await unsubscribeFromEmailUpdates();
       dispatch(setUserSubscribed(false));
       setStep(Step.Unsubscribed);
-    } catch (e) {
-      // @ts-ignore
-      setError(extractErrorMessageFromResponse(e, intl));
+    } catch (err) {
+      setError(extractErrorMessageFromResponse(err, intl));
     } finally {
       setLoading(false);
     }

frontend/apps/remark42/app/components/comment-form/__subscribe-by-telegram/comment-form__subscribe-by-telegram.tsx

@@ -97,8 +97,8 @@ export const SubscribeByTelegramForm: FunctionComponent = () => {
         return;
       }
       setStep('subscribed');
-    } catch (e) {
-      setError(extractErrorMessageFromResponse(e as FetcherError, intl));
+    } catch (err) {
+      setError(extractErrorMessageFromResponse(err, intl));
     } finally {
       setLoading(false);
     }
@@ -119,8 +119,8 @@ export const SubscribeByTelegramForm: FunctionComponent = () => {
       }, 0);
       await telegramUnsubcribe();
       setStep('unsubscribed');
-    } catch (e) {
-      setError(extractErrorMessageFromResponse(e as FetcherError, intl));
+    } catch (err) {
+      setError(extractErrorMessageFromResponse(err, intl));
     } finally {
       setLoading(false);
     }

frontend/apps/remark42/app/components/comment-form/comment-form.tsx

@@ -2,7 +2,7 @@ import { h, Component, createRef, Fragment } from 'preact';
 import { FormattedMessage, IntlShape, defineMessages } from 'react-intl';
 import b, { Mix } from 'bem-react-helper';
 
-import { User, Theme, Image, ApiError } from 'common/types';
+import { User, Theme, Image } from 'common/types';
 import { StaticStore } from 'common/static-store';
 import * as settings from 'common/settings';
 import { extractErrorMessageFromResponse } from 'utils/errorUtils';
@@ -156,12 +156,11 @@ export class CommentForm extends Component<Props, State> {
     this.setState({ isDisabled: true, isErrorShown: false, text });
     try {
       await this.props.onSubmit(text, settings.pageTitle || document.title);
-    } catch (e) {
+    } catch (err) {
       this.setState({
         isDisabled: false,
         isErrorShown: true,
-        // @ts-ignore
-        errorMessage: extractErrorMessageFromResponse(e, this.props.intl),
+        errorMessage: extractErrorMessageFromResponse(err, this.props.intl),
       });
       return;
     }
@@ -180,8 +179,8 @@ export class CommentForm extends Component<Props, State> {
     this.props
       .getPreview(text)
       .then((preview) => this.setState({ preview }))
-      .catch((e) => {
-        this.setState({ isErrorShown: true, errorMessage: extractErrorMessageFromResponse(e, this.props.intl) });
+      .catch((err) => {
+        this.setState({ isErrorShown: true, errorMessage: extractErrorMessageFromResponse(err, this.props.intl) });
       });
   };
 
@@ -260,13 +259,13 @@ export class CommentForm extends Component<Props, State> {
   }
 
   /** wrapper with error handling for props.uploadImage */
-  uploadImage = (file: File): Promise<Image | Error> => {
+  uploadImage = async (file: File): Promise<Image | Error> => {
     const intl = this.props.intl;
-    return this.props.uploadImage!(file).catch((e: ApiError | string) => {
+    return this.props.uploadImage!(file).catch((err) => {
       return new Error(
         intl.formatMessage(messages.uploadFileFail, {
           fileName: file.name,
-          errorMessage: extractErrorMessageFromResponse(e, this.props.intl),
+          errorMessage: extractErrorMessageFromResponse(err, this.props.intl),
         })
       );
     });

frontend/apps/remark42/app/components/comment/comment-votes.tsx

@@ -38,7 +38,6 @@ export function CommentVotes({ id, votes, vote, disabled }: Props) {
       setErrorMessage(undefined);
       setTimeout(() => setLoadingState(null), 200);
     } catch (err) {
-      // @ts-ignore
       setErrorMessage(extractErrorMessageFromResponse(err, intl));
       setLoadingState(null);
     }

frontend/apps/remark42/app/utils/errorUtils.ts

@@ -1,4 +1,5 @@
 import { IntlShape, defineMessages } from 'react-intl';
+import { ApiError } from '../common/types';
 
 export const errorMessages = defineMessages<string | number>({
   'fetch-error': {
@@ -111,25 +112,14 @@ export const errorMessages = defineMessages<string | number>({
   },
 });
 
-export type FetcherError =
-  | string
-  | {
-      /**
-       * Error code, that is part of server error response.
-       *
-       * Note that -1 is reserved for error where `error` field shall be used directly
-       */
-      code?: number;
-      details?: string;
-      error: string;
-    };
+export type FetcherError = string | ApiError | RequestError | unknown;
 
 export function extractErrorMessageFromResponse(response: FetcherError, intl: IntlShape): string {
   if (typeof response === 'string') {
     return response;
   }
 
-  if (typeof response.code === 'number' && errorMessages[response.code]) {
+  if (response instanceof RequestError) {
     return intl.formatMessage(errorMessages[response.code]);
   }