feat(04-02): global error handler + child-friendly error overlay
- Add error overlay HTML element in index.html before script tag - Add window error + unhandledrejection listeners in main.ts - Add error overlay CSS styles (fixed, z-index 9999, tree icon, reload button) - Error message: "Oh, der Wald braucht kurz eine Pause..."
This commit is contained in:
@@ -183,6 +183,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<div id="error-overlay" class="error-overlay" style="display:none">
|
||||||
|
<div class="error-overlay__content">
|
||||||
|
<p class="error-overlay__icon">🌳</p>
|
||||||
|
<p class="error-overlay__message">Oh, der Wald braucht kurz eine Pause...</p>
|
||||||
|
<button class="error-overlay__btn" onclick="location.reload()">Nochmal versuchen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+12
@@ -1,4 +1,16 @@
|
|||||||
import "./styles/main.css";
|
import "./styles/main.css";
|
||||||
import { initApp } from "./app";
|
import { initApp } from "./app";
|
||||||
|
|
||||||
|
window.addEventListener("error", (event) => {
|
||||||
|
console.error("Global error:", event.error);
|
||||||
|
const overlay = document.getElementById("error-overlay");
|
||||||
|
if (overlay) overlay.style.display = "flex";
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("unhandledrejection", (event) => {
|
||||||
|
console.error("Unhandled rejection:", event.reason);
|
||||||
|
const overlay = document.getElementById("error-overlay");
|
||||||
|
if (overlay) overlay.style.display = "flex";
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", initApp);
|
document.addEventListener("DOMContentLoaded", initApp);
|
||||||
|
|||||||
@@ -964,6 +964,45 @@ h3 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Error overlay — kindgerechte Fehlermeldung */
|
||||||
|
.error-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(255, 248, 240, 0.95);
|
||||||
|
z-index: 9999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-overlay__content {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-overlay__icon {
|
||||||
|
font-size: 4rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-overlay__message {
|
||||||
|
font-family: "Quicksand", sans-serif;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--text-dark);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-overlay__btn {
|
||||||
|
font-family: "Quicksand", sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 0.75rem 2rem;
|
||||||
|
background: var(--accent-green);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
/* Accessibility: respect reduced motion preference */
|
/* Accessibility: respect reduced motion preference */
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.falling-letter,
|
.falling-letter,
|
||||||
|
|||||||
Reference in New Issue
Block a user