Lit Element Disaster Recovery Plan —
Lit Element DR
Lit Element Web Components Disaster Recovery CDN Failover Service Worker Offline State Recovery Error Boundary Rollback Health Check Resilience Progressive Enhancement
| DR Strategy | RTO | RPO | Complexity | เหมาะกับ |
|---|---|---|---|---|
| CDN Failover | 30 วินาที | 0 | ปานกลาง | Static Assets |
| Service Worker | 0 (Cached) | Last cache | สูง | Offline Apps |
| State Recovery | ทันที | Last save | ต่ำ | Form Data |
| Rollback Deploy | 2-5 นาที | Previous ver | ต่ำ | Bad Deploys |
Lit Element Components
=== Lit Element with Error Boundary ===
npm install literror-boundary.ts
import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
@customElement('error-boundary')
export class ErrorBoundary extends LitElement {@state() hasError = false;
@state() errorMessage = '';
static styles = css`
.error-container {
padding: 20px;
border: 2px solid #e74c3c;
border-radius: 8px;
background: #fdf2f2;
text-align: center;
}
.retry-btn {
margin-top: 12px;
padding: 8px 16px;
background: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
`;
connectedCallback() {
super.connectedCallback();
window.addEventListener('error', this._handleError.bind(this));
เนื้อหาเกี่ยวข้อง — บทความที่เกี่ยวข้อง: swift code krungsri
window.addEventListener('unhandledrejection', this._handleRejection.bind(this));
}
_handleError(event) {
this.hasError = true;
this.errorMessage = event.message;
this._reportError(event);
}
_handleRejection(event) {
แนะนำเพิ่มเติม — สัญญาณเทรดรายวัน XM Signal
this.hasError = true;
this.errorMessage = event.reason?.message || 'Async error';
}
_reportError(error) {
fetch('/api/errors', {
method: 'POST',
body: JSON.stringify({ error: error.message, stack: error.stack })
}).catch(() => {});
}
_retry() {
this.hasError = false;
this.errorMessage = '';
}
render() {
if (this.hasError) {
return html`
<div class="error-container">
<h3>Something went wrong</h3>
# <button class="retry-btn" @click=>Retry</button>
</div>`;
}
return html`<slot></slot>`;
เนื้อหาเกี่ยวข้อง — อ่านต่อ: LLM Inference vLLM GitOps Workflow
}
}
from dataclasses import dataclass
@dataclass
class Component:
name: str
type: str
size_kb: float
lazy: bool
cached: bool
status: str
components = [
Component("app-shell", "Layout", 8.5, False, True, "Active"),
Component("error-boundary", "Utility", 2.1, False, True, "Active"),
Component("offline-banner", "UI", 1.5, False, True, "Active"),
Component("data-table", "Feature", 15.2, True, True, "Active"),
Component("chart-widget", "Feature", 25.0, True, True, "Active"),
แนะนำเพิ่มเติม — เรียนเทรดกับ iCafeForex
Component("form-wizard", "Feature", 12.0, True, True, "Active"),
Component("notification-toast", "UI", 3.0, False, True, "Active"),
]
lazy = "Lazy" if c.lazy else "Eager"
cached = "Cached" if c.cached else "No Cache"
Service Worker
=== Service Worker for DR ===
sw.js — Cache-first with Network Fallback
const CACHE_NAME = 'app-v2.1.0';
const OFFLINE_URL = '/offline.html';
เนื้อหาเกี่ยวข้อง — ดูเพิ่มเติมเรื่อง Crossplane Composition Interview Preparation — เตรียมสัมภาษณ์ Kubernetes Infr…
const PRECACHE_URLS = [
'/',
'/index.html',
'/offline.html',
'/assets/app-shell.js',
'/assets/error-boundary.js',
'/assets/styles.css',
'/assets/logo.svg',
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(PRECACHE_URLS);
})
);
self.skipWaiting();
});
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
event.respondWith(
fetch(event.request).catch(() => {
return caches.match(OFFLINE_URL);
})
);
return;
}
event.respondWith(
caches.match(event.request).then((cached) => {
if (cached) return cached;
return fetch(event.request).then((response) => {
เนื้อหาเกี่ยวข้อง — ดูเพิ่มเติมเรื่อง PHP Livewire MLOps Workflow — คู่มือฉบับสมบูรณ์ 2026
const clone = response.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(event.request, clone);
});
return response;
}).catch(() => {
return new Response('Offline', { status: 503 });
});
})
);
});
@dataclass
class CacheStrategy:
pattern: str
strategy: str
ttl: str
fallback: str
strategies = [
CacheStrategy("HTML Pages", "Network-first", "5 min", "Offline page"),
CacheStrategy("JS Bundles", "Cache-first", "30 days", "Cached version"),
CacheStrategy("CSS Styles", "Cache-first", "30 days", "Cached version"),
CacheStrategy("Images", "Cache-first", "7 days", "Placeholder"),
CacheStrategy("API Data", "Network-first", "1 min", "Stale cache"),
CacheStrategy("Fonts", "Cache-first", "90 days", "System font"),
]
เคล็ดลับ
- SW: Service Worker Precache Critical Assets ทุกครั้ง
- Error: Error Boundary ครอบทุก Component สำคัญ
- Cache: Cache-first สำหรับ Static, Network-first สำหรับ Data
- Rollback: ต้อง Rollback ได้ภายใน 2 นาทีเสมอ
- Test: ซ้อม DR ทุกเดือน ทดสอบทุก Scenario
Lit Element คืออะไร
Library Web Components เล็ก เร็ว TypeScript Reactive Properties Template Scoped Styles Reusable React Vue Angular Google YouTube
