@xyo-network/react-error 2.38.14 → 2.39.0-rc.1

package/dist/esm/components/XyoErrorBoundary/ThrownErrorBoundary.d.ts

@@ -0,0 +1,21 @@
+import { BasePageProps } from '@xylabs/react-common';
+import { XyoError } from '@xyo-network/module';
+import { Component, ErrorInfo, ReactNode } from 'react';
+import Rollbar from 'rollbar';
+export interface XyoErrorBoundaryProps {
+    rethrow?: boolean;
+    children: ReactNode;
+    rollbar?: Rollbar;
+    basePageProps?: BasePageProps;
+    errorComponent?: (e: Error) => ReactNode;
+}
+export interface XyoErrorBoundaryState {
+    xyoError?: XyoError;
+}
+export declare class XyoThrownErrorBoundary extends Component<XyoErrorBoundaryProps, XyoErrorBoundaryState> {
+    state: XyoErrorBoundaryState;
+    static normalizeError(error: Error | XyoError): XyoError;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | boolean | import("react").ReactFragment | JSX.Element | null | undefined;
+}
+//# sourceMappingURL=ThrownErrorBoundary.d.ts.map

package/dist/esm/components/XyoErrorBoundary/ThrownErrorBoundary.d.ts.map

@@ -0,0 +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,KAAK,KAAK,SAAS,CAAA;CACzC;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;IAIxD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAYpD,MAAM;CASd"}

package/dist/esm/components/XyoErrorBoundary/ThrownErrorBoundary.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { XyoErrorSchema } from '@xyo-network/module';
+import { Component } from 'react';
+import { XyoErrorRender } from '../XyoErrorRender';
+export class XyoThrownErrorBoundary extends Component {
+    state = {
+        xyoError: undefined,
+    };
+    static normalizeError(error) {
+        return (error.schema === XyoErrorSchema ? error : { message: error.message, schema: XyoErrorSchema, sources: [] });
+    }
+    componentDidCatch(error, errorInfo) {
+        const { rethrow, rollbar } = this.props;
+        const xyoError = XyoThrownErrorBoundary.normalizeError(error);
+        rollbar?.error(error);
+        console.error('XyoError:', xyoError, errorInfo);
+        if (rethrow) {
+            throw error;
+        }
+    }
+    render() {
+        const { xyoError } = this.state;
+        const { children } = this.props;
+        if (xyoError) {
+            return _jsx(XyoErrorRender, { xyoError: xyoError });
+        }
+        return children;
+    }
+}
+//# sourceMappingURL=ThrownErrorBoundary.js.map

package/dist/esm/components/XyoErrorBoundary/ThrownErrorBoundary.js.map

@@ -0,0 +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;AAclD,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;IAEM,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QACzD,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QACvC,MAAM,QAAQ,GAAG,sBAAsB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;QAE7D,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,GAAG,IAAI,CAAC,KAAK,CAAA;QAC/B,IAAI,QAAQ,EAAE;YACZ,OAAO,KAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAA;SAC9C;QAED,OAAO,QAAQ,CAAA;IACjB,CAAC;CACF"}

package/dist/esm/components/XyoErrorBoundary/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ThrownErrorBoundary';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/XyoErrorBoundary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/XyoErrorBoundary/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/dist/esm/components/XyoErrorBoundary/index.js

@@ -0,0 +1,2 @@
+export * from './ThrownErrorBoundary';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/XyoErrorBoundary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/XyoErrorBoundary/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/dist/esm/components/index.d.ts

@@ -1,2 +1,3 @@
+export * from './XyoErrorBoundary';
 export * from './XyoErrorRender';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA"}

package/dist/esm/components/index.js

@@ -1,2 +1,3 @@
+export * from './XyoErrorBoundary';
 export * from './XyoErrorRender';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA"}

package/dist/esm/contexts/ErrorReporter/Context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ErrorReporterContextState } from './State';
+export declare const ErrorReporterContext: import("react").Context<ErrorReporterContextState>;
+//# sourceMappingURL=Context.d.ts.map

package/dist/esm/contexts/ErrorReporter/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/Context.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEnD,eAAO,MAAM,oBAAoB,oDAA+C,CAAA"}

package/dist/esm/contexts/ErrorReporter/Context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const ErrorReporterContext = createContext({});
+//# sourceMappingURL=Context.js.map

package/dist/esm/contexts/ErrorReporter/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/Context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAIrC,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B,EAAE,CAAC,CAAA"}

package/dist/esm/contexts/ErrorReporter/Provider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { WithChildren } from '@xylabs/react-shared';
+import Rollbar from 'rollbar';
+export interface ErrorReporterProviderProps {
+    rollbar: Rollbar;
+}
+declare const ErrorReporterProvider: React.FC<WithChildren<ErrorReporterProviderProps>>;
+export { ErrorReporterProvider };
+//# sourceMappingURL=Provider.d.ts.map

package/dist/esm/contexts/ErrorReporter/Provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEnD,OAAO,OAAO,MAAM,SAAS,CAAA;AAI7B,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAU7E,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/esm/contexts/ErrorReporter/Provider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ErrorReporterContext } from './Context';
+const ErrorReporterProvider = ({ children, rollbar }) => {
+    const [rollbarInstance, setRollBarInstance] = useState();
+    useEffect(() => {
+        if (rollbarInstance) {
+            setRollBarInstance(rollbarInstance);
+        }
+    }, [rollbar, rollbarInstance]);
+    return _jsx(ErrorReporterContext.Provider, { value: { rollbar }, children: children });
+};
+export { ErrorReporterProvider };
+//# sourceMappingURL=Provider.js.map

package/dist/esm/contexts/ErrorReporter/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/Provider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAG3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAMhD,MAAM,qBAAqB,GAAuD,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1G,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,EAAW,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,EAAE;YACnB,kBAAkB,CAAC,eAAe,CAAC,CAAA;SACpC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAA;IAE9B,OAAO,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,YAAG,QAAQ,GAAiC,CAAA;AACtG,CAAC,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/esm/contexts/ErrorReporter/State.d.ts

@@ -0,0 +1,5 @@
+import Rollbar from 'rollbar';
+export interface ErrorReporterContextState {
+    rollbar?: Rollbar;
+}
+//# sourceMappingURL=State.d.ts.map

package/dist/esm/contexts/ErrorReporter/State.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.d.ts","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/State.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAA;AAE7B,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB"}

package/dist/esm/contexts/ErrorReporter/State.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=State.js.map

package/dist/esm/contexts/ErrorReporter/State.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.js","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/State.ts"],"names":[],"mappings":""}

package/dist/esm/contexts/ErrorReporter/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Provider';
+export * from './State';
+export * from './useRollbar';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/contexts/ErrorReporter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA"}

package/dist/esm/contexts/ErrorReporter/index.js

@@ -0,0 +1,4 @@
+export * from './Provider';
+export * from './State';
+export * from './useRollbar';
+//# sourceMappingURL=index.js.map

package/dist/esm/contexts/ErrorReporter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA"}

package/dist/esm/contexts/ErrorReporter/useRollbar.d.ts

@@ -0,0 +1,3 @@
+declare const useRollbar: () => import("./State").ErrorReporterContextState;
+export { useRollbar };
+//# sourceMappingURL=useRollbar.d.ts.map

package/dist/esm/contexts/ErrorReporter/useRollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRollbar.d.ts","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/useRollbar.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,UAAU,mDAOf,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/esm/contexts/ErrorReporter/useRollbar.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { ErrorReporterContext } from './Context';
+const useRollbar = () => {
+    const context = useContext(ErrorReporterContext);
+    if (context === undefined) {
+        console.warn('useRollbar must be used within a ErrorReporterContext');
+    }
+    return context ?? {};
+};
+export { useRollbar };
+//# sourceMappingURL=useRollbar.js.map

package/dist/esm/contexts/ErrorReporter/useRollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRollbar.js","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/useRollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAEhD,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAA;IAChD,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,OAAO,CAAC,IAAI,CAAC,uDAAuD,CAAC,CAAA;KACtE;IAED,OAAO,OAAO,IAAI,EAAE,CAAA;AACtB,CAAC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/esm/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ErrorReporter';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/contexts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/esm/contexts/index.js

@@ -0,0 +1,2 @@
+export * from './ErrorReporter';
+//# sourceMappingURL=index.js.map

package/dist/esm/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/esm/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './contexts';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA"}

package/dist/esm/index.js

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './contexts';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA"}

package/package.json

@@ -10,21 +10,26 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/react-flexbox": "^2.15.1",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.3",
-    "lodash": "^4.17.21",
+    "@xylabs/react-common": "^2.15.1",
+    "@xylabs/react-flexbox": "^2.15.1",
+    "@xylabs/react-shared": "^2.15.1",
+    "@xyo-network/module": "*",
     "pako": "^2.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "rollbar": "^2.25.2"
   },
-  "description": "Common React library for all XYO projects that use React",
-  "devDependencies": {
-    "@xyo-network/module": "^2.38.23"
+  "peerDependenciesMeta": {
+    "rollbar": {
+      "optional": true
+    }
   },
+  "description": "Common React library for all XYO projects that use React",
   "browser": "dist/esm/index.js",
   "docs": "dist/docs.json",
   "exports": {
@@ -67,5 +72,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.38.14"
+  "version": "2.39.0-rc.1",
+  "stableVersion": "2.38.15"
 }

package/src/components/XyoErrorBoundary/ThrownErrorBoundary.stories.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable import/no-internal-modules */
+import { Alert, Paper, TextField } from '@mui/material'
+import { ComponentStory, Meta } from '@storybook/react'
+import { BasePageProps } from '@xylabs/react-common'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { ApiProvider, ArchivesProvider } from '@xyo-network/react-api'
+import { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'
+import { Footer } from '@xyo-network/react-footer'
+import { NetworkMemoryProvider } from '@xyo-network/react-network'
+import { BrowserRouter } from 'react-router-dom'
+
+import { XyoThrownErrorBoundary } from './ThrownErrorBoundary'
+
+const basePageProps: BasePageProps = {
+  appBar: (
+    <ApplicationAppBar
+      systemToolbar={
+        <SystemToolbar
+          style={{ paddingLeft: 8, paddingRight: 8 }}
+          disableGutters
+          archiveSelectProps={{
+            sx: { display: 'none' },
+          }}
+          sx={{ flexWrap: 'wrap-reverse', justifyContent: 'end' }}
+          darkModeButton
+          authButton
+        />
+      }
+    >
+      <TextField fullWidth size="small" />
+    </ApplicationAppBar>
+  ),
+  appFooter: (
+    <FlexCol alignItems="stretch">
+      <Paper elevation={8}>
+        <Footer width="100%" />
+      </Paper>
+    </FlexCol>
+  ),
+  title: 'Page Title',
+}
+
+const StorybookEntry: Meta = {
+  args: {
+    basePageProps,
+  },
+  component: XyoThrownErrorBoundary,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'auth-service/XyoApiBoundary/ThrownErrorBoundary',
+}
+
+const Template: ComponentStory<typeof XyoThrownErrorBoundary> = ({ basePageProps, errorComponent }) => {
+  return (
+    <BrowserRouter>
+      <NetworkMemoryProvider>
+        <ApiProvider apiDomain="http://localhost:8080">
+          <ArchivesProvider>
+            <XyoThrownErrorBoundary basePageProps={basePageProps} errorComponent={errorComponent}>
+              <Alert severity="info">Use React Dev Tools to trigger and error within the boundary</Alert>
+            </XyoThrownErrorBoundary>
+          </ArchivesProvider>
+        </ApiProvider>
+      </NetworkMemoryProvider>
+    </BrowserRouter>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const CustomErrorComponent = Template.bind({})
+CustomErrorComponent.args = {
+  errorComponent: (e) => <Alert severity="error">Using Custom Error Component with error: {e.message}</Alert>,
+}
+
+export { CustomErrorComponent, Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/XyoErrorBoundary/ThrownErrorBoundary.tsx

@@ -0,0 +1,50 @@
+import { BasePageProps } from '@xylabs/react-common'
+import { XyoError, XyoErrorSchema } from '@xyo-network/module'
+import { Component, ErrorInfo, ReactNode } from 'react'
+import Rollbar from 'rollbar'
+
+import { XyoErrorRender } from '../XyoErrorRender'
+
+export interface XyoErrorBoundaryProps {
+  rethrow?: boolean
+  children: ReactNode
+  rollbar?: Rollbar
+  basePageProps?: BasePageProps
+  errorComponent?: (e: Error) => ReactNode
+}
+
+export interface XyoErrorBoundaryState {
+  xyoError?: XyoError
+}
+
+export class XyoThrownErrorBoundary extends Component<XyoErrorBoundaryProps, XyoErrorBoundaryState> {
+  public state: XyoErrorBoundaryState = {
+    xyoError: undefined,
+  }
+
+  public static normalizeError(error: Error | XyoError): XyoError {
+    return ((error as XyoError).schema === XyoErrorSchema ? error : { message: error.message, schema: XyoErrorSchema, sources: [] }) as XyoError
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    const { rethrow, rollbar } = this.props
+    const xyoError = XyoThrownErrorBoundary.normalizeError(error)
+
+    rollbar?.error(error)
+
+    console.error('XyoError:', xyoError, errorInfo)
+    if (rethrow) {
+      throw error
+    }
+  }
+
+  public render() {
+    const { xyoError } = this.state
+    const { children } = this.props
+    if (xyoError) {
+      return <XyoErrorRender xyoError={xyoError} />
+    }
+
+    return children
+  }
+}

package/src/components/XyoErrorBoundary/index.ts

@@ -0,0 +1 @@
+export * from './ThrownErrorBoundary'

package/src/components/index.ts

@@ -1 +1,2 @@
+export * from './XyoErrorBoundary'
 export * from './XyoErrorRender'

package/src/contexts/ErrorReporter/Context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+import { ErrorReporterContextState } from './State'
+
+export const ErrorReporterContext = createContext<ErrorReporterContextState>({})

package/src/contexts/ErrorReporter/Provider.stories.tsx

@@ -0,0 +1,40 @@
+import { Typography } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import Rollbar from 'rollbar'
+
+import { ErrorReporterProvider } from './Provider'
+import { useRollbar } from './useRollbar'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ErrorReporterProvider,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'auth-service/ErrorReporterProvider',
+} as ComponentMeta<typeof ErrorReporterProvider>
+
+const RollbarComponent = () => {
+  const { rollbar } = useRollbar()
+  const rollbarFound = typeof rollbar?.error === 'function'
+
+  return <Typography color={rollbarFound ? 'green' : 'red'}>Rollbar instance {rollbarFound ? '' : 'NOT'} found from context!</Typography>
+}
+
+const Template: ComponentStory<typeof ErrorReporterProvider> = () => {
+  const rollbar = new Rollbar()
+  return (
+    <ErrorReporterProvider rollbar={rollbar}>
+      <RollbarComponent />
+    </ErrorReporterProvider>
+  )
+}
+
+const Default = Template.bind({})
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/contexts/ErrorReporter/Provider.tsx

@@ -0,0 +1,23 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { useEffect, useState } from 'react'
+import Rollbar from 'rollbar'
+
+import { ErrorReporterContext } from './Context'
+
+export interface ErrorReporterProviderProps {
+  rollbar: Rollbar
+}
+
+const ErrorReporterProvider: React.FC<WithChildren<ErrorReporterProviderProps>> = ({ children, rollbar }) => {
+  const [rollbarInstance, setRollBarInstance] = useState<Rollbar>()
+
+  useEffect(() => {
+    if (rollbarInstance) {
+      setRollBarInstance(rollbarInstance)
+    }
+  }, [rollbar, rollbarInstance])
+
+  return <ErrorReporterContext.Provider value={{ rollbar }}>{children}</ErrorReporterContext.Provider>
+}
+
+export { ErrorReporterProvider }

package/src/contexts/ErrorReporter/State.ts

@@ -0,0 +1,5 @@
+import Rollbar from 'rollbar'
+
+export interface ErrorReporterContextState {
+  rollbar?: Rollbar
+}

package/src/contexts/ErrorReporter/index.ts

@@ -0,0 +1,3 @@
+export * from './Provider'
+export * from './State'
+export * from './useRollbar'

package/src/contexts/ErrorReporter/useRollbar.tsx

@@ -0,0 +1,14 @@
+import { useContext } from 'react'
+
+import { ErrorReporterContext } from './Context'
+
+const useRollbar = () => {
+  const context = useContext(ErrorReporterContext)
+  if (context === undefined) {
+    console.warn('useRollbar must be used within a ErrorReporterContext')
+  }
+
+  return context ?? {}
+}
+
+export { useRollbar }

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './ErrorReporter'

package/src/index.ts

@@ -1 +1,2 @@
 export * from './components'
+export * from './contexts'