diff --git a/frontend/apps/remark42/app/common/types.ts b/frontend/apps/remark42/app/common/types.ts index 3d02ee5609..173cf17e92 100644 --- a/frontend/apps/remark42/app/common/types.ts +++ b/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; } diff --git a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx index ad26b5005c..8e028eb8fb 100644 --- a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx +++ b/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); } diff --git a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-telegram/comment-form__subscribe-by-telegram.tsx b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-telegram/comment-form__subscribe-by-telegram.tsx index 37464023ce..c504508df5 100644 --- a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-telegram/comment-form__subscribe-by-telegram.tsx +++ b/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); } diff --git a/frontend/apps/remark42/app/components/comment-form/comment-form.tsx b/frontend/apps/remark42/app/components/comment-form/comment-form.tsx index 3219ac3cb4..b30efd87d3 100644 --- a/frontend/apps/remark42/app/components/comment-form/comment-form.tsx +++ b/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 { 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 { 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 { } /** wrapper with error handling for props.uploadImage */ - uploadImage = (file: File): Promise => { + uploadImage = async (file: File): Promise => { 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), }) ); }); diff --git a/frontend/apps/remark42/app/components/comment/comment-votes.tsx b/frontend/apps/remark42/app/components/comment/comment-votes.tsx index acc98ad14c..76da83e0b4 100644 --- a/frontend/apps/remark42/app/components/comment/comment-votes.tsx +++ b/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); } diff --git a/frontend/apps/remark42/app/utils/errorUtils.ts b/frontend/apps/remark42/app/utils/errorUtils.ts index df17c922a2..db68a846e7 100644 --- a/frontend/apps/remark42/app/utils/errorUtils.ts +++ b/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({ 'fetch-error': { @@ -111,25 +112,14 @@ export const errorMessages = defineMessages({ }, }); -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]); }