diff options
author | Sebastian <sebasjm@gmail.com> | 2023-01-09 20:20:09 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-01-09 20:20:09 -0300 |
commit | 4a781bd0dd8828ce152f6ab2c3f1bbd6b5e826f7 (patch) | |
tree | 5c16976f99eb973ff62d78ed64107ca01df57b99 /packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx | |
parent | 8a70edb2f8e235c3462127b0aa4e1b65aa1aee0b (diff) | |
download | wallet-core-4a781bd0dd8828ce152f6ab2c3f1bbd6b5e826f7.tar.xz |
fix #7153: more error handling
if handler do not trap error then fail at compile time,
all safe handlers push alert on error
errors are typed so they render good information
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx | 75 |
1 files changed, 57 insertions, 18 deletions
diff --git a/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx index a56c82dee..47863d73e 100644 --- a/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx +++ b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx @@ -18,7 +18,6 @@ import { ComponentChildren, Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { useTranslationContext } from "../../../web-util/src/index.browser.js"; import { - ErrorAlert, Alert as AlertNotification, useAlertContext, } from "../context/alert.js"; @@ -37,41 +36,78 @@ function AlertContext({ context: undefined | object; }): VNode { const [more, setMore] = useState(false); + const [wrap, setWrap] = useState(false); const { i18n } = useTranslationContext(); if (!more) { return ( <div style={{ display: "flex", justifyContent: "right" }}> - <a onClick={() => setMore(true)}> + <a + onClick={() => setMore(true)} + style={{ cursor: "pointer", textDecoration: "underline" }} + > <i18n.Translate>more info</i18n.Translate> </a> </div> ); } + const errorInfo = JSON.stringify( + context === undefined ? { cause } : { context, cause }, + undefined, + 2, + ); return ( - <pre style={{ overflow: "overlay" }}> - {JSON.stringify( - context === undefined ? { cause } : { context, cause }, - undefined, - 2, - )} - </pre> + <Fragment> + <div style={{ display: "flex", justifyContent: "right" }}> + <a + onClick={() => setWrap(!wrap)} + style={{ cursor: "pointer", textDecoration: "underline" }} + > + <i18n.Translate>wrap text</i18n.Translate> + </a> + + <a + onClick={() => navigator.clipboard.writeText(errorInfo)} + style={{ cursor: "pointer", textDecoration: "underline" }} + > + <i18n.Translate>copy content</i18n.Translate> + </a> + + <a + onClick={() => setMore(false)} + style={{ cursor: "pointer", textDecoration: "underline" }} + > + <i18n.Translate>less info</i18n.Translate> + </a> + </div> + <pre + style={ + wrap + ? { + whiteSpace: "pre-wrap", + overflowWrap: "anywhere", + } + : { + overflow: "overlay", + } + } + > + {errorInfo} + </pre> + </Fragment> ); } export function ErrorAlertView({ - error: alert, + error, onClose, }: { - error: ErrorAlert; + error: AlertNotification; onClose?: () => Promise<void>; }): VNode { return ( - <Alert title={alert.message} severity={alert.type} onClose={onClose}> - <div style={{ display: "flex", flexDirection: "column" }}> - <div>{alert.description}</div> - <AlertContext context={alert.context} cause={alert.cause} /> - </div> - </Alert> + <Wrapper> + <AlertView alert={error} onClose={onClose} /> + </Wrapper> ); } @@ -86,6 +122,9 @@ export function AlertView({ <Alert title={alert.message} severity={alert.type} onClose={onClose}> <div style={{ display: "flex", flexDirection: "column" }}> <div>{alert.description}</div> + {alert.type === "error" ? ( + <AlertContext context={alert.context} cause={alert.cause} /> + ) : undefined} </div> </Alert> ); @@ -104,5 +143,5 @@ export function CurrentAlerts(): VNode { } function Wrapper({ children }: { children: ComponentChildren }): VNode { - return <div style={{ margin: "2em" }}>{children}</div>; + return <div style={{ margin: "1em" }}>{children}</div>; } |