@xyo-network/react-error 2.81.8 → 2.81.10
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/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":"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","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>
|