@frank-auth/react/dist/cjs/components/auth/common/error-boundary.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("@emotion/styled");const E=require("../../ui/button/button.cjs"),p=require("../../ui/card/card.cjs"),w=require("framer-motion"),j=require("react"),b=require("../../../hooks/use-config.cjs"),k=require("../../../hooks/use-theme.cjs"),N=r=>r&&r.__esModule?r:{default:r},l=N(j);var S=Object.defineProperty,B=(r,t,o)=>t in r?S(r,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[t]=o,f=(r,t,o)=>B(r,typeof t!="symbol"?t+"":t,o);function _({error:r,errorInfo:t,resetError:o,showDetails:s=!1,title:n="Something went wrong",subtitle:i="An unexpected error occurred while processing your request.",className:u=""}){const{getColorValue:x}=k.useTheme(),{organizationSettings:h}=b.useConfig(),[d,y]=l.default.useState(!1),g=l.default.useMemo(()=>{const a=r.message.toLowerCase();return a.includes("network")||a.includes("fetch")?"network":a.includes("auth")||a.includes("unauthorized")?"auth":a.includes("permission")||a.includes("forbidden")?"permission":a.includes("timeout")?"timeout":"unknown"},[r.message]),m={network:{title:"Connection Problem",subtitle:"Please check your internet connection and try again.",action:"Retry"},auth:{title:"Authentication Error",subtitle:"Please sign in again to continue.",action:"Sign In"},permission:{title:"Access Denied",subtitle:"You don't have permission to access this resource.",action:"Go Back"},timeout:{title:"Request Timeout",subtitle:"The request took too long to complete. Please try again.",action:"Retry"},unknown:{title:n,subtitle:i,action:"Retry"}}[g],v=()=>{switch(g){case"network":return e.jsx("svg",{className:"w-12 h-12 text-warning-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.732 16.5c-.77.833.192 2.5 1.732 2.5z"})});case"auth":return e.jsx("svg",{className:"w-12 h-12 text-danger-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"})});case"permission":return e.jsx("svg",{className:"w-12 h-12 text-warning-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L5.636 5.636"})});case"timeout":return e.jsx("svg",{className:"w-12 h-12 text-warning-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"})});default:return e.jsx("svg",{className:"w-12 h-12 text-danger-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.732 16.5c-.77.833.192 2.5 1.732 2.5z"})})}};return e.jsx(w.motion.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},className:`flex items-center justify-center min-h-64 p-4 ${u}`,children:e.jsxs(p.Card,{className:"w-full max-w-md",children:[e.jsxs(p.CardHeader,{className:"flex flex-col items-center text-center",children:[h?.branding?.logoUrl&&e.jsx("img",{src:h.branding.logoUrl,alt:"Logo",className:"h-8 w-auto mb-4"}),e.jsx("div",{className:"mb-4",children:v()}),e.jsx("h3",{className:"text-xl font-semibold text-foreground mb-2",children:m.title}),e.jsx("p",{className:"text-default-500 text-sm mb-4",children:m.subtitle})]}),e.jsx(p.CardBody,{className:"pt-0",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsx(E.Button,{color:"primary",variant:"solid",size:"lg",className:"w-full",onPress:o,children:m.action}),s&&e.jsx(E.Button,{variant:"light",size:"sm",onPress:()=>y(!d),children:d?"Hide Details":"Show Details"})]}),s&&d&&e.jsx(w.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},className:"mt-4 p-3 bg-default-100 dark:bg-default-800 rounded-lg",children:e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{children:[e.jsx("span",{className:"text-xs font-medium text-default-600",children:"Error Message:"}),e.jsx("p",{className:"text-xs text-default-500 mt-1 font-mono",children:r.message})]}),r.stack&&e.jsxs("div",{children:[e.jsx("span",{className:"text-xs font-medium text-default-600",children:"Stack Trace:"}),e.jsx("pre",{className:"text-xs text-default-500 mt-1 overflow-auto max-h-32 font-mono",children:r.stack})]})]})})]})})]})})}class c extends l.default.Component{constructor(t){super(t),f(this,"retryTimeoutId",null),f(this,"reportError",async(o,s)=>{const{errorReportingUrl:n}=this.props;if(n)try{await fetch(n,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({error:{message:o.message,stack:o.stack,name:o.name},errorInfo:s,errorId:this.state.errorId,timestamp:new Date().toISOString(),userAgent:navigator.userAgent,url:window.location.href})})}catch(i){console.error("Failed to report error:",i)}}),f(this,"resetError",()=>{const{onRetry:o}=this.props;this.retryTimeoutId&&clearTimeout(this.retryTimeoutId),this.setState({hasError:!1,error:null,errorInfo:null,errorId:""}),o?.()}),this.state={hasError:!1,error:null,errorInfo:null,errorId:""}}static getDerivedStateFromError(t){return{hasError:!0,error:t,errorId:Date.now().toString(36)+Math.random().toString(36).substr(2)}}componentDidCatch(t,o){const{onError:s,logErrors:n=!0,reportErrors:i=!1,errorReportingUrl:u}=this.props;this.setState({errorInfo:o}),n&&(console.group("🚨 Error Boundary Caught Error"),console.error("Error:",t),console.error("Error Info:",o),console.error("Component Stack:",o.componentStack),console.groupEnd()),s?.(t,o),i&&u&&this.reportError(t,o)}render(){const{hasError:t,error:o,errorInfo:s}=this.state,{children:n,fallback:i=_,showDetails:u=!1,title:x,subtitle:h,className:d}=this.props;return t&&o?e.jsx(i,{error:o,errorInfo:s,resetError:this.resetError,showDetails:u,title:x,subtitle:h,className:d}):n}}function D(){const[r,t]=l.default.useState(null),o=l.default.useCallback(s=>{t(s)},[]);return l.default.useEffect(()=>{if(r)throw r},[r]),o}function C(r,t){const o=s=>e.jsx(c,{...t,children:e.jsx(r,{...s})});return o.displayName=`withErrorBoundary(${r.displayName||r.name})`,o}function L({children:r,...t}){return e.jsx(c,{title:"Authentication Error",subtitle:"There was a problem with the authentication process.",showDetails:process.env.NODE_ENV==="development",reportErrors:process.env.NODE_ENV==="production",...t,children:r})}function T({children:r,...t}){return e.jsx(c,{title:"Form Error",subtitle:"There was a problem processing your form submission.",showDetails:process.env.NODE_ENV==="development",...t,children:r})}function M({children:r,...t}){return e.jsx(c,{title:"Service Error",subtitle:"There was a problem connecting to our services.",showDetails:process.env.NODE_ENV==="development",reportErrors:process.env.NODE_ENV==="production",...t,children:r})}var A=c;exports.ApiErrorBoundary=M;exports.AuthErrorBoundary=L;exports.ErrorBoundary=c;exports.FormErrorBoundary=T;exports.default=A;exports.useAsyncError=D;exports.withErrorBoundary=C;
//# sourceMappingURL=error-boundary.cjs.map