@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.
Files changed (81) hide show
  1. package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.cts +2 -0
  2. package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.cts.map +1 -1
  3. package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.mts +2 -0
  4. package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.mts.map +1 -1
  5. package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.ts +2 -0
  6. package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.ts.map +1 -1
  7. package/dist/browser/components/ErrorRender/ErrorAlert.d.cts +2 -1
  8. package/dist/browser/components/ErrorRender/ErrorAlert.d.cts.map +1 -1
  9. package/dist/browser/components/ErrorRender/ErrorAlert.d.mts +2 -1
  10. package/dist/browser/components/ErrorRender/ErrorAlert.d.mts.map +1 -1
  11. package/dist/browser/components/ErrorRender/ErrorAlert.d.ts +2 -1
  12. package/dist/browser/components/ErrorRender/ErrorAlert.d.ts.map +1 -1
  13. package/dist/browser/components/ErrorRender/Props.d.cts +1 -0
  14. package/dist/browser/components/ErrorRender/Props.d.cts.map +1 -1
  15. package/dist/browser/components/ErrorRender/Props.d.mts +1 -0
  16. package/dist/browser/components/ErrorRender/Props.d.mts.map +1 -1
  17. package/dist/browser/components/ErrorRender/Props.d.ts +1 -0
  18. package/dist/browser/components/ErrorRender/Props.d.ts.map +1 -1
  19. package/dist/browser/components/ErrorRender/Render.d.cts.map +1 -1
  20. package/dist/browser/components/ErrorRender/Render.d.mts.map +1 -1
  21. package/dist/browser/components/ErrorRender/Render.d.ts.map +1 -1
  22. package/dist/browser/index.cjs +22 -8
  23. package/dist/browser/index.cjs.map +1 -1
  24. package/dist/browser/index.js +22 -8
  25. package/dist/browser/index.js.map +1 -1
  26. package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.cts +2 -0
  27. package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.cts.map +1 -1
  28. package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.mts +2 -0
  29. package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.mts.map +1 -1
  30. package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.ts +2 -0
  31. package/dist/neutral/components/ErrorBoundary/ThrownErrorBoundary.d.ts.map +1 -1
  32. package/dist/neutral/components/ErrorRender/ErrorAlert.d.cts +2 -1
  33. package/dist/neutral/components/ErrorRender/ErrorAlert.d.cts.map +1 -1
  34. package/dist/neutral/components/ErrorRender/ErrorAlert.d.mts +2 -1
  35. package/dist/neutral/components/ErrorRender/ErrorAlert.d.mts.map +1 -1
  36. package/dist/neutral/components/ErrorRender/ErrorAlert.d.ts +2 -1
  37. package/dist/neutral/components/ErrorRender/ErrorAlert.d.ts.map +1 -1
  38. package/dist/neutral/components/ErrorRender/Props.d.cts +1 -0
  39. package/dist/neutral/components/ErrorRender/Props.d.cts.map +1 -1
  40. package/dist/neutral/components/ErrorRender/Props.d.mts +1 -0
  41. package/dist/neutral/components/ErrorRender/Props.d.mts.map +1 -1
  42. package/dist/neutral/components/ErrorRender/Props.d.ts +1 -0
  43. package/dist/neutral/components/ErrorRender/Props.d.ts.map +1 -1
  44. package/dist/neutral/components/ErrorRender/Render.d.cts.map +1 -1
  45. package/dist/neutral/components/ErrorRender/Render.d.mts.map +1 -1
  46. package/dist/neutral/components/ErrorRender/Render.d.ts.map +1 -1
  47. package/dist/neutral/index.cjs +22 -8
  48. package/dist/neutral/index.cjs.map +1 -1
  49. package/dist/neutral/index.js +22 -8
  50. package/dist/neutral/index.js.map +1 -1
  51. package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.cts +2 -0
  52. package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.cts.map +1 -1
  53. package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.mts +2 -0
  54. package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.mts.map +1 -1
  55. package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.ts +2 -0
  56. package/dist/node/components/ErrorBoundary/ThrownErrorBoundary.d.ts.map +1 -1
  57. package/dist/node/components/ErrorRender/ErrorAlert.d.cts +2 -1
  58. package/dist/node/components/ErrorRender/ErrorAlert.d.cts.map +1 -1
  59. package/dist/node/components/ErrorRender/ErrorAlert.d.mts +2 -1
  60. package/dist/node/components/ErrorRender/ErrorAlert.d.mts.map +1 -1
  61. package/dist/node/components/ErrorRender/ErrorAlert.d.ts +2 -1
  62. package/dist/node/components/ErrorRender/ErrorAlert.d.ts.map +1 -1
  63. package/dist/node/components/ErrorRender/Props.d.cts +1 -0
  64. package/dist/node/components/ErrorRender/Props.d.cts.map +1 -1
  65. package/dist/node/components/ErrorRender/Props.d.mts +1 -0
  66. package/dist/node/components/ErrorRender/Props.d.mts.map +1 -1
  67. package/dist/node/components/ErrorRender/Props.d.ts +1 -0
  68. package/dist/node/components/ErrorRender/Props.d.ts.map +1 -1
  69. package/dist/node/components/ErrorRender/Render.d.cts.map +1 -1
  70. package/dist/node/components/ErrorRender/Render.d.mts.map +1 -1
  71. package/dist/node/components/ErrorRender/Render.d.ts.map +1 -1
  72. package/dist/node/index.cjs +22 -8
  73. package/dist/node/index.cjs.map +1 -1
  74. package/dist/node/index.js +22 -8
  75. package/dist/node/index.js.map +1 -1
  76. package/package.json +1 -1
  77. package/src/components/ErrorBoundary/ThrownErrorBoundary.tsx +4 -2
  78. package/src/components/ErrorRender/ErrorAlert.stories.tsx +42 -0
  79. package/src/components/ErrorRender/ErrorAlert.tsx +27 -11
  80. package/src/components/ErrorRender/Props.ts +1 -0
  81. package/src/components/ErrorRender/Render.tsx +2 -1
@@ -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, error, errorContext, ...props }) => {\n return (\n <Alert severity=\"error\" {...props}>\n <AlertTitle>Whoops! Something went wrong</AlertTitle>\n {errorContext ?\n <Typography variant=\"caption\" my={0.5} lineHeight=\"1\" display=\"block\">\n {errorContext}\n </Typography>\n : null}\n <Typography variant=\"caption\" mr={0.5} fontWeight=\"bold\">\n Error:\n </Typography>\n <Typography variant=\"caption\">{error?.message}</Typography>\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 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} />\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"]}
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
@@ -86,6 +86,6 @@
86
86
  },
87
87
  "sideEffects": false,
88
88
  "types": "dist/browser/index.d.ts",
89
- "version": "2.81.8",
89
+ "version": "2.81.10",
90
90
  "type": "module"
91
91
  }
@@ -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
- export const ErrorAlert: React.FC<ErrorAlertProps> = ({ onCancel, error, errorContext, ...props }) => {
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>Whoops! Something went wrong</AlertTitle>
16
- {errorContext ?
17
- <Typography variant="caption" my={0.5} lineHeight="1" display="block">
18
- {errorContext}
19
- </Typography>
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
- <Typography variant="caption" mr={0.5} fontWeight="bold">
22
- Error:
23
- </Typography>
24
- <Typography variant="caption">{error?.message}</Typography>
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" />
@@ -10,5 +10,6 @@ export interface ErrorRenderProps extends FlexBoxProps {
10
10
  noErrorDisplay?: boolean
11
11
  noReAuth?: boolean
12
12
  onCancel?: () => void
13
+ scope?: string
13
14
  useLocation?: () => Location
14
15
  }
@@ -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>