diff --git a/src/index.js.flow b/src/index.js.flow index b6f67366d..d59404dcf 100644 --- a/src/index.js.flow +++ b/src/index.js.flow @@ -465,29 +465,30 @@ export type JsxAST = { children: (React$Node | string)[], ... } & AST; +export type AdditionalProps = { + onError?: (error: Error) => void, + override?: SvgProps, +} & SvgProps; export type UriProps = { uri: string | null, - override?: SvgProps, ... -} & SvgProps; +} & AdditionalProps; export type UriState = { xml: string | null, ... }; export type XmlProps = { xml: string | null, - override?: SvgProps, ... -} & SvgProps; +} & AdditionalProps; export type XmlState = { ast: JsxAST | null, ... }; export type AstProps = { ast: JsxAST | null, - override?: SvgProps, ... -} & SvgProps; +} & AdditionalProps; export type Middleware = (ast: XmlAST) => XmlAST; declare export function parse( source: string, diff --git a/src/xml.tsx b/src/xml.tsx index ddfa5966c..828f104e2 100644 --- a/src/xml.tsx +++ b/src/xml.tsx @@ -81,13 +81,18 @@ export interface JsxAST extends AST { children: (JSX.Element | string)[]; } -export type UriProps = { uri: string | null; override?: Object }; +export type AdditionalProps = { + onError?: (error: Error) => void; + override?: Object; +}; + +export type UriProps = { uri: string | null } & AdditionalProps; export type UriState = { xml: string | null }; -export type XmlProps = { xml: string | null; override?: Object }; +export type XmlProps = { xml: string | null } & AdditionalProps; export type XmlState = { ast: JsxAST | null }; -export type AstProps = { ast: JsxAST | null; override?: Object }; +export type AstProps = { ast: JsxAST | null } & AdditionalProps; export function SvgAst({ ast, override }: AstProps) { if (!ast) { @@ -101,12 +106,20 @@ export function SvgAst({ ast, override }: AstProps) { ); } +export const err = console.error.bind(console); + export function SvgXml(props: XmlProps) { - const { xml, override } = props; + const { onError = err, xml, override } = props; const ast = useMemo(() => (xml !== null ? parse(xml) : null), [ xml, ]); - return ; + + try { + return ; + } catch (error) { + onError(error); + return null; + } } export async function fetchText(uri: string) { @@ -114,18 +127,16 @@ export async function fetchText(uri: string) { return await response.text(); } -export const err = console.error.bind(console); - export function SvgUri(props: UriProps) { - const { uri } = props; + const { onError = err, uri } = props; const [xml, setXml] = useState(null); useEffect(() => { uri ? fetchText(uri) .then(setXml) - .catch(err) + .catch(onError) : setXml(null); - }, [uri]); + }, [onError, uri]); return ; }