@xyo-network/react-error 2.40.2 → 2.40.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/XyoErrorBoundary/ThrownErrorBoundary.d.ts +3 -1
- package/dist/cjs/components/XyoErrorBoundary/ThrownErrorBoundary.d.ts.map +1 -1
- package/dist/cjs/components/XyoErrorBoundary/ThrownErrorBoundary.js +9 -3
- package/dist/cjs/components/XyoErrorBoundary/ThrownErrorBoundary.js.map +1 -1
- package/dist/cjs/components/XyoErrorRender/ErrorAlert.d.ts +1 -0
- package/dist/cjs/components/XyoErrorRender/ErrorAlert.d.ts.map +1 -1
- package/dist/cjs/components/XyoErrorRender/ErrorAlert.js +2 -2
- package/dist/cjs/components/XyoErrorRender/ErrorAlert.js.map +1 -1
- package/dist/cjs/components/XyoErrorRender/Props.d.ts +1 -0
- package/dist/cjs/components/XyoErrorRender/Props.d.ts.map +1 -1
- package/dist/cjs/components/XyoErrorRender/Render.d.ts.map +1 -1
- package/dist/cjs/components/XyoErrorRender/Render.js +2 -2
- package/dist/cjs/components/XyoErrorRender/Render.js.map +1 -1
- package/dist/docs.json +719 -565
- package/dist/esm/components/XyoErrorBoundary/ThrownErrorBoundary.d.ts +3 -1
- package/dist/esm/components/XyoErrorBoundary/ThrownErrorBoundary.d.ts.map +1 -1
- package/dist/esm/components/XyoErrorBoundary/ThrownErrorBoundary.js +9 -3
- package/dist/esm/components/XyoErrorBoundary/ThrownErrorBoundary.js.map +1 -1
- package/dist/esm/components/XyoErrorRender/ErrorAlert.d.ts +1 -0
- package/dist/esm/components/XyoErrorRender/ErrorAlert.d.ts.map +1 -1
- package/dist/esm/components/XyoErrorRender/ErrorAlert.js +2 -2
- package/dist/esm/components/XyoErrorRender/ErrorAlert.js.map +1 -1
- package/dist/esm/components/XyoErrorRender/Props.d.ts +1 -0
- package/dist/esm/components/XyoErrorRender/Props.d.ts.map +1 -1
- package/dist/esm/components/XyoErrorRender/Render.d.ts.map +1 -1
- package/dist/esm/components/XyoErrorRender/Render.js +2 -2
- package/dist/esm/components/XyoErrorRender/Render.js.map +1 -1
- package/package.json +1 -1
- package/src/components/XyoErrorBoundary/ThrownErrorBoundary.stories.tsx +1 -1
- package/src/components/XyoErrorBoundary/ThrownErrorBoundary.tsx +12 -4
- package/src/components/XyoErrorRender/ErrorAlert.tsx +7 -1
- package/src/components/XyoErrorRender/Props.ts +1 -0
- package/src/components/XyoErrorRender/Render.tsx +9 -2
|
@@ -7,7 +7,8 @@ export interface XyoErrorBoundaryProps {
|
|
|
7
7
|
children: ReactNode;
|
|
8
8
|
rollbar?: Rollbar;
|
|
9
9
|
basePageProps?: BasePageProps;
|
|
10
|
-
errorComponent?: (e:
|
|
10
|
+
errorComponent?: (e: XyoError, boundaryName?: string) => ReactNode;
|
|
11
|
+
boundaryName?: string;
|
|
11
12
|
}
|
|
12
13
|
export interface XyoErrorBoundaryState {
|
|
13
14
|
xyoError?: XyoError;
|
|
@@ -15,6 +16,7 @@ export interface XyoErrorBoundaryState {
|
|
|
15
16
|
export declare class XyoThrownErrorBoundary extends Component<XyoErrorBoundaryProps, XyoErrorBoundaryState> {
|
|
16
17
|
state: XyoErrorBoundaryState;
|
|
17
18
|
static normalizeError(error: Error | XyoError): XyoError;
|
|
19
|
+
static getDerivedStateFromError(error: Error): XyoErrorBoundaryState;
|
|
18
20
|
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
19
21
|
render(): string | number | boolean | import("react").ReactFragment | JSX.Element | null | undefined;
|
|
20
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThrownErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorBoundary/ThrownErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAkB,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,OAAO,MAAM,SAAS,CAAA;AAI7B,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"ThrownErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorBoundary/ThrownErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAkB,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,OAAO,MAAM,SAAS,CAAA;AAI7B,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,SAAS,CAAA;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB;AAED,qBAAa,sBAAuB,SAAQ,SAAS,CAAC,qBAAqB,EAAE,qBAAqB,CAAC;IAC1F,KAAK,EAAE,qBAAqB,CAElC;WAEa,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ;IAI/D,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;IAIrC,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAYpD,MAAM;CAYd"}
|
|
@@ -9,9 +9,12 @@ export class XyoThrownErrorBoundary extends Component {
|
|
|
9
9
|
static normalizeError(error) {
|
|
10
10
|
return (error.schema === XyoErrorSchema ? error : { message: error.message, schema: XyoErrorSchema, sources: [] });
|
|
11
11
|
}
|
|
12
|
+
static getDerivedStateFromError(error) {
|
|
13
|
+
return { hasError: true, xyoError: XyoThrownErrorBoundary.normalizeError(error) };
|
|
14
|
+
}
|
|
12
15
|
componentDidCatch(error, errorInfo) {
|
|
13
16
|
const { rethrow, rollbar } = this.props;
|
|
14
|
-
const xyoError =
|
|
17
|
+
const { xyoError } = this.state;
|
|
15
18
|
rollbar?.error(error);
|
|
16
19
|
console.error('XyoError:', xyoError, errorInfo);
|
|
17
20
|
if (rethrow) {
|
|
@@ -20,9 +23,12 @@ export class XyoThrownErrorBoundary extends Component {
|
|
|
20
23
|
}
|
|
21
24
|
render() {
|
|
22
25
|
const { xyoError } = this.state;
|
|
23
|
-
const { children } = this.props;
|
|
26
|
+
const { children, boundaryName, errorComponent } = this.props;
|
|
24
27
|
if (xyoError) {
|
|
25
|
-
|
|
28
|
+
if (errorComponent) {
|
|
29
|
+
return errorComponent(xyoError);
|
|
30
|
+
}
|
|
31
|
+
return _jsx(XyoErrorRender, { xyoError: xyoError, errorContext: `${boundaryName} Boundary` });
|
|
26
32
|
}
|
|
27
33
|
return children;
|
|
28
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThrownErrorBoundary.js","sourceRoot":"","sources":["../../../../src/components/XyoErrorBoundary/ThrownErrorBoundary.tsx"],"names":[],"mappings":";AACA,OAAO,EAAY,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAA;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"ThrownErrorBoundary.js","sourceRoot":"","sources":["../../../../src/components/XyoErrorBoundary/ThrownErrorBoundary.tsx"],"names":[],"mappings":";AACA,OAAO,EAAY,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAA;AAGvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAelD,MAAM,OAAO,sBAAuB,SAAQ,SAAuD;IAC1F,KAAK,GAA0B;QACpC,QAAQ,EAAE,SAAS;KACpB,CAAA;IAEM,MAAM,CAAC,cAAc,CAAC,KAAuB;QAClD,OAAO,CAAE,KAAkB,CAAC,MAAM,KAAK,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,EAAE,CAAa,CAAA;IAC9I,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,sBAAsB,CAAC,cAAc,CAAC,KAAK,CAAC,EAA2B,CAAA;IAC5G,CAAC;IAEM,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QACzD,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QACvC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE/B,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;QAErB,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAA;QAC/C,IAAI,OAAO,EAAE;YACX,MAAM,KAAK,CAAA;SACZ;IACH,CAAC;IAEM,MAAM;QACX,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC/B,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC7D,IAAI,QAAQ,EAAE;YACZ,IAAI,cAAc,EAAE;gBAClB,OAAO,cAAc,CAAC,QAAQ,CAAC,CAAA;aAChC;YACD,OAAO,KAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,YAAY,WAAW,GAAI,CAAA;SACxF;QAED,OAAO,QAAQ,CAAA;IACjB,CAAC;CACF"}
|
|
@@ -3,6 +3,7 @@ import { AlertProps } from '@mui/material';
|
|
|
3
3
|
import { XyoError } from '@xyo-network/module';
|
|
4
4
|
export interface XyoErrorAlertProps extends AlertProps {
|
|
5
5
|
error?: XyoError;
|
|
6
|
+
errorContext?: string;
|
|
6
7
|
}
|
|
7
8
|
export declare const XyoErrorAlert: React.FC<XyoErrorAlertProps>;
|
|
8
9
|
//# sourceMappingURL=ErrorAlert.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/ErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAA0B,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,KAAK,CAAC,EAAE,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"ErrorAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/ErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,UAAU,EAA0B,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAetD,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Alert, AlertTitle, Typography } from '@mui/material';
|
|
3
|
-
export const XyoErrorAlert = ({ error, ...props }) => {
|
|
4
|
-
return (_jsxs(Alert, { severity: "error", ...props, children: [_jsx(AlertTitle, { children: "Whoops! Something went wrong" }), _jsx(Typography, { variant: "caption", mr: 0.5, fontWeight: "bold", children: "Error:" }), _jsx(Typography, { variant: "caption", children: error?.message })] }));
|
|
3
|
+
export const XyoErrorAlert = ({ error, errorContext, ...props }) => {
|
|
4
|
+
return (_jsxs(Alert, { severity: "error", ...props, children: [_jsx(AlertTitle, { children: "Whoops! Something went wrong" }), errorContext ? (_jsx(Typography, { variant: "caption", my: 0.5, lineHeight: "1", display: "block", children: errorContext })) : null, _jsx(Typography, { variant: "caption", mr: 0.5, fontWeight: "bold", children: "Error:" }), _jsx(Typography, { variant: "caption", children: error?.message })] }));
|
|
5
5
|
};
|
|
6
6
|
//# sourceMappingURL=ErrorAlert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorAlert.js","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/ErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"ErrorAlert.js","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/ErrorAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAQzE,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC/F,OAAO,CACL,MAAC,KAAK,IAAC,QAAQ,EAAC,OAAO,KAAK,KAAK,aAC/B,KAAC,UAAU,+CAA0C,EACpD,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,GAAG,EAAE,UAAU,EAAC,GAAG,EAAC,OAAO,EAAC,OAAO,YAClE,YAAY,GACF,CACd,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAE,GAAG,EAAE,UAAU,EAAC,MAAM,uBAE3C,EACb,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,YAAE,KAAK,EAAE,OAAO,GAAc,IACrD,CACT,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Props.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/Props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Props.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/Props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Render.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/Render.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE7C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,
|
|
1
|
+
{"version":3,"file":"Render.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/Render.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE7C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiCxD,CAAA"}
|
|
@@ -3,7 +3,7 @@ import { FlexCol } from '@xylabs/react-flexbox';
|
|
|
3
3
|
import { useEffect } from 'react';
|
|
4
4
|
import { useLocation } from 'react-router-dom';
|
|
5
5
|
import { XyoErrorAlert } from './ErrorAlert';
|
|
6
|
-
export const XyoErrorRender = ({ xyoError, noErrorDisplay = false, customError = null, children, ...props }) => {
|
|
6
|
+
export const XyoErrorRender = ({ xyoError, noErrorDisplay = false, customError = null, children, errorContext, ...props }) => {
|
|
7
7
|
const location = useLocation();
|
|
8
8
|
useEffect(() => {
|
|
9
9
|
// ensure we end up at the same place we are now after logging in
|
|
@@ -14,7 +14,7 @@ export const XyoErrorRender = ({ xyoError, noErrorDisplay = false, customError =
|
|
|
14
14
|
};
|
|
15
15
|
}, [location]);
|
|
16
16
|
if (xyoError) {
|
|
17
|
-
return (_jsx(FlexCol, { alignItems: "stretch", ...props, children: noErrorDisplay ? (customError) : (_jsx(FlexCol, { alignItems: "center", ...props, children: _jsx(XyoErrorAlert, { error: xyoError }) })) }));
|
|
17
|
+
return (_jsx(FlexCol, { alignItems: "stretch", ...props, children: noErrorDisplay ? (customError) : (_jsx(FlexCol, { alignItems: "center", ...props, children: _jsx(XyoErrorAlert, { error: xyoError, errorContext: errorContext }) })) }));
|
|
18
18
|
}
|
|
19
19
|
else {
|
|
20
20
|
return _jsx(_Fragment, { children: children }) ?? null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Render.js","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/Render.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAG5C,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,
|
|
1
|
+
{"version":3,"file":"Render.js","sourceRoot":"","sources":["../../../../src/components/XyoErrorRender/Render.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAG5C,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,QAAQ,EACR,cAAc,GAAG,KAAK,EACtB,WAAW,GAAG,IAAI,EAClB,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,iEAAiE;QACjE,QAAQ,CAAC,KAAK,GAAG;YACf,IAAI,EAAE;gBACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,QAAQ;aACnC;SACF,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,KAAC,OAAO,IAAC,UAAU,EAAC,SAAS,KAAK,KAAK,YACpC,cAAc,CAAC,CAAC,CAAC,CAChB,WAAW,CACZ,CAAC,CAAC,CAAC,CACF,KAAC,OAAO,IAAC,UAAU,EAAC,QAAQ,KAAK,KAAK,YACpC,KAAC,aAAa,IAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,GAAI,GACtD,CACX,GACO,CACX,CAAA;KACF;SAAM;QACL,OAAO,4BAAG,QAAQ,GAAI,IAAI,IAAI,CAAA;KAC/B;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -59,7 +59,7 @@ const Template: ComponentStory<typeof XyoThrownErrorBoundary> = ({ basePageProps
|
|
|
59
59
|
<NetworkMemoryProvider>
|
|
60
60
|
<ApiProvider apiDomain="http://localhost:8080">
|
|
61
61
|
<ArchivesProvider>
|
|
62
|
-
<XyoThrownErrorBoundary basePageProps={basePageProps} errorComponent={errorComponent}>
|
|
62
|
+
<XyoThrownErrorBoundary basePageProps={basePageProps} errorComponent={errorComponent} boundaryName="StoryBook">
|
|
63
63
|
<Alert severity="info">Use React Dev Tools to trigger and error within the boundary</Alert>
|
|
64
64
|
</XyoThrownErrorBoundary>
|
|
65
65
|
</ArchivesProvider>
|
|
@@ -10,7 +10,8 @@ export interface XyoErrorBoundaryProps {
|
|
|
10
10
|
children: ReactNode
|
|
11
11
|
rollbar?: Rollbar
|
|
12
12
|
basePageProps?: BasePageProps
|
|
13
|
-
errorComponent?: (e:
|
|
13
|
+
errorComponent?: (e: XyoError, boundaryName?: string) => ReactNode
|
|
14
|
+
boundaryName?: string
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
export interface XyoErrorBoundaryState {
|
|
@@ -26,9 +27,13 @@ export class XyoThrownErrorBoundary extends Component<XyoErrorBoundaryProps, Xyo
|
|
|
26
27
|
return ((error as XyoError).schema === XyoErrorSchema ? error : { message: error.message, schema: XyoErrorSchema, sources: [] }) as XyoError
|
|
27
28
|
}
|
|
28
29
|
|
|
30
|
+
static getDerivedStateFromError(error: Error) {
|
|
31
|
+
return { hasError: true, xyoError: XyoThrownErrorBoundary.normalizeError(error) } as XyoErrorBoundaryState
|
|
32
|
+
}
|
|
33
|
+
|
|
29
34
|
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
|
30
35
|
const { rethrow, rollbar } = this.props
|
|
31
|
-
const xyoError =
|
|
36
|
+
const { xyoError } = this.state
|
|
32
37
|
|
|
33
38
|
rollbar?.error(error)
|
|
34
39
|
|
|
@@ -40,9 +45,12 @@ export class XyoThrownErrorBoundary extends Component<XyoErrorBoundaryProps, Xyo
|
|
|
40
45
|
|
|
41
46
|
public render() {
|
|
42
47
|
const { xyoError } = this.state
|
|
43
|
-
const { children } = this.props
|
|
48
|
+
const { children, boundaryName, errorComponent } = this.props
|
|
44
49
|
if (xyoError) {
|
|
45
|
-
|
|
50
|
+
if (errorComponent) {
|
|
51
|
+
return errorComponent(xyoError)
|
|
52
|
+
}
|
|
53
|
+
return <XyoErrorRender xyoError={xyoError} errorContext={`${boundaryName} Boundary`} />
|
|
46
54
|
}
|
|
47
55
|
|
|
48
56
|
return children
|
|
@@ -3,12 +3,18 @@ import { XyoError } from '@xyo-network/module'
|
|
|
3
3
|
|
|
4
4
|
export interface XyoErrorAlertProps extends AlertProps {
|
|
5
5
|
error?: XyoError
|
|
6
|
+
errorContext?: string
|
|
6
7
|
}
|
|
7
8
|
|
|
8
|
-
export const XyoErrorAlert: React.FC<XyoErrorAlertProps> = ({ error, ...props }) => {
|
|
9
|
+
export const XyoErrorAlert: React.FC<XyoErrorAlertProps> = ({ error, errorContext, ...props }) => {
|
|
9
10
|
return (
|
|
10
11
|
<Alert severity="error" {...props}>
|
|
11
12
|
<AlertTitle>Whoops! Something went wrong</AlertTitle>
|
|
13
|
+
{errorContext ? (
|
|
14
|
+
<Typography variant="caption" my={0.5} lineHeight="1" display="block">
|
|
15
|
+
{errorContext}
|
|
16
|
+
</Typography>
|
|
17
|
+
) : null}
|
|
12
18
|
<Typography variant="caption" mr={0.5} fontWeight="bold">
|
|
13
19
|
Error:
|
|
14
20
|
</Typography>
|
|
@@ -5,7 +5,14 @@ import { useLocation } from 'react-router-dom'
|
|
|
5
5
|
import { XyoErrorAlert } from './ErrorAlert'
|
|
6
6
|
import { XyoErrorRenderProps } from './Props'
|
|
7
7
|
|
|
8
|
-
export const XyoErrorRender: React.FC<XyoErrorRenderProps> = ({
|
|
8
|
+
export const XyoErrorRender: React.FC<XyoErrorRenderProps> = ({
|
|
9
|
+
xyoError,
|
|
10
|
+
noErrorDisplay = false,
|
|
11
|
+
customError = null,
|
|
12
|
+
children,
|
|
13
|
+
errorContext,
|
|
14
|
+
...props
|
|
15
|
+
}) => {
|
|
9
16
|
const location = useLocation()
|
|
10
17
|
useEffect(() => {
|
|
11
18
|
// ensure we end up at the same place we are now after logging in
|
|
@@ -23,7 +30,7 @@ export const XyoErrorRender: React.FC<XyoErrorRenderProps> = ({ xyoError, noErro
|
|
|
23
30
|
customError
|
|
24
31
|
) : (
|
|
25
32
|
<FlexCol alignItems="center" {...props}>
|
|
26
|
-
<XyoErrorAlert error={xyoError} />
|
|
33
|
+
<XyoErrorAlert error={xyoError} errorContext={errorContext} />
|
|
27
34
|
</FlexCol>
|
|
28
35
|
)}
|
|
29
36
|
</FlexCol>
|