FallbackJS Documentation
FallbackJS is a tiny, zero-configuration JavaScript library that provides clean, user-friendly fallback pages for common frontend failures. It works automatically by adding a single script tag. No backend. No tracking.
The goal is simple: make your site usable even when things go wrong. FallbackJS is about presentation, not prevention or verification.
Installation
Adding FallbackJS to your project takes one line. You can choose either the development (readable) version for debugging or the minified production version for faster loading.
Development version (readable)
<script src="https://fallbackjs.netlify.app/fallback.js"></script>
Production / Minified version
<script src="https://fallbackjs.netlify.app/fallback.min.js"></script>
Handled Failures
FallbackJS automatically detects and handles these failure scenarios:
- Offline / Network unavailable: Displays a minimal offline page.
- Broken images: Replaces missing images with clean placeholders.
- Runtime JavaScript errors: Shows a safe fallback message without breaking your page.
Each fallback is minimal, responsive, and non-intrusive.
Accessibility
FallbackJS follows basic accessibility principles:
- Semantic HTML for all fallback pages.
- Keyboard interactions are safe.
- High contrast, readable typography.
- Minimal motion, avoids flashing or animation-induced distractions.
FAQ
Q: Why not handle errors myself?
FallbackJS is a convenience for common failures. You can still handle errors manually, but FallbackJS reduces boilerplate and improves UX quickly.
Q: Does FallbackJS replace monitoring tools?
No. FallbackJS only manages presentation of failures, not logging or prevention.
Q: Can I style it?
Yes, the fallback UI is fully customizable with CSS.