0x1
Version:
2 lines (1 loc) • 10.7 kB
JavaScript
class w{static instance;errors=[];minimized=!1;activeErrorIndex=0;floatingButton=null;modalContainer=null;constructor(){}static getInstance(){if(!w.instance)w.instance=new w;return w.instance}addError(q){let A={id:`error-${Date.now()}-${this.errors.length}`,error:q,timestamp:Date.now()};if(this.errors.push(A),this.activeErrorIndex=this.errors.length-1,this.minimized)this.updateFloatingButton();return A}getErrors(){return[...this.errors]}getCurrentError(){return this.errors.length>0?this.errors[this.activeErrorIndex]:null}navigateNext(){if(this.errors.length===0)return null;return this.activeErrorIndex=(this.activeErrorIndex+1)%this.errors.length,this.getCurrentError()}navigatePrevious(){if(this.errors.length===0)return null;return this.activeErrorIndex=(this.activeErrorIndex-1+this.errors.length)%this.errors.length,this.getCurrentError()}isMinimized(){return this.minimized}minimize(){if(this.minimized=!0,this.modalContainer)this.modalContainer.style.display="none";this.updateFloatingButton()}restore(){if(this.minimized=!1,this.floatingButton)document.body.removeChild(this.floatingButton),this.floatingButton=null;if(this.modalContainer)this.modalContainer.style.display="flex";else this.renderErrorModal()}updateFloatingButton(){if(!this.floatingButton)this.floatingButton=document.createElement("div"),this.floatingButton.className="0x1-error-floating-button",this.floatingButton.style.position="fixed",this.floatingButton.style.bottom="20px",this.floatingButton.style.left="20px",this.floatingButton.style.backgroundColor="#f43f5e",this.floatingButton.style.color="white",this.floatingButton.style.borderRadius="50%",this.floatingButton.style.width="40px",this.floatingButton.style.height="40px",this.floatingButton.style.display="flex",this.floatingButton.style.alignItems="center",this.floatingButton.style.justifyContent="center",this.floatingButton.style.cursor="pointer",this.floatingButton.style.boxShadow="0 4px 12px rgba(0, 0, 0, 0.15)",this.floatingButton.style.zIndex="9999",this.floatingButton.style.fontSize="18px",this.floatingButton.style.fontWeight="bold",this.floatingButton.addEventListener("click",()=>{this.restore()}),document.body.appendChild(this.floatingButton);this.floatingButton.textContent=`${this.errors.length}`;let q=document.createElement("span");q.innerHTML="⚡",q.style.marginRight="2px",this.floatingButton.innerHTML="",this.floatingButton.appendChild(q),this.floatingButton.appendChild(document.createTextNode(`${this.errors.length}`))}renderErrorModal(){let q=this.getCurrentError();if(!q)return;if(this.modalContainer)document.body.removeChild(this.modalContainer);this.modalContainer=document.createElement("div"),this.modalContainer.className="0x1-error-modal-container",this.modalContainer.style.position="fixed",this.modalContainer.style.top="0",this.modalContainer.style.left="0",this.modalContainer.style.width="100%",this.modalContainer.style.height="100%",this.modalContainer.style.backgroundColor="rgba(15, 23, 42, 0.8)",this.modalContainer.style.display="flex",this.modalContainer.style.alignItems="center",this.modalContainer.style.justifyContent="center",this.modalContainer.style.zIndex="9998",this.modalContainer.style.backdropFilter="blur(4px)";let F=I(q.error,this);this.modalContainer.appendChild(F),document.body.appendChild(this.modalContainer)}clearError(q){let F=this.errors.findIndex((A)=>A.id===q);if(F!==-1)if(this.errors.splice(F,1),this.errors.length===0){if(this.modalContainer)document.body.removeChild(this.modalContainer),this.modalContainer=null;if(this.floatingButton)document.body.removeChild(this.floatingButton),this.floatingButton=null}else{if(F<=this.activeErrorIndex)this.activeErrorIndex=Math.max(0,this.activeErrorIndex-1);this.renderErrorModal()}}clearAllErrors(){if(this.errors=[],this.modalContainer)document.body.removeChild(this.modalContainer),this.modalContainer=null;if(this.floatingButton)document.body.removeChild(this.floatingButton),this.floatingButton=null}}var H=w.getInstance(),z=0;function I(q,F){let A={message:q.message||"An unexpected error occurred",name:q.name||"Error",stack:q.stack},j=document.createElement("div");j.className="0x1-error-display",j.style.fontFamily='system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',j.style.background="#1e293b",j.style.color="#e2e8f0",j.style.padding="2rem",j.style.borderRadius="0.5rem",j.style.width="90%",j.style.maxWidth="800px",j.style.maxHeight="85vh",j.style.overflow="auto",j.style.boxShadow="0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",j.style.position="relative";let J=document.createElement("header");J.style.marginBottom="1.5rem",J.style.display="flex",J.style.alignItems="center",J.style.justifyContent="space-between";let O=document.createElement("div");O.style.display="flex",O.style.alignItems="center",O.style.gap="0.5rem";let Y=document.createElement("span");Y.textContent="⚠️",Y.style.fontSize="1.5rem";let Q=document.createElement("span");Q.innerHTML='<span style="color: #3b82f6; font-weight: bold;">0x1</span> Error Boundary',Q.style.fontSize="1.25rem",O.appendChild(Y),O.appendChild(Q);let W=document.createElement("div");if(W.style.display="flex",W.style.alignItems="center",W.style.gap="0.5rem",F){let D=F.getErrors();if(D.length>1){let X=document.createElement("span"),T=D.findIndex((v)=>v.error===q)+1;X.textContent=`${T} / ${D.length}`,X.style.fontSize="0.875rem",X.style.padding="0.25rem 0.5rem",X.style.backgroundColor="#334155",X.style.borderRadius="0.25rem",W.appendChild(X);let L=document.createElement("button");L.innerHTML="<",L.style.width="30px",L.style.height="30px",L.style.background="#334155",L.style.color="white",L.style.border="none",L.style.borderRadius="50%",L.style.cursor="pointer",L.style.display="flex",L.style.alignItems="center",L.style.justifyContent="center",L.style.fontSize="18px",L.style.fontWeight="bold",L.addEventListener("click",()=>{F.navigatePrevious(),F.renderErrorModal()}),W.appendChild(L);let N=document.createElement("button");N.innerHTML=">",N.style.width="30px",N.style.height="30px",N.style.background="#334155",N.style.color="white",N.style.border="none",N.style.borderRadius="50%",N.style.cursor="pointer",N.style.display="flex",N.style.alignItems="center",N.style.justifyContent="center",N.style.fontSize="18px",N.style.fontWeight="bold",N.addEventListener("click",()=>{F.navigateNext(),F.renderErrorModal()}),W.appendChild(N)}let G=document.createElement("button");G.textContent="_",G.style.width="30px",G.style.height="30px",G.style.background="#4f46e5",G.style.color="white",G.style.border="none",G.style.borderRadius="50%",G.style.cursor="pointer",G.style.display="flex",G.style.alignItems="center",G.style.justifyContent="center",G.style.fontSize="16px",G.style.lineHeight="1",G.style.fontWeight="bold",G.addEventListener("click",()=>{F.minimize()}),W.appendChild(G);let K=document.createElement("button");K.textContent="×",K.style.width="30px",K.style.height="30px",K.style.background="#dc2626",K.style.color="white",K.style.border="none",K.style.borderRadius="50%",K.style.cursor="pointer",K.style.display="flex",K.style.alignItems="center",K.style.justifyContent="center",K.style.fontSize="20px",K.style.lineHeight="1",K.style.fontWeight="bold",K.addEventListener("click",()=>{let X=F.getCurrentError();if(X)F.clearError(X.id)}),W.appendChild(K)}J.appendChild(O),J.appendChild(W);let P=document.createElement("h1");P.textContent=A.name,P.style.fontSize="1.8rem",P.style.color="#f87171",P.style.margin="0 0 1rem 0";let Z=document.createElement("div");Z.textContent=A.message,Z.style.fontSize="1.1rem",Z.style.lineHeight="1.5",Z.style.background="#334155",Z.style.padding="1rem",Z.style.borderRadius="0.5rem",Z.style.marginBottom="1.5rem";let y=document.createElement("div");y.style.marginTop="1.5rem";let R=document.createElement("h2");R.textContent="Stack Trace",R.style.fontSize="1.2rem",R.style.color="#38bdf8",R.style.margin="0 0 0.8rem 0";let V=document.createElement("pre");V.textContent=A.stack||"No stack trace available",V.style.background="#0f172a",V.style.color="#e2e8f0",V.style.padding="1rem",V.style.borderRadius="0.5rem",V.style.overflow="auto",V.style.fontSize="0.9rem",V.style.lineHeight="1.4",V.style.maxHeight="20rem",y.appendChild(R),y.appendChild(V),j.appendChild(J),j.appendChild(P),j.appendChild(Z),j.appendChild(y);let $=document.createElement("div");$.style.marginTop="1.5rem",$.style.background="#334155",$.style.padding="1rem",$.style.borderRadius="0.5rem";let U=document.createElement("h2");U.textContent="Possible Solutions",U.style.fontSize="1.2rem",U.style.color="#38bdf8",U.style.margin="0 0 0.8rem 0";let _=document.createElement("ul");_.style.margin="0",_.style.padding="0 0 0 1.5rem",_.style.listStyle="disc";function b(D){let G=document.createElement("li");return G.textContent=D,G.style.marginBottom="0.5rem",G}return _.appendChild(b("Check if your component is properly exported and imported")),_.appendChild(b("Verify that all required props are being passed")),_.appendChild(b("Check for null or undefined values")),_.appendChild(b("Check for type mismatches in your code")),$.appendChild(U),$.appendChild(_),j.appendChild($),j}function f(q){return()=>{try{let A=document.createElement("div");A.setAttribute("data-0x1-error-boundary",`error-boundary-${z++}`);let j=typeof q.children==="function"?q.children():q.children;if(typeof j==="string")A.innerHTML=j;else if(j instanceof Node)A.appendChild(j);else if(Array.isArray(j))j.forEach((J)=>{if(J instanceof Node)A.appendChild(J);else if(typeof J==="string")A.appendChild(document.createTextNode(J))});return A}catch(A){let j=A instanceof Error?A:new Error(String(A));console.error("Error caught by 0x1 Error Boundary:",j);try{let J=H.addError(j),O=typeof window!=="undefined"&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1");if(!H.isMinimized())if(O)setTimeout(()=>{H.renderErrorModal()},100);else H.renderErrorModal();else H.updateFloatingButton();let Y=document.createElement("div");if(Y.setAttribute("data-0x1-error-container",J.id),q.fallback)try{let Q=q.fallback({error:j});if(typeof Q==="string")Y.innerHTML=Q;else if(Q instanceof Node)Y.appendChild(Q)}catch(Q){console.error("Error in custom fallback:",Q)}return Y}catch(J){console.error("Error manager failed:",J);let O=document.createElement("div");return O.appendChild(I(j)),O}}}}var S=(q)=>{let F={...q,children:q.children||(()=>document.createElement("div"))};return f(F)(q)};function x(q,F){return(A)=>{return f({children:()=>{return typeof q==="function"?q(A):q},fallback:F})(A)}}export{x as withErrorBoundary,f as createErrorBoundary,I as createDefaultErrorUI,S as ErrorBoundary};