@xyo-network/react-error 3.0.6 → 3.0.8

package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.ts

@@ -1,6 +1,5 @@
 import type { ModuleError } from '@xyo-network/payload-model';
-import type { ErrorInfo, ReactNode } from 'react';
-import { Component } from 'react';
+import type { FC, ReactNode } from 'react';
 import type Rollbar from 'rollbar';
 export interface ThrownErrorBoundaryProps {
     boundaryName?: string;
@@ -14,11 +13,5 @@ export interface ThrownErrorBoundaryProps {
 export interface ThrownErrorBoundaryState {
     xyoError?: ModuleError;
 }
-export declare class ThrownErrorBoundary extends Component<ThrownErrorBoundaryProps, ThrownErrorBoundaryState> {
-    state: ThrownErrorBoundaryState;
-    static getDerivedStateFromError(error: Error): ThrownErrorBoundaryState;
-    static normalizeError(error: Error | ModuleError): ModuleError;
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
-}
+export declare const ThrownErrorBoundary: FC<ThrownErrorBoundaryProps>;
 //# sourceMappingURL=ThrownErrorBoundary.d.ts.map

package/dist/browser/components/ErrorBoundary/ThrownErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThrownErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorBoundary/ThrownErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,KAAK,OAAO,MAAM,SAAS,CAAA;AAIlC,MAAM,WAAW,wBAAwB;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,SAAS,CAAA;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAA;CACvB;AAED,qBAAa,mBAAoB,SAAQ,SAAS,CAAC,wBAAwB,EAAE,wBAAwB,CAAC;IAC3F,KAAK,EAAE,wBAAwB,CAA0B;IAElE,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GACwC,wBAAwB;IAG5G,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,WAAW,GAAG,WAAW;IASrD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAYpD,MAAM;CAchB"}
+{"version":3,"file":"ThrownErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorBoundary/ThrownErrorBoundary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAE7D,OAAO,KAAK,EACC,EAAE,EAAE,SAAS,EACzB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,OAAO,MAAM,SAAS,CAAA;AAKlC,MAAM,WAAW,wBAAwB;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,SAAS,CAAA;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAA;CACvB;AA+CD,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAQ5D,CAAA"}

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

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

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

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

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

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

package/dist/browser/contexts/ErrorReporter/useErrorReporter.d.ts

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

package/dist/browser/contexts/ErrorReporter/useErrorReporter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useErrorReporter.d.ts","sourceRoot":"","sources":["../../../../src/contexts/ErrorReporter/useErrorReporter.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,sDAO5B,CAAA"}

package/dist/browser/index.mjs

@@ -2,32 +2,69 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // src/components/ErrorBoundary/ThrownErrorBoundary.tsx
+import { useRollbar as useRollbar2 } from "@rollbar/react";
 import { ModuleErrorSchema } from "@xyo-network/payload-model";
-import React3, { Component } from "react";
+import React4, { Component } from "react";
+
+// src/contexts/ErrorReporter/Provider.tsx
+import { useRollbar } from "@rollbar/react";
+import React from "react";
+
+// src/contexts/ErrorReporter/Context.ts
+import { createContext } from "react";
+var ErrorReporterContext = createContext({});
+
+// src/contexts/ErrorReporter/Provider.tsx
+var ErrorReporterProvider = /* @__PURE__ */ __name(({ children, rollbar: rollbarProp }) => {
+  let rollbarFromHook;
+  try {
+    rollbarFromHook = useRollbar();
+  } catch {
+  }
+  const rollbar = rollbarProp ?? rollbarFromHook;
+  if (!rollbar) {
+    throw new Error("ErrorReporterProvider unable to find a Rollbar instance either passed as prop or from Provider");
+  }
+  return /* @__PURE__ */ React.createElement(ErrorReporterContext.Provider, {
+    value: {
+      rollbar
+    }
+  }, children);
+}, "ErrorReporterProvider");
+
+// src/contexts/ErrorReporter/useErrorReporter.tsx
+import { useContext } from "react";
+var useErrorReporter = /* @__PURE__ */ __name(() => {
+  const context = useContext(ErrorReporterContext);
+  if (context === void 0) {
+    console.warn("useErrorReporter must be used within a ErrorReporterContext");
+  }
+  return context ?? {};
+}, "useErrorReporter");
 
 // src/components/ErrorRender/ErrorAlert.tsx
 import { ExitToApp as ExitIcon } from "@mui/icons-material";
 import { Alert, AlertTitle, Typography } from "@mui/material";
 import { ButtonEx } from "@xylabs/react-button";
-import React from "react";
+import React2 from "react";
 var ErrorAlert = /* @__PURE__ */ __name(({ title = "Whoops! Something went wrong", onCancel, error = "An unknown error occurred", errorContext, scope, ...props }) => {
   const finalScope = scope ?? errorContext;
-  return /* @__PURE__ */ React.createElement(Alert, {
+  return /* @__PURE__ */ React2.createElement(Alert, {
     severity: "error",
     ...props
-  }, /* @__PURE__ */ React.createElement(AlertTitle, null, title), finalScope ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, {
+  }, /* @__PURE__ */ React2.createElement(AlertTitle, null, title), finalScope ? /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(Typography, {
     variant: "caption",
     mr: 0.5,
     fontWeight: "bold"
-  }, "Scope:"), /* @__PURE__ */ React.createElement(Typography, {
+  }, "Scope:"), /* @__PURE__ */ React2.createElement(Typography, {
     variant: "caption"
-  }, finalScope)) : null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, {
+  }, finalScope)) : null, /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(Typography, {
     variant: "caption",
     mr: 0.5,
     fontWeight: "bold"
-  }, "Error:"), /* @__PURE__ */ React.createElement(Typography, {
+  }, "Error:"), /* @__PURE__ */ React2.createElement(Typography, {
     variant: "caption"
-  }, typeof error === "string" ? error : error?.message)), onCancel ? /* @__PURE__ */ React.createElement(ButtonEx, {
+  }, typeof error === "string" ? error : error?.message)), onCancel ? /* @__PURE__ */ React2.createElement(ButtonEx, {
     variant: "outlined",
     size: "small",
     onClick: onCancel,
@@ -36,14 +73,14 @@ var ErrorAlert = /* @__PURE__ */ __name(({ title = "Whoops! Something went wrong
       right: 8,
       top: 8
     }
-  }, /* @__PURE__ */ React.createElement(ExitIcon, {
+  }, /* @__PURE__ */ React2.createElement(ExitIcon, {
     fontSize: "small"
   })) : null);
 }, "ErrorAlert");
 
 // src/components/ErrorRender/Render.tsx
 import { FlexCol } from "@xylabs/react-flexbox";
-import React2, { useEffect } from "react";
+import React3, { useEffect } from "react";
 var ErrorRender = /* @__PURE__ */ __name(({ onCancel, error, noErrorDisplay = false, customError = null, children, errorContext, scope, useLocation, ...props }) => {
   const location = useLocation?.();
   useEffect(() => {
@@ -57,24 +94,24 @@ var ErrorRender = /* @__PURE__ */ __name(({ onCancel, error, noErrorDisplay = fa
   }, [
     location
   ]);
-  return error ? /* @__PURE__ */ React2.createElement(FlexCol, {
+  return error ? /* @__PURE__ */ React3.createElement(FlexCol, {
     alignItems: "stretch",
     ...props
-  }, noErrorDisplay ? customError : /* @__PURE__ */ React2.createElement(FlexCol, {
+  }, noErrorDisplay ? customError : /* @__PURE__ */ React3.createElement(FlexCol, {
     alignItems: "center",
     ...props
-  }, /* @__PURE__ */ React2.createElement(ErrorAlert, {
+  }, /* @__PURE__ */ React3.createElement(ErrorAlert, {
     error,
     errorContext,
     onCancel,
     scope
-  }))) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, children) ?? null;
+  }))) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, children) ?? null;
 }, "ErrorRender");
 
 // src/components/ErrorBoundary/ThrownErrorBoundary.tsx
-var ThrownErrorBoundary = class _ThrownErrorBoundary extends Component {
+var ThrownErrorBoundaryInner = class ThrownErrorBoundaryInner2 extends Component {
   static {
-    __name(this, "ThrownErrorBoundary");
+    __name(this, "ThrownErrorBoundaryInner");
   }
   state = {
     xyoError: void 0
@@ -82,7 +119,7 @@ var ThrownErrorBoundary = class _ThrownErrorBoundary extends Component {
   static getDerivedStateFromError(error) {
     return {
       hasError: true,
-      xyoError: _ThrownErrorBoundary.normalizeError(error)
+      xyoError: ThrownErrorBoundaryInner2.normalizeError(error)
     };
   }
   static normalizeError(error) {
@@ -108,7 +145,7 @@ var ThrownErrorBoundary = class _ThrownErrorBoundary extends Component {
       if (errorComponent) {
         return errorComponent(xyoError);
       }
-      return /* @__PURE__ */ React3.createElement(ErrorRender, {
+      return /* @__PURE__ */ React4.createElement(ErrorRender, {
         error: xyoError,
         errorContext: `${boundaryName} Boundary`,
         scope,
@@ -118,46 +155,23 @@ var ThrownErrorBoundary = class _ThrownErrorBoundary extends Component {
     return children;
   }
 };
-
-// src/contexts/ErrorReporter/Provider.tsx
-import React4, { useEffect as useEffect2, useState } from "react";
-
-// src/contexts/ErrorReporter/Context.ts
-import { createContext } from "react";
-var ErrorReporterContext = createContext({});
-
-// src/contexts/ErrorReporter/Provider.tsx
-var ErrorReporterProvider = /* @__PURE__ */ __name(({ children, rollbar }) => {
-  const [rollbarInstance, setRollBarInstance] = useState();
-  useEffect2(() => {
-    if (rollbarInstance) {
-      setRollBarInstance(rollbarInstance);
-    }
-  }, [
-    rollbar,
-    rollbarInstance
-  ]);
-  return /* @__PURE__ */ React4.createElement(ErrorReporterContext.Provider, {
-    value: {
-      rollbar
-    }
-  }, children);
-}, "ErrorReporterProvider");
-
-// src/contexts/ErrorReporter/useRollbar.tsx
-import { useContext } from "react";
-var useRollbar = /* @__PURE__ */ __name(() => {
-  const context = useContext(ErrorReporterContext);
-  if (context === void 0) {
-    console.warn("useRollbar must be used within a ErrorReporterContext");
+var ThrownErrorBoundary = /* @__PURE__ */ __name(({ rollbar, ...props }) => {
+  const { rollbar: rollbarErrorReporter } = useErrorReporter();
+  let rollbarFromHook;
+  try {
+    rollbarFromHook = useRollbar2();
+  } catch {
   }
-  return context ?? {};
-}, "useRollbar");
+  return /* @__PURE__ */ React4.createElement(ThrownErrorBoundaryInner, {
+    rollbar: rollbar ?? rollbarErrorReporter ?? rollbarFromHook,
+    ...props
+  });
+}, "ThrownErrorBoundary");
 export {
   ErrorAlert,
   ErrorRender,
   ErrorReporterProvider,
   ThrownErrorBoundary,
-  useRollbar
+  useErrorReporter
 };
 //# sourceMappingURL=index.mjs.map

package/dist/browser/index.mjs.map

@@ -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 type { ModuleError } from '@xyo-network/payload-model'\nimport { ModuleErrorSchema } from '@xyo-network/payload-model'\nimport type { ErrorInfo, ReactNode } from 'react'\nimport React, { Component } from 'react'\nimport type Rollbar from 'rollbar'\n\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\nexport class ThrownErrorBoundary extends Component<ThrownErrorBoundaryProps, ThrownErrorBoundaryState> {\n  override state: ThrownErrorBoundaryState = { xyoError: undefined }\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        : {\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","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: window.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}</> ?? null)\n}\n","import type { WithChildren } from '@xylabs/react-shared'\nimport React, { useEffect, useState } 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 }) => {\n  const [rollbarInstance, setRollBarInstance] = useState<Rollbar>()\n\n  useEffect(() => {\n    if (rollbarInstance) {\n      setRollBarInstance(rollbarInstance)\n    }\n  }, [rollbar, rollbarInstance])\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\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":["ModuleErrorSchema","React","Component","ExitToApp","ExitIcon","Alert","AlertTitle","Typography","ButtonEx","React","ErrorAlert","title","onCancel","error","errorContext","scope","props","finalScope","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","window","React","FlexCol","alignItems","ErrorAlert","ThrownErrorBoundary","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","React","useEffect","useState","createContext","ErrorReporterContext","ErrorReporterProvider","children","rollbar","rollbarInstance","setRollBarInstance","useState","useEffect","React","ErrorReporterContext","Provider","value","useContext","useRollbar","context","useContext","ErrorReporterContext","undefined","console","warn"]}
+{"version":3,"sources":["../../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 { 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: window.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}</> ?? null)\n}\n"],"mappings":"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","names":["useRollbar","ModuleErrorSchema","React","Component","useRollbar","React","createContext","ErrorReporterContext","ErrorReporterProvider","children","rollbar","rollbarProp","rollbarFromHook","useRollbar","Error","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","window","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": "3.0.6",
+  "version": "3.0.8",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -43,10 +43,11 @@
     "lint-pkg": "npmPkgJsonLint ."
   },
   "dependencies": {
-    "@xylabs/react-button": "^4.0.3",
-    "@xylabs/react-flexbox": "^4.0.3",
-    "@xylabs/react-shared": "^4.0.3",
-    "@xyo-network/payload-model": "^3.0.15",
+    "@rollbar/react": "^0.12.0-beta",
+    "@xylabs/react-button": "^4.1.2",
+    "@xylabs/react-flexbox": "^4.1.2",
+    "@xylabs/react-shared": "^4.1.2",
+    "@xyo-network/payload-model": "^3.1.5",
     "react-router-dom": "^6.26.1"
   },
   "devDependencies": {

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

@@ -1,4 +1,4 @@
-import { Alert } from '@mui/material'
+import { Alert, Button } from '@mui/material'
 import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
@@ -9,10 +9,26 @@ const StorybookEntry: Meta = {
   title: 'auth-service/ApiBoundary/ThrownErrorBoundary',
 }
 
+const Thrower: React.FC = () => {
+  const [shouldThrow, setShouldThrow] = React.useState(false)
+  if (shouldThrow) {
+    throw new Error('Test Error')
+  }
+  return (
+    <Button onClick={() => {
+      setShouldThrow(true)
+    }}
+    >
+      Throw Error
+    </Button>
+  )
+}
+
 const Template: StoryFn<typeof ThrownErrorBoundary> = ({ errorComponent }) => {
   return (
     <ThrownErrorBoundary errorComponent={errorComponent} boundaryName="StoryBook">
       <Alert severity="info">Use React Dev Tools to trigger and error within the boundary</Alert>
+      <Thrower />
     </ThrownErrorBoundary>
   )
 }

package/src/components/ErrorBoundary/ThrownErrorBoundary.tsx

@@ -1,9 +1,13 @@
+import { useRollbar } from '@rollbar/react'
 import type { ModuleError } from '@xyo-network/payload-model'
 import { ModuleErrorSchema } from '@xyo-network/payload-model'
-import type { ErrorInfo, ReactNode } from 'react'
+import type {
+  ErrorInfo, FC, ReactNode,
+} from 'react'
 import React, { Component } from 'react'
 import type Rollbar from 'rollbar'
 
+import { useErrorReporter } from '../../contexts/index.ts'
 import { ErrorRender } from '../ErrorRender/index.ts'
 
 export interface ThrownErrorBoundaryProps {
@@ -20,11 +24,11 @@ export interface ThrownErrorBoundaryState {
   xyoError?: ModuleError
 }
 
-export class ThrownErrorBoundary extends Component<ThrownErrorBoundaryProps, ThrownErrorBoundaryState> {
+class ThrownErrorBoundaryInner extends Component<ThrownErrorBoundaryProps, ThrownErrorBoundaryState> {
   override state: ThrownErrorBoundaryState = { xyoError: undefined }
 
   static getDerivedStateFromError(error: Error) {
-    return { hasError: true, xyoError: ThrownErrorBoundary.normalizeError(error) } as ThrownErrorBoundaryState
+    return { hasError: true, xyoError: ThrownErrorBoundaryInner.normalizeError(error) } as ThrownErrorBoundaryState
   }
 
   static normalizeError(error: Error | ModuleError): ModuleError {
@@ -63,3 +67,14 @@ export class ThrownErrorBoundary extends Component<ThrownErrorBoundaryProps, Thr
     return children
   }
 }
+
+// calling the hook outside of the component since only can be called in functional component
+export const ThrownErrorBoundary: FC<ThrownErrorBoundaryProps> = ({ rollbar, ...props }) => {
+  const { rollbar: rollbarErrorReporter } = useErrorReporter()
+  let rollbarFromHook: Rollbar | undefined
+  // safely call the hook
+  try {
+    rollbarFromHook = useRollbar()
+  } catch {}
+  return <ThrownErrorBoundaryInner rollbar={rollbar ?? rollbarErrorReporter ?? rollbarFromHook} {...props} />
+}

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

@@ -4,7 +4,7 @@ import React from 'react'
 import Rollbar from 'rollbar'
 
 import { ErrorReporterProvider } from './Provider.tsx'
-import { useRollbar } from './useRollbar.tsx'
+import { useErrorReporter } from './useErrorReporter.tsx'
 
 const StorybookEntry = {
   argTypes: {},
@@ -14,7 +14,7 @@ const StorybookEntry = {
 } as Meta<typeof ErrorReporterProvider>
 
 const RollbarComponent = () => {
-  const { rollbar } = useRollbar()
+  const { rollbar } = useErrorReporter()
   const rollbarFound = typeof rollbar?.error === 'function'
 
   return (

package/src/contexts/ErrorReporter/Provider.tsx

@@ -1,5 +1,6 @@
+import { useRollbar } from '@rollbar/react'
 import type { WithChildren } from '@xylabs/react-shared'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import type Rollbar from 'rollbar'
 
 import { ErrorReporterContext } from './Context.ts'
@@ -8,14 +9,18 @@ export interface ErrorReporterProviderProps {
   rollbar: Rollbar
 }
 
-const ErrorReporterProvider: React.FC<WithChildren<ErrorReporterProviderProps>> = ({ children, rollbar }) => {
-  const [rollbarInstance, setRollBarInstance] = useState<Rollbar>()
+const ErrorReporterProvider: React.FC<WithChildren<ErrorReporterProviderProps>> = ({ children, rollbar: rollbarProp }) => {
+  let rollbarFromHook: Rollbar | undefined
+  // safely call the hook
+  try {
+    rollbarFromHook = useRollbar()
+  } catch {}
 
-  useEffect(() => {
-    if (rollbarInstance) {
-      setRollBarInstance(rollbarInstance)
-    }
-  }, [rollbar, rollbarInstance])
+  const rollbar = rollbarProp ?? rollbarFromHook
+
+  if (!rollbar) {
+    throw new Error('ErrorReporterProvider unable to find a Rollbar instance either passed as prop or from Provider')
+  }
 
   // eslint-disable-next-line @eslint-react/no-unstable-context-value
   return <ErrorReporterContext.Provider value={{ rollbar }}>{children}</ErrorReporterContext.Provider>

package/src/contexts/ErrorReporter/index.ts

@@ -1,3 +1,3 @@
 export * from './Provider.tsx'
 export * from './State.ts'
-export * from './useRollbar.tsx'
+export * from './useErrorReporter.tsx'

package/src/contexts/ErrorReporter/{useRollbar.tsx → useErrorReporter.tsx}

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

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

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

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

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