rbox - Molodetz Institute

 import BaseComponent from './base-component.js';
 export default class ErrorBoundary extends BaseComponent {
     constructor() {
         super();
         this.error = null;
         this.errorInfo = null;
     }
     _getStyles() {
         return `<style>
             :host {
                 display: block;
             }
             .error-container {
                 padding: 2rem;
                 background: #ffebee;
                 border: 1px solid #f44336;
                 border-radius: 8px;
                 color: #c62828;
             }
             h2 {
                 margin: 0 0 1rem 0;
                 font-size: 1.5rem;
             }
             p {
                 margin: 0 0 0.5rem 0;
                 line-height: 1.6;
             }
             .error-details {
                 background: rgba(0, 0, 0, 0.1);
                 padding: 1rem;
                 border-radius: 4px;
                 font-family: monospace;
                 font-size: 0.85rem;
                 overflow-x: auto;
                 max-height: 200px;
                 overflow-y: auto;
                 margin-top: 1rem;
             }
             .error-details pre {
                 margin: 0;
                 white-space: pre-wrap;
                 word-wrap: break-word;
             }
             button {
                 margin-top: 1rem;
                 padding: 0.75rem 1.5rem;
                 background: #f44336;
                 color: white;
                 border: none;
                 border-radius: 4px;
                 cursor: pointer;
                 font-weight: 600;
             }
             button:hover {
                 background: #d32f2f;
             }
         </style>`;
     }
     _getTemplate() {
         if (!this.error) {
             return '<slot></slot>';
         }
         return `
             <div class="error-container" role="alert">
                 <h2>Something went wrong</h2>
                 <p>${this.error.message || 'An unexpected error occurred'}</p>
                 <p>Please refresh the page or contact support if the problem persists.</p>
                 <div class="error-details">
                     <pre>${this.error.stack || 'No stack trace available'}</pre>
                 </div>
                 <button type="button" onclick="location.reload()">Reload Page</button>
             </div>
         `;
     }
     catch(error, errorInfo) {
         this.error = error;
         this.errorInfo = errorInfo;
         this.render();
         console.error('Error caught by boundary:', error, errorInfo);
     }
     reset() {
         this.error = null;
         this.errorInfo = null;
         this.render();
     }
 }
 customElements.define('error-boundary', ErrorBoundary);