@xyo-network/react-error 2.81.8 → 2.81.10
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.cts +2 -0
- package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.cts.map +1 -1
- package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.mts +2 -0
- package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.mts.map +1 -1
- package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.ts +2 -0
- package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.ts.map +1 -1
- package/dist/browser/components/ErrorRender/ErrorAlert.d.cts +2 -1
- package/dist/browser/components/ErrorRender/ErrorAlert.d.cts.map +1 -1
- package/dist/browser/components/ErrorRender/ErrorAlert.d.mts +2 -1
- package/dist/browser/components/ErrorRender/ErrorAlert.d.mts.map +1 -1
- package/dist/browser/components/ErrorRender/ErrorAlert.d.ts +2 -1
- package/dist/browser/components/ErrorRender/ErrorAlert.d.ts.map +1 -1
- package/dist/browser/components/ErrorRender/Props.d.cts +1 -0
- package/dist/browser/components/ErrorRender/Props.d.cts.map +1 -1
- package/dist/browser/components/ErrorRender/Props.d.mts +1 -0
- package/dist/browser/components/ErrorRender/Props.d.mts.map +1 -1
- package/dist/browser/components/ErrorRender/Props.d.ts +1 -0
- package/dist/browser/components/ErrorRender/Props.d.ts.map +1 -1
- package/dist/browser/components/ErrorRender/Render.d.cts.map +1 -1
- package/dist/browser/components/ErrorRender/Render.d.mts.map +1 -1
- package/dist/browser/components/ErrorRender/Render.d.ts.map +1 -1
- package/dist/browser/index.cjs +22 -8
- package/dist/browser/index.cjs.map +1 -1
- package/dist/browser/index.js +22 -8
- package/dist/browser/index.js.map +1 -1
- package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.cts +2 -0
- package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.cts.map +1 -1
- package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.mts +2 -0
- package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.mts.map +1 -1
- package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.ts +2 -0
- package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.ts.map +1 -1
- package/dist/neutral/components/ErrorRender/ErrorAlert.d.cts +2 -1
- package/dist/neutral/components/ErrorRender/ErrorAlert.d.cts.map +1 -1
- package/dist/neutral/components/ErrorRender/ErrorAlert.d.mts +2 -1
- package/dist/neutral/components/ErrorRender/ErrorAlert.d.mts.map +1 -1
- package/dist/neutral/components/ErrorRender/ErrorAlert.d.ts +2 -1
- package/dist/neutral/components/ErrorRender/ErrorAlert.d.ts.map +1 -1
- package/dist/neutral/components/ErrorRender/Props.d.cts +1 -0
- package/dist/neutral/components/ErrorRender/Props.d.cts.map +1 -1
- package/dist/neutral/components/ErrorRender/Props.d.mts +1 -0
- package/dist/neutral/components/ErrorRender/Props.d.mts.map +1 -1
- package/dist/neutral/components/ErrorRender/Props.d.ts +1 -0
- package/dist/neutral/components/ErrorRender/Props.d.ts.map +1 -1
- package/dist/neutral/components/ErrorRender/Render.d.cts.map +1 -1
- package/dist/neutral/components/ErrorRender/Render.d.mts.map +1 -1
- package/dist/neutral/components/ErrorRender/Render.d.ts.map +1 -1
- package/dist/neutral/index.cjs +22 -8
- package/dist/neutral/index.cjs.map +1 -1
- package/dist/neutral/index.js +22 -8
- package/dist/neutral/index.js.map +1 -1
- package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.cts +2 -0
- package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.cts.map +1 -1
- package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.mts +2 -0
- package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.mts.map +1 -1
- package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.ts +2 -0
- package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.ts.map +1 -1
- package/dist/node/components/ErrorRender/ErrorAlert.d.cts +2 -1
- package/dist/node/components/ErrorRender/ErrorAlert.d.cts.map +1 -1
- package/dist/node/components/ErrorRender/ErrorAlert.d.mts +2 -1
- package/dist/node/components/ErrorRender/ErrorAlert.d.mts.map +1 -1
- package/dist/node/components/ErrorRender/ErrorAlert.d.ts +2 -1
- package/dist/node/components/ErrorRender/ErrorAlert.d.ts.map +1 -1
- package/dist/node/components/ErrorRender/Props.d.cts +1 -0
- package/dist/node/components/ErrorRender/Props.d.cts.map +1 -1
- package/dist/node/components/ErrorRender/Props.d.mts +1 -0
- package/dist/node/components/ErrorRender/Props.d.mts.map +1 -1
- package/dist/node/components/ErrorRender/Props.d.ts +1 -0
- package/dist/node/components/ErrorRender/Props.d.ts.map +1 -1
- package/dist/node/components/ErrorRender/Render.d.cts.map +1 -1
- package/dist/node/components/ErrorRender/Render.d.mts.map +1 -1
- package/dist/node/components/ErrorRender/Render.d.ts.map +1 -1
- package/dist/node/index.cjs +22 -8
- package/dist/node/index.cjs.map +1 -1
- package/dist/node/index.js +22 -8
- package/dist/node/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ErrorBoundary/ThrownErrorBoundary.tsx +4 -2
- package/src/components/ErrorRender/ErrorAlert.stories.tsx +42 -0
- package/src/components/ErrorRender/ErrorAlert.tsx +27 -11
- package/src/components/ErrorRender/Props.ts +1 -0
- package/src/components/ErrorRender/Render.tsx +2 -1
package/dist/node/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../src/components/ErrorBoundary/ThrownErrorBoundary.tsx","../../src/components/ErrorRender/ErrorAlert.tsx","../../src/components/ErrorRender/Render.tsx","../../src/contexts/ErrorReporter/Provider.tsx","../../src/contexts/ErrorReporter/Context.ts","../../src/contexts/ErrorReporter/useRollbar.tsx"],"sourcesContent":["import { ModuleError, ModuleErrorSchema } from '@xyo-network/payload-model'\nimport { Component, ErrorInfo, ReactNode } from 'react'\nimport Rollbar from 'rollbar'\n\nimport { ErrorRender } from '../ErrorRender/index.js'\n\nexport interface ThrownErrorBoundaryProps {\n boundaryName?: string\n children: ReactNode\n errorComponent?: (e: ModuleError, boundaryName?: string) => ReactNode\n rethrow?: boolean\n rollbar?: Rollbar\n}\n\nexport interface ThrownErrorBoundaryState {\n xyoError?: ModuleError\n}\n\nexport class ThrownErrorBoundary extends Component<ThrownErrorBoundaryProps, ThrownErrorBoundaryState> {\n override state: ThrownErrorBoundaryState = {\n xyoError: undefined,\n }\n\n static getDerivedStateFromError(error: Error) {\n return { hasError: true, xyoError: ThrownErrorBoundary.normalizeError(error) } as ThrownErrorBoundaryState\n }\n\n static normalizeError(error: Error | ModuleError): ModuleError {\n return (\n (error as ModuleError).schema === ModuleErrorSchema ?\n error\n : { message: error.message, schema: ModuleErrorSchema, sources: [] }) as ModuleError\n }\n\n override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n const { rethrow, rollbar } = this.props\n const { xyoError } = this.state\n\n rollbar?.error(error)\n\n console.error('Error:', xyoError, errorInfo)\n if (rethrow) {\n throw error\n }\n }\n\n override render() {\n const { xyoError } = this.state\n const { children, boundaryName, errorComponent } = this.props\n if (xyoError) {\n if (errorComponent) {\n return errorComponent(xyoError)\n }\n return <ErrorRender error={xyoError} errorContext={`${boundaryName} Boundary`} />\n }\n\n return children\n }\n}\n","import { ExitToApp as ExitIcon } from '@mui/icons-material'\nimport { Alert, AlertProps, AlertTitle, Typography } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { ModuleError } from '@xyo-network/payload-model'\n\nexport interface ErrorAlertProps extends AlertProps {\n error?: ModuleError | Error\n errorContext?: string\n onCancel?: () => void\n}\n\nexport const ErrorAlert: React.FC<ErrorAlertProps> = ({ onCancel
|
1
|
+
{"version":3,"sources":["../../src/components/ErrorBoundary/ThrownErrorBoundary.tsx","../../src/components/ErrorRender/ErrorAlert.tsx","../../src/components/ErrorRender/Render.tsx","../../src/contexts/ErrorReporter/Provider.tsx","../../src/contexts/ErrorReporter/Context.ts","../../src/contexts/ErrorReporter/useRollbar.tsx"],"sourcesContent":["import { ModuleError, ModuleErrorSchema } from '@xyo-network/payload-model'\nimport { Component, ErrorInfo, ReactNode } from 'react'\nimport Rollbar from 'rollbar'\n\nimport { ErrorRender } from '../ErrorRender/index.js'\n\nexport interface ThrownErrorBoundaryProps {\n boundaryName?: string\n children: ReactNode\n errorComponent?: (e: ModuleError, boundaryName?: string) => ReactNode\n rethrow?: boolean\n rollbar?: Rollbar\n scope?: string\n title?: string\n}\n\nexport interface ThrownErrorBoundaryState {\n xyoError?: ModuleError\n}\n\nexport class ThrownErrorBoundary extends Component<ThrownErrorBoundaryProps, ThrownErrorBoundaryState> {\n override state: ThrownErrorBoundaryState = {\n xyoError: undefined,\n }\n\n static getDerivedStateFromError(error: Error) {\n return { hasError: true, xyoError: ThrownErrorBoundary.normalizeError(error) } as ThrownErrorBoundaryState\n }\n\n static normalizeError(error: Error | ModuleError): ModuleError {\n return (\n (error as ModuleError).schema === ModuleErrorSchema ?\n error\n : { message: error.message, schema: ModuleErrorSchema, sources: [] }) as ModuleError\n }\n\n override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n const { rethrow, rollbar } = this.props\n const { xyoError } = this.state\n\n rollbar?.error(error)\n\n console.error('Error:', xyoError, errorInfo)\n if (rethrow) {\n throw error\n }\n }\n\n override render() {\n const { xyoError } = this.state\n const { children, boundaryName, errorComponent, scope, title } = this.props\n if (xyoError) {\n if (errorComponent) {\n return errorComponent(xyoError)\n }\n return <ErrorRender error={xyoError} errorContext={`${boundaryName} Boundary`} scope={scope} title={title} />\n }\n\n return children\n }\n}\n","import { ExitToApp as ExitIcon } from '@mui/icons-material'\nimport { Alert, AlertProps, AlertTitle, Typography } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { ModuleError } from '@xyo-network/payload-model'\n\nexport interface ErrorAlertProps extends AlertProps {\n error?: ModuleError | Error | string\n /** @deprecated use scope instead */\n errorContext?: string\n onCancel?: () => void\n scope?: string\n}\n\n// eslint-disable-next-line deprecation/deprecation\nexport const ErrorAlert: React.FC<ErrorAlertProps> = ({\n title = 'Whoops! Something went wrong',\n onCancel,\n error = 'An unknown error occurred',\n errorContext,\n scope,\n ...props\n}) => {\n const finalScope = scope ?? errorContext\n return (\n <Alert severity=\"error\" {...props}>\n <AlertTitle>{title}</AlertTitle>\n {finalScope ?\n <div>\n <Typography variant=\"caption\" mr={0.5} fontWeight=\"bold\">\n Scope:\n </Typography>\n <Typography variant=\"caption\">{finalScope}</Typography>\n </div>\n : null}\n <div>\n <Typography variant=\"caption\" mr={0.5} fontWeight=\"bold\">\n Error:\n </Typography>\n <Typography variant=\"caption\">{typeof error === 'string' ? error : error?.message}</Typography>\n </div>\n {onCancel ?\n <ButtonEx variant=\"outlined\" size=\"small\" onClick={onCancel} position=\"absolute\" style={{ right: 8, top: 8 }}>\n <ExitIcon fontSize=\"small\" />\n </ButtonEx>\n : null}\n </Alert>\n )\n}\n","import { FlexCol } from '@xylabs/react-flexbox'\nimport { useEffect } from 'react'\n\nimport { ErrorAlert } from './ErrorAlert.js'\nimport { ErrorRenderProps } from './Props.js'\n\nexport const ErrorRender: React.FC<ErrorRenderProps> = ({\n onCancel,\n error,\n noErrorDisplay = false,\n customError = null,\n children,\n errorContext,\n scope,\n useLocation,\n ...props\n}) => {\n const location = useLocation?.()\n useEffect(() => {\n if (location) {\n // ensure we end up at the same place we are now after logging in\n location.state = {\n from: {\n pathname: window.location.pathname,\n },\n }\n }\n }, [location])\n\n return error ?\n <FlexCol alignItems=\"stretch\" {...props}>\n {noErrorDisplay ?\n customError\n : <FlexCol alignItems=\"center\" {...props}>\n <ErrorAlert error={error} errorContext={errorContext} onCancel={onCancel} scope={scope} />\n </FlexCol>\n }\n </FlexCol>\n : (<>{children}</> ?? null)\n}\n","import { WithChildren } from '@xylabs/react-shared'\nimport { useEffect, useState } from 'react'\nimport Rollbar from 'rollbar'\n\nimport { ErrorReporterContext } from './Context.js'\n\nexport interface ErrorReporterProviderProps {\n rollbar: Rollbar\n}\n\nconst ErrorReporterProvider: React.FC<WithChildren<ErrorReporterProviderProps>> = ({ children, rollbar }) => {\n const [rollbarInstance, setRollBarInstance] = useState<Rollbar>()\n\n useEffect(() => {\n if (rollbarInstance) {\n setRollBarInstance(rollbarInstance)\n }\n }, [rollbar, rollbarInstance])\n\n return <ErrorReporterContext.Provider value={{ rollbar }}>{children}</ErrorReporterContext.Provider>\n}\n\nexport { ErrorReporterProvider }\n","import { createContext } from 'react'\n\nimport { ErrorReporterContextState } from './State.js'\n\nexport const ErrorReporterContext = createContext<ErrorReporterContextState>({})\n","import { useContext } from 'react'\n\nimport { ErrorReporterContext } from './Context.js'\n\nconst useRollbar = () => {\n const context = useContext(ErrorReporterContext)\n if (context === undefined) {\n console.warn('useRollbar must be used within a ErrorReporterContext')\n }\n\n return context ?? {}\n}\n\nexport { useRollbar }\n"],"mappings":";AAAA,SAAsB,yBAAyB;AAC/C,SAAS,iBAAuC;;;ACDhD,SAAS,aAAa,gBAAgB;AACtC,SAAS,OAAmB,YAAY,kBAAkB;AAC1D,SAAS,gBAAgB;AAuBnB,cAEE,YAFF;AAXC,IAAM,aAAwC,CAAC;AAAA,EACpD,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,SAAS;AAC5B,SACE,qBAAC,SAAM,UAAS,SAAS,GAAG,OAC1B;AAAA,wBAAC,cAAY,iBAAM;AAAA,IAClB,aACC,qBAAC,SACC;AAAA,0BAAC,cAAW,SAAQ,WAAU,IAAI,KAAK,YAAW,QAAO,oBAEzD;AAAA,MACA,oBAAC,cAAW,SAAQ,WAAW,sBAAW;AAAA,OAC5C,IACA;AAAA,IACF,qBAAC,SACC;AAAA,0BAAC,cAAW,SAAQ,WAAU,IAAI,KAAK,YAAW,QAAO,oBAEzD;AAAA,MACA,oBAAC,cAAW,SAAQ,WAAW,iBAAO,UAAU,WAAW,QAAQ,+BAAO,SAAQ;AAAA,OACpF;AAAA,IACC,WACC,oBAAC,YAAS,SAAQ,YAAW,MAAK,SAAQ,SAAS,UAAU,UAAS,YAAW,OAAO,EAAE,OAAO,GAAG,KAAK,EAAE,GACzG,8BAAC,YAAS,UAAS,SAAQ,GAC7B,IACA;AAAA,KACJ;AAEJ;;;AC/CA,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAiCd,SAIL,UAJK,OAAAA,YAAA;AA5BL,IAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW;AACjB,YAAU,MAAM;AACd,QAAI,UAAU;AAEZ,eAAS,QAAQ;AAAA,QACf,MAAM;AAAA,UACJ,UAAU,OAAO,SAAS;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,QACH,gBAAAA,KAAC,WAAQ,YAAW,WAAW,GAAG,OAC/B,2BACC,cACA,gBAAAA,KAAC,WAAQ,YAAW,UAAU,GAAG,OAC/B,0BAAAA,KAAC,cAAW,OAAc,cAA4B,UAAoB,OAAc,GAC1F,GAEJ,IACC,gBAAAA,KAAA,YAAG,UAAS,KAAO;AAC1B;;;AFgBa,gBAAAC,YAAA;AAnCN,IAAM,sBAAN,MAAM,6BAA4B,UAA8D;AAAA,EAC5F,QAAkC;AAAA,IACzC,UAAU;AAAA,EACZ;AAAA,EAEA,OAAO,yBAAyB,OAAc;AAC5C,WAAO,EAAE,UAAU,MAAM,UAAU,qBAAoB,eAAe,KAAK,EAAE;AAAA,EAC/E;AAAA,EAEA,OAAO,eAAe,OAAyC;AAC7D,WACG,MAAsB,WAAW,oBAChC,QACA,EAAE,SAAS,MAAM,SAAS,QAAQ,mBAAmB,SAAS,CAAC,EAAE;AAAA,EACvE;AAAA,EAES,kBAAkB,OAAc,WAAsB;AAC7D,UAAM,EAAE,SAAS,QAAQ,IAAI,KAAK;AAClC,UAAM,EAAE,SAAS,IAAI,KAAK;AAE1B,uCAAS,MAAM;AAEf,YAAQ,MAAM,UAAU,UAAU,SAAS;AAC3C,QAAI,SAAS;AACX,YAAM;AAAA,IACR;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,UAAM,EAAE,UAAU,cAAc,gBAAgB,OAAO,MAAM,IAAI,KAAK;AACtE,QAAI,UAAU;AACZ,UAAI,gBAAgB;AAClB,eAAO,eAAe,QAAQ;AAAA,MAChC;AACA,aAAO,gBAAAA,KAAC,eAAY,OAAO,UAAU,cAAc,GAAG,YAAY,aAAa,OAAc,OAAc;AAAA,IAC7G;AAEA,WAAO;AAAA,EACT;AACF;;;AG3DA,SAAS,aAAAC,YAAW,gBAAgB;;;ACDpC,SAAS,qBAAqB;AAIvB,IAAM,uBAAuB,cAAyC,CAAC,CAAC;;;ADetE,gBAAAC,YAAA;AATT,IAAM,wBAA4E,CAAC,EAAE,UAAU,QAAQ,MAAM;AAC3G,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAkB;AAEhE,EAAAC,WAAU,MAAM;AACd,QAAI,iBAAiB;AACnB,yBAAmB,eAAe;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,SAAS,eAAe,CAAC;AAE7B,SAAO,gBAAAD,KAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,QAAQ,GAAI,UAAS;AACtE;;;AEpBA,SAAS,kBAAkB;AAI3B,IAAM,aAAa,MAAM;AACvB,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,YAAY,QAAW;AACzB,YAAQ,KAAK,uDAAuD;AAAA,EACtE;AAEA,SAAO,WAAW,CAAC;AACrB;","names":["jsx","jsx","useEffect","jsx","useEffect"]}
|
package/package.json
CHANGED
@@ -10,6 +10,8 @@ export interface ThrownErrorBoundaryProps {
|
|
10
10
|
errorComponent?: (e: ModuleError, boundaryName?: string) => ReactNode
|
11
11
|
rethrow?: boolean
|
12
12
|
rollbar?: Rollbar
|
13
|
+
scope?: string
|
14
|
+
title?: string
|
13
15
|
}
|
14
16
|
|
15
17
|
export interface ThrownErrorBoundaryState {
|
@@ -46,12 +48,12 @@ export class ThrownErrorBoundary extends Component<ThrownErrorBoundaryProps, Thr
|
|
46
48
|
|
47
49
|
override render() {
|
48
50
|
const { xyoError } = this.state
|
49
|
-
const { children, boundaryName, errorComponent } = this.props
|
51
|
+
const { children, boundaryName, errorComponent, scope, title } = this.props
|
50
52
|
if (xyoError) {
|
51
53
|
if (errorComponent) {
|
52
54
|
return errorComponent(xyoError)
|
53
55
|
}
|
54
|
-
return <ErrorRender error={xyoError} errorContext={`${boundaryName} Boundary`} />
|
56
|
+
return <ErrorRender error={xyoError} errorContext={`${boundaryName} Boundary`} scope={scope} title={title} />
|
55
57
|
}
|
56
58
|
|
57
59
|
return children
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import { Meta, StoryFn } from '@storybook/react'
|
2
|
+
import React from 'react'
|
3
|
+
|
4
|
+
import { ErrorAlert } from './ErrorAlert.js'
|
5
|
+
|
6
|
+
const StorybookEntry: Meta = {
|
7
|
+
argTypes: {},
|
8
|
+
component: ErrorAlert,
|
9
|
+
parameters: {
|
10
|
+
docs: {
|
11
|
+
page: null,
|
12
|
+
},
|
13
|
+
},
|
14
|
+
title: 'error/ErrorAlert',
|
15
|
+
}
|
16
|
+
|
17
|
+
const Template: StoryFn<typeof ErrorAlert> = (props) => {
|
18
|
+
return <ErrorAlert {...props} />
|
19
|
+
}
|
20
|
+
|
21
|
+
const Default = Template.bind({})
|
22
|
+
Default.args = {}
|
23
|
+
|
24
|
+
const WithTitle = Template.bind({})
|
25
|
+
WithTitle.args = { title: 'Oh No!' }
|
26
|
+
|
27
|
+
const WithError = Template.bind({})
|
28
|
+
WithError.args = { error: 'An error happened' }
|
29
|
+
|
30
|
+
const WithScope = Template.bind({})
|
31
|
+
WithScope.args = { scope: 'Storybook' }
|
32
|
+
|
33
|
+
const WithErrorAndScope = Template.bind({})
|
34
|
+
WithErrorAndScope.args = { error: 'An error happened', scope: 'Storybook' }
|
35
|
+
|
36
|
+
const WithErrorAndScopeAndTitle = Template.bind({})
|
37
|
+
WithErrorAndScopeAndTitle.args = { error: 'An error happened', scope: 'Storybook', title: 'Oh No!' }
|
38
|
+
|
39
|
+
export { Default, WithError, WithErrorAndScope, WithErrorAndScopeAndTitle, WithScope, WithTitle }
|
40
|
+
|
41
|
+
// eslint-disable-next-line import/no-default-export
|
42
|
+
export default StorybookEntry
|
@@ -4,24 +4,40 @@ import { ButtonEx } from '@xylabs/react-button'
|
|
4
4
|
import { ModuleError } from '@xyo-network/payload-model'
|
5
5
|
|
6
6
|
export interface ErrorAlertProps extends AlertProps {
|
7
|
-
error?: ModuleError | Error
|
7
|
+
error?: ModuleError | Error | string
|
8
|
+
/** @deprecated use scope instead */
|
8
9
|
errorContext?: string
|
9
10
|
onCancel?: () => void
|
11
|
+
scope?: string
|
10
12
|
}
|
11
13
|
|
12
|
-
|
14
|
+
// eslint-disable-next-line deprecation/deprecation
|
15
|
+
export const ErrorAlert: React.FC<ErrorAlertProps> = ({
|
16
|
+
title = 'Whoops! Something went wrong',
|
17
|
+
onCancel,
|
18
|
+
error = 'An unknown error occurred',
|
19
|
+
errorContext,
|
20
|
+
scope,
|
21
|
+
...props
|
22
|
+
}) => {
|
23
|
+
const finalScope = scope ?? errorContext
|
13
24
|
return (
|
14
25
|
<Alert severity="error" {...props}>
|
15
|
-
<AlertTitle>
|
16
|
-
{
|
17
|
-
<
|
18
|
-
{
|
19
|
-
|
26
|
+
<AlertTitle>{title}</AlertTitle>
|
27
|
+
{finalScope ?
|
28
|
+
<div>
|
29
|
+
<Typography variant="caption" mr={0.5} fontWeight="bold">
|
30
|
+
Scope:
|
31
|
+
</Typography>
|
32
|
+
<Typography variant="caption">{finalScope}</Typography>
|
33
|
+
</div>
|
20
34
|
: null}
|
21
|
-
<
|
22
|
-
|
23
|
-
|
24
|
-
|
35
|
+
<div>
|
36
|
+
<Typography variant="caption" mr={0.5} fontWeight="bold">
|
37
|
+
Error:
|
38
|
+
</Typography>
|
39
|
+
<Typography variant="caption">{typeof error === 'string' ? error : error?.message}</Typography>
|
40
|
+
</div>
|
25
41
|
{onCancel ?
|
26
42
|
<ButtonEx variant="outlined" size="small" onClick={onCancel} position="absolute" style={{ right: 8, top: 8 }}>
|
27
43
|
<ExitIcon fontSize="small" />
|
@@ -11,6 +11,7 @@ export const ErrorRender: React.FC<ErrorRenderProps> = ({
|
|
11
11
|
customError = null,
|
12
12
|
children,
|
13
13
|
errorContext,
|
14
|
+
scope,
|
14
15
|
useLocation,
|
15
16
|
...props
|
16
17
|
}) => {
|
@@ -31,7 +32,7 @@ export const ErrorRender: React.FC<ErrorRenderProps> = ({
|
|
31
32
|
{noErrorDisplay ?
|
32
33
|
customError
|
33
34
|
: <FlexCol alignItems="center" {...props}>
|
34
|
-
<ErrorAlert error={error} errorContext={errorContext} onCancel={onCancel} />
|
35
|
+
<ErrorAlert error={error} errorContext={errorContext} onCancel={onCancel} scope={scope} />
|
35
36
|
</FlexCol>
|
36
37
|
}
|
37
38
|
</FlexCol>
|