@xyo-network/react-error 4.1.2 → 4.1.4

package/dist/browser/components/ErrorRender/Render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Render.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorRender/Render.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgClD,CAAA"}
+{"version":3,"file":"Render.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorRender/Render.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsClD,CAAA"}

package/dist/browser/index.mjs

@@ -133,6 +133,13 @@ var ErrorRender = /* @__PURE__ */ __name(({ onCancel, error, noErrorDisplay = fa
   }, [
     location
   ]);
+  useEffect(() => {
+    if (error) {
+      globalThis.rollbar?.error(error);
+    }
+  }, [
+    error
+  ]);
   return error ? /* @__PURE__ */ React4.createElement(FlexCol2, {
     alignItems: "stretch",
     ...props

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ErrorBoundary.tsx","../../src/components/ErrorBoundary/ThrownErrorBoundary.tsx","../../src/contexts/ErrorReporter/Provider.tsx","../../src/contexts/ErrorReporter/Context.ts","../../src/contexts/ErrorReporter/useErrorReporter.tsx","../../src/components/ErrorRender/ErrorAlert.tsx","../../src/components/ErrorRender/Render.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { ErrorInfo, ReactNode } from 'react'\nimport React, { Component } from 'react'\n\nexport interface ErrorBoundaryProps {\n  children: ReactNode\n  // fallback as a static ReactNode value\n  fallback?: ReactNode\n  // fallback element that can receive the error as a prop\n  fallbackWithError?: (error: Error) => ReactNode\n  scope?: string\n}\n\nexport interface ErrorBoundaryState {\n  error?: Error\n}\n\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props)\n    this.state = { error: undefined }\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error }\n  }\n\n  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    console.error(`${error}: ${errorInfo}`)\n  }\n\n  override render() {\n    if (this.state.error) {\n      if (this.props.fallbackWithError) {\n        return this.props.fallbackWithError(this.state.error)\n      }\n      return (\n        this.props.fallback ?? (\n          <FlexCol>\n            <Typography variant=\"h1\">Something went wrong.</Typography>\n            {this.props.scope && (\n              <Typography variant=\"h2\">\n                [\n                {this.props.scope}\n                ]\n              </Typography>\n            )}\n            <Typography variant=\"body1\">\n              [\n              {this.state.error?.message}\n              ]\n            </Typography>\n          </FlexCol>\n        )\n      )\n    }\n\n    return this.props.children\n  }\n}\n","import { useRollbar } from '@rollbar/react'\nimport type { ModuleError } from '@xyo-network/payload-model'\nimport { ModuleErrorSchema } from '@xyo-network/payload-model'\nimport type {\n  ErrorInfo, FC, ReactNode,\n} from 'react'\nimport React, { Component } from 'react'\nimport type Rollbar from 'rollbar'\n\nimport { useErrorReporter } from '../../contexts/index.ts'\nimport { ErrorRender } from '../ErrorRender/index.ts'\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\nclass ThrownErrorBoundaryInner extends Component<ThrownErrorBoundaryProps, ThrownErrorBoundaryState> {\n  override state: ThrownErrorBoundaryState = { xyoError: undefined }\n\n  static getDerivedStateFromError(error: Error) {\n    return { hasError: true, xyoError: ThrownErrorBoundaryInner.normalizeError(error) } as ThrownErrorBoundaryState\n  }\n\n  static normalizeError(error: Error | ModuleError): ModuleError {\n    return (\n      (error as ModuleError).schema === ModuleErrorSchema\n        ? error\n        : {\n            message: error.message, schema: ModuleErrorSchema, sources: [],\n          }) 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 {\n      children, boundaryName, errorComponent, scope, title,\n    } = 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\n// calling the hook outside of the component since only can be called in functional component\nexport const ThrownErrorBoundary: FC<ThrownErrorBoundaryProps> = ({ rollbar, ...props }) => {\n  const { rollbar: rollbarErrorReporter } = useErrorReporter()\n  let rollbarFromHook: Rollbar | undefined\n  // safely call the hook\n  try {\n    rollbarFromHook = useRollbar()\n  } catch {}\n  return <ThrownErrorBoundaryInner rollbar={rollbar ?? rollbarErrorReporter ?? rollbarFromHook} {...props} />\n}\n","import { useRollbar } from '@rollbar/react'\nimport type { WithChildren } from '@xylabs/react-shared'\nimport React from 'react'\nimport type Rollbar from 'rollbar'\n\nimport { ErrorReporterContext } from './Context.ts'\n\nexport interface ErrorReporterProviderProps {\n  rollbar: Rollbar\n}\n\nconst ErrorReporterProvider: React.FC<WithChildren<ErrorReporterProviderProps>> = ({ children, rollbar: rollbarProp }) => {\n  let rollbarFromHook: Rollbar | undefined\n  // safely call the hook\n  try {\n    rollbarFromHook = useRollbar()\n  } catch {}\n\n  const rollbar = rollbarProp ?? rollbarFromHook\n\n  if (!rollbar) {\n    throw new Error('ErrorReporterProvider unable to find a Rollbar instance either passed as prop or from Provider')\n  }\n\n  // eslint-disable-next-line @eslint-react/no-unstable-context-value\n  return <ErrorReporterContext.Provider value={{ rollbar }}>{children}</ErrorReporterContext.Provider>\n}\n\nexport { ErrorReporterProvider }\n","import { createContext } from 'react'\n\nimport type { ErrorReporterContextState } from './State.ts'\n\nexport const ErrorReporterContext = createContext<ErrorReporterContextState>({})\n","import { useContext } from 'react'\n\nimport { ErrorReporterContext } from './Context.ts'\n\nexport const useErrorReporter = () => {\n  const context = useContext(ErrorReporterContext)\n  if (context === undefined) {\n    console.warn('useErrorReporter must be used within a ErrorReporterContext')\n  }\n\n  return context ?? {}\n}\n","import { ExitToApp as ExitIcon } from '@mui/icons-material'\nimport type { AlertProps } from '@mui/material'\nimport {\n  Alert, AlertTitle, Typography,\n} from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { ModuleError } from '@xyo-network/payload-model'\nimport React from 'react'\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\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        ? (\n            <div>\n              <Typography variant=\"caption\" mr={0.5} fontWeight=\"bold\">\n                Scope:\n              </Typography>\n              <Typography variant=\"caption\">{finalScope}</Typography>\n            </div>\n          )\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        ? (\n            <ButtonEx\n              variant=\"outlined\"\n              size=\"small\"\n              onClick={onCancel}\n              position=\"absolute\"\n              style={{ right: 8, top: 8 }}\n            >\n              <ExitIcon fontSize=\"small\" />\n            </ButtonEx>\n          )\n        : null}\n    </Alert>\n  )\n}\n","import { FlexCol } from '@xylabs/react-flexbox'\nimport React, { useEffect } from 'react'\n\nimport { ErrorAlert } from './ErrorAlert.tsx'\nimport type { ErrorRenderProps } from './Props.ts'\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 = { from: { pathname: globalThis.location.pathname } }\n    }\n  }, [location])\n\n  return error\n    ? (\n        <FlexCol alignItems=\"stretch\" {...props}>\n          {noErrorDisplay\n            ? customError\n            : (\n                <FlexCol alignItems=\"center\" {...props}>\n                  <ErrorAlert error={error} errorContext={errorContext} onCancel={onCancel} scope={scope} />\n                </FlexCol>\n              )}\n        </FlexCol>\n      )\n    : <>{children}</>\n}\n"],"mappings":"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","names":["Typography","FlexCol","React","Component","ErrorBoundary","Component","constructor","props","state","error","undefined","getDerivedStateFromError","componentDidCatch","errorInfo","console","render","fallbackWithError","fallback","FlexCol","Typography","variant","scope","message","children","useRollbar","ModuleErrorSchema","React","Component","useRollbar","React","createContext","ErrorReporterContext","ErrorReporterProvider","children","rollbar","rollbarProp","rollbarFromHook","useRollbar","Error","React","ErrorReporterContext","Provider","value","useContext","useErrorReporter","context","useContext","ErrorReporterContext","undefined","console","warn","ExitToApp","ExitIcon","Alert","AlertTitle","Typography","ButtonEx","React","ErrorAlert","title","onCancel","error","errorContext","scope","props","finalScope","React","Alert","severity","AlertTitle","div","Typography","variant","mr","fontWeight","message","ButtonEx","size","onClick","position","style","right","top","ExitIcon","fontSize","FlexCol","React","useEffect","ErrorRender","onCancel","error","noErrorDisplay","customError","children","errorContext","scope","useLocation","props","location","useEffect","state","from","pathname","globalThis","React","FlexCol","alignItems","ErrorAlert","ThrownErrorBoundaryInner","Component","state","xyoError","undefined","getDerivedStateFromError","error","hasError","normalizeError","schema","ModuleErrorSchema","message","sources","componentDidCatch","errorInfo","rethrow","rollbar","props","console","render","children","boundaryName","errorComponent","scope","title","React","ErrorRender","errorContext","ThrownErrorBoundary","rollbarErrorReporter","useErrorReporter","rollbarFromHook","useRollbar"]}
+{"version":3,"sources":["../../src/components/ErrorBoundary.tsx","../../src/components/ErrorBoundary/ThrownErrorBoundary.tsx","../../src/contexts/ErrorReporter/Provider.tsx","../../src/contexts/ErrorReporter/Context.ts","../../src/contexts/ErrorReporter/useErrorReporter.tsx","../../src/components/ErrorRender/ErrorAlert.tsx","../../src/components/ErrorRender/Render.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { ErrorInfo, ReactNode } from 'react'\nimport React, { Component } from 'react'\n\nexport interface ErrorBoundaryProps {\n  children: ReactNode\n  // fallback as a static ReactNode value\n  fallback?: ReactNode\n  // fallback element that can receive the error as a prop\n  fallbackWithError?: (error: Error) => ReactNode\n  scope?: string\n}\n\nexport interface ErrorBoundaryState {\n  error?: Error\n}\n\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props)\n    this.state = { error: undefined }\n  }\n\n  static getDerivedStateFromError(error: Error) {\n    return { error }\n  }\n\n  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    console.error(`${error}: ${errorInfo}`)\n  }\n\n  override render() {\n    if (this.state.error) {\n      if (this.props.fallbackWithError) {\n        return this.props.fallbackWithError(this.state.error)\n      }\n      return (\n        this.props.fallback ?? (\n          <FlexCol>\n            <Typography variant=\"h1\">Something went wrong.</Typography>\n            {this.props.scope && (\n              <Typography variant=\"h2\">\n                [\n                {this.props.scope}\n                ]\n              </Typography>\n            )}\n            <Typography variant=\"body1\">\n              [\n              {this.state.error?.message}\n              ]\n            </Typography>\n          </FlexCol>\n        )\n      )\n    }\n\n    return this.props.children\n  }\n}\n","import { useRollbar } from '@rollbar/react'\nimport type { ModuleError } from '@xyo-network/payload-model'\nimport { ModuleErrorSchema } from '@xyo-network/payload-model'\nimport type {\n  ErrorInfo, FC, ReactNode,\n} from 'react'\nimport React, { Component } from 'react'\nimport type Rollbar from 'rollbar'\n\nimport { useErrorReporter } from '../../contexts/index.ts'\nimport { ErrorRender } from '../ErrorRender/index.ts'\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\nclass ThrownErrorBoundaryInner extends Component<ThrownErrorBoundaryProps, ThrownErrorBoundaryState> {\n  override state: ThrownErrorBoundaryState = { xyoError: undefined }\n\n  static getDerivedStateFromError(error: Error) {\n    return { hasError: true, xyoError: ThrownErrorBoundaryInner.normalizeError(error) } as ThrownErrorBoundaryState\n  }\n\n  static normalizeError(error: Error | ModuleError): ModuleError {\n    return (\n      (error as ModuleError).schema === ModuleErrorSchema\n        ? error\n        : {\n            message: error.message, schema: ModuleErrorSchema, sources: [],\n          }) 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 {\n      children, boundaryName, errorComponent, scope, title,\n    } = 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\n// calling the hook outside of the component since only can be called in functional component\nexport const ThrownErrorBoundary: FC<ThrownErrorBoundaryProps> = ({ rollbar, ...props }) => {\n  const { rollbar: rollbarErrorReporter } = useErrorReporter()\n  let rollbarFromHook: Rollbar | undefined\n  // safely call the hook\n  try {\n    rollbarFromHook = useRollbar()\n  } catch {}\n  return <ThrownErrorBoundaryInner rollbar={rollbar ?? rollbarErrorReporter ?? rollbarFromHook} {...props} />\n}\n","import { useRollbar } from '@rollbar/react'\nimport type { WithChildren } from '@xylabs/react-shared'\nimport React from 'react'\nimport type Rollbar from 'rollbar'\n\nimport { ErrorReporterContext } from './Context.ts'\n\nexport interface ErrorReporterProviderProps {\n  rollbar: Rollbar\n}\n\nconst ErrorReporterProvider: React.FC<WithChildren<ErrorReporterProviderProps>> = ({ children, rollbar: rollbarProp }) => {\n  let rollbarFromHook: Rollbar | undefined\n  // safely call the hook\n  try {\n    rollbarFromHook = useRollbar()\n  } catch {}\n\n  const rollbar = rollbarProp ?? rollbarFromHook\n\n  if (!rollbar) {\n    throw new Error('ErrorReporterProvider unable to find a Rollbar instance either passed as prop or from Provider')\n  }\n\n  // eslint-disable-next-line @eslint-react/no-unstable-context-value\n  return <ErrorReporterContext.Provider value={{ rollbar }}>{children}</ErrorReporterContext.Provider>\n}\n\nexport { ErrorReporterProvider }\n","import { createContext } from 'react'\n\nimport type { ErrorReporterContextState } from './State.ts'\n\nexport const ErrorReporterContext = createContext<ErrorReporterContextState>({})\n","import { useContext } from 'react'\n\nimport { ErrorReporterContext } from './Context.ts'\n\nexport const useErrorReporter = () => {\n  const context = useContext(ErrorReporterContext)\n  if (context === undefined) {\n    console.warn('useErrorReporter must be used within a ErrorReporterContext')\n  }\n\n  return context ?? {}\n}\n","import { ExitToApp as ExitIcon } from '@mui/icons-material'\nimport type { AlertProps } from '@mui/material'\nimport {\n  Alert, AlertTitle, Typography,\n} from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { ModuleError } from '@xyo-network/payload-model'\nimport React from 'react'\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\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        ? (\n            <div>\n              <Typography variant=\"caption\" mr={0.5} fontWeight=\"bold\">\n                Scope:\n              </Typography>\n              <Typography variant=\"caption\">{finalScope}</Typography>\n            </div>\n          )\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        ? (\n            <ButtonEx\n              variant=\"outlined\"\n              size=\"small\"\n              onClick={onCancel}\n              position=\"absolute\"\n              style={{ right: 8, top: 8 }}\n            >\n              <ExitIcon fontSize=\"small\" />\n            </ButtonEx>\n          )\n        : null}\n    </Alert>\n  )\n}\n","import { FlexCol } from '@xylabs/react-flexbox'\nimport React, { useEffect } from 'react'\n\nimport { ErrorAlert } from './ErrorAlert.tsx'\nimport type { ErrorRenderProps } from './Props.ts'\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 = { from: { pathname: globalThis.location.pathname } }\n    }\n  }, [location])\n\n  useEffect(() => {\n    if (error) {\n      globalThis.rollbar?.error(error)\n    }\n  }, [error])\n\n  return error\n    ? (\n        <FlexCol alignItems=\"stretch\" {...props}>\n          {noErrorDisplay\n            ? customError\n            : (\n                <FlexCol alignItems=\"center\" {...props}>\n                  <ErrorAlert error={error} errorContext={errorContext} onCancel={onCancel} scope={scope} />\n                </FlexCol>\n              )}\n        </FlexCol>\n      )\n    : <>{children}</>\n}\n"],"mappings":"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","names":["Typography","FlexCol","React","Component","ErrorBoundary","Component","constructor","props","state","error","undefined","getDerivedStateFromError","componentDidCatch","errorInfo","console","render","fallbackWithError","fallback","FlexCol","Typography","variant","scope","message","children","useRollbar","ModuleErrorSchema","React","Component","useRollbar","React","createContext","ErrorReporterContext","ErrorReporterProvider","children","rollbar","rollbarProp","rollbarFromHook","useRollbar","Error","React","ErrorReporterContext","Provider","value","useContext","useErrorReporter","context","useContext","ErrorReporterContext","undefined","console","warn","ExitToApp","ExitIcon","Alert","AlertTitle","Typography","ButtonEx","React","ErrorAlert","title","onCancel","error","errorContext","scope","props","finalScope","React","Alert","severity","AlertTitle","div","Typography","variant","mr","fontWeight","message","ButtonEx","size","onClick","position","style","right","top","ExitIcon","fontSize","FlexCol","React","useEffect","ErrorRender","onCancel","error","noErrorDisplay","customError","children","errorContext","scope","useLocation","props","location","useEffect","state","from","pathname","globalThis","rollbar","React","FlexCol","alignItems","ErrorAlert","ThrownErrorBoundaryInner","Component","state","xyoError","undefined","getDerivedStateFromError","error","hasError","normalizeError","schema","ModuleErrorSchema","message","sources","componentDidCatch","errorInfo","rethrow","rollbar","props","console","render","children","boundaryName","errorComponent","scope","title","React","ErrorRender","errorContext","ThrownErrorBoundary","rollbarErrorReporter","useErrorReporter","rollbarFromHook","useRollbar"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-error",
-  "version": "4.1.2",
+  "version": "4.1.4",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -44,10 +44,10 @@
   },
   "dependencies": {
     "@rollbar/react": "^0.12.0-beta",
-    "@xylabs/react-button": "^5.2.1",
-    "@xylabs/react-flexbox": "^5.2.1",
-    "@xylabs/react-shared": "^5.2.1",
-    "@xyo-network/payload-model": "^3.2.0",
+    "@xylabs/react-button": "^5.2.2",
+    "@xylabs/react-flexbox": "^5.2.2",
+    "@xylabs/react-shared": "^5.2.2",
+    "@xyo-network/payload-model": "^3.3.0",
     "prop-types": "^15.8.1",
     "react-router-dom": "^6.27.0"
   },
@@ -55,13 +55,13 @@
     "@mui/icons-material": "^6.1.4",
     "@mui/material": "^6.1.4",
     "@mui/styles": "^6.1.4",
-    "@storybook/react": "^8.3.5",
+    "@storybook/react": "^8.3.6",
     "@xylabs/ts-scripts-yarn3": "^4.2.1",
     "@xylabs/tsconfig-react": "^4.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollbar": "^2.26.4",
-    "storybook": "^8.3.5",
+    "storybook": "^8.3.6",
     "typescript": "^5.6.3"
   },
   "peerDependencies": {

package/src/components/ErrorRender/Render.tsx

@@ -23,6 +23,12 @@ export const ErrorRender: React.FC<ErrorRenderProps> = ({
     }
   }, [location])
 
+  useEffect(() => {
+    if (error) {
+      globalThis.rollbar?.error(error)
+    }
+  }, [error])
+
   return error
     ? (
         <FlexCol alignItems="stretch" {...props}>

package/src/global.d.ts

@@ -0,0 +1,5 @@
+import type Rollbar from 'rollbar'
+
+declare global {
+  var rollbar: Rollbar
+}