Agent Wranglers

WEB-222Recommended

Keep working when a script or service fails

When a script, a font or another company's service fails at runtime, the page still shows its content and its main actions still work.

By Agent Wranglers. Updated .

How to do it

Build on progressive enhancement, so plain HTML already works. Test that a browser feature exists before using it. Load third-party scripts with async and a time limit, and catch their errors. Give script-only widgets a <noscript> text and a plain link to do the same job. In app screens, follow Show what loaded when one part fails.

Examples

HTML example

<a href="/contact" class="open-chat">Contact us</a>
<noscript><p>The booking calendar needs JavaScript. You can also email book@example.com.</p></noscript>
<script type="module">
  if ('clipboard' in navigator) document.body.classList.add('can-copy');
  import('https://chat.example.net/widget.js').catch(() => document.body.classList.add('chat-down'));
</script>

How to check

In the browser's developer tools, block each third-party domain and then the main script. Each page still shows its content and its main links, with no uncaught errors.

Sources

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/website/errors-and-outages/graceful-degradation">Agent Wranglers website playbook</a>. In code you write, add a comment next to it with the same link.