Properly translate errors in AddThreepid.ts
(#10432)
* Properly translate errors in AddThreepid.ts Part of https://github.com/vector-im/element-web/issues/9597 * Use translated message * Avoid returning undefined ever * More usage * Introduce UserFriendlyError * Use UserFriendlyError * Add more usage instead of normal error * Use types and translatedMessage * Fix lints * Update i18n although it's wrong * Use unknown for easier creation from try/catch * Use types * Use error types * Use types * Update i18n strings * Remove generic re-label of HTTPError See https://github.com/matrix-org/matrix-react-sdk/pull/10432#discussion_r1156468143 The HTTPError already has a good label and it isn't even translated if we re-label it here in this way generically Probably best to just remove in favor of thinking about a translations in general from the `matrix-js-sdk`, see https://github.com/matrix-org/matrix-js-sdk/issues/1309 * Make error message extraction generic * Update i18n strings * Add tests for email addresses * More consistent error logging to actually see error in logs * Consistent error handling * Any is okay because we have a fallback * Check error type * Use dedicated mockResolvedValue function See https://github.com/matrix-org/matrix-react-sdk/pull/10432#discussion_r1163344034
This commit is contained in:
parent
8f8b74b32c
commit
c1e7905ddc
9 changed files with 300 additions and 132 deletions
|
@ -18,12 +18,13 @@ limitations under the License.
|
|||
import React from "react";
|
||||
import { IThreepid } from "matrix-js-sdk/src/@types/threepids";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import { MatrixError } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { _t, UserFriendlyError } from "../../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
|
||||
import Modal from "../../../../Modal";
|
||||
import AddThreepid, { Binding } from "../../../../AddThreepid";
|
||||
import ErrorDialog from "../../dialogs/ErrorDialog";
|
||||
import ErrorDialog, { extractErrorMessageFromError } from "../../dialogs/ErrorDialog";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
|
||||
/*
|
||||
|
@ -98,7 +99,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
|
|||
}
|
||||
this.setState({ bound: bind });
|
||||
} catch (err) {
|
||||
logger.error(`Unable to ${label} email address ${address} ${err}`);
|
||||
logger.error(`changeBinding: Unable to ${label} email address ${address}`, err);
|
||||
this.setState({
|
||||
verifying: false,
|
||||
continueDisabled: false,
|
||||
|
@ -106,7 +107,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
|
|||
});
|
||||
Modal.createDialog(ErrorDialog, {
|
||||
title: errorTitle,
|
||||
description: err && err.message ? err.message : _t("Operation failed"),
|
||||
description: extractErrorMessageFromError(err, _t("Operation failed")),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -133,7 +134,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
|
|||
bound: bind,
|
||||
});
|
||||
} catch (err) {
|
||||
logger.error(`Unable to ${label} email address ${address} ${err}`);
|
||||
logger.error(`changeBindingTangledAddBind: Unable to ${label} email address ${address}`, err);
|
||||
this.setState({
|
||||
verifying: false,
|
||||
continueDisabled: false,
|
||||
|
@ -141,7 +142,7 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
|
|||
});
|
||||
Modal.createDialog(ErrorDialog, {
|
||||
title: errorTitle,
|
||||
description: err && err.message ? err.message : _t("Operation failed"),
|
||||
description: extractErrorMessageFromError(err, _t("Operation failed")),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -170,17 +171,23 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
|
|||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
// Prevent the continue button from being pressed multiple times while we're working
|
||||
this.setState({ continueDisabled: true });
|
||||
try {
|
||||
await this.state.addTask?.checkEmailLinkClicked();
|
||||
this.setState({
|
||||
addTask: null,
|
||||
continueDisabled: false,
|
||||
verifying: false,
|
||||
});
|
||||
} catch (err) {
|
||||
this.setState({ continueDisabled: false });
|
||||
if (err.errcode === "M_THREEPID_AUTH_FAILED") {
|
||||
logger.error(`Unable to verify email address:`, err);
|
||||
|
||||
let underlyingError = err;
|
||||
if (err instanceof UserFriendlyError) {
|
||||
underlyingError = err.cause;
|
||||
}
|
||||
|
||||
if (underlyingError instanceof MatrixError && underlyingError.errcode === "M_THREEPID_AUTH_FAILED") {
|
||||
Modal.createDialog(ErrorDialog, {
|
||||
title: _t("Your email address hasn't been verified yet"),
|
||||
description: _t(
|
||||
|
@ -191,9 +198,12 @@ export class EmailAddress extends React.Component<IEmailAddressProps, IEmailAddr
|
|||
logger.error("Unable to verify email address: " + err);
|
||||
Modal.createDialog(ErrorDialog, {
|
||||
title: _t("Unable to verify email address."),
|
||||
description: err && err.message ? err.message : _t("Operation failed"),
|
||||
description: extractErrorMessageFromError(err, _t("Operation failed")),
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
// Re-enable the continue button so the user can retry
|
||||
this.setState({ continueDisabled: false });
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue