Keep working when a script or service fails

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.

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.