Click Grayscale with no image loaded → console shows:
TypeError: Cannot read properties of null
function applyFilter(ctx, width, height, filterFn) {
if (!ctx) throw new Error('Canvas context not initialized');
if (width <= 0 || height <= 0)
throw new Error('Invalid canvas dimensions');
const imageData = ctx.getImageData(0, 0, width, height);
// ... rest of function
}
grayscaleBtn.addEventListener('click', () => {
try {
applyFilter(ctx, canvas.width, canvas.height, grayscale);
} catch (error) {
showToast(error.message, 'error');
}
});
If applyFilter throws, the catch block catches the error and shows a toast instead of crashing the page.
function showToast(message, type = 'info') {
const toast = document.createElement('div');
toast.className = `toast toast-${type}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 3000);
}
CSS for the toast notifications:
| Class | Color | Meaning |
|---|---|---|
| .toast-error | Red background | Something failed |
| .toast-warning | Yellow background | Caution, check this |
| .toast-success | Green background | Action completed |
| .toast-info | Blue background | Neutral information |
Add position: fixed, bottom-right corner, slide-in animation from Session 17.
Wrap every filter button's event listener in try/catch. Test each:
| Test Case | Expected Toast |
|---|---|
| Empty canvas + any filter | "Please upload an image first" |
| Corrupt image data | "Failed to process image" |
| Extreme slider values | Should work (clamping handles it) |
git switch -c bugfix/PIXELCRAFT-011-error-handling
git add src/scripts/ src/styles/
git commit -m "Add error handling and toast notifications (PIXELCRAFT-011)"
git push origin bugfix/PIXELCRAFT-011-error-handling
# PR → Review → Merge → Close ticket ✅
Fail-safe vs fail-fast design philosophy.
Error handling strategy depends on context — a critical engineering decision.