I'm writing an on-page chat software and I'm relatively new to these external JS issues.
My question is how can I load and run our JS on an external page and ignore / run before any existing JS errors on the given page.
Example : Our snippet is within the footer of the customers page. They release an update to one of their JS scripts and they fat finger some code and it breaks. Now our JS code will not load.
What is the best way to handle this?
Use a separate <script> element for your script. Each script will run independently (although they will do so in a shared environment).
If you are depending on their script running successfully (e.g. to provide you with functions or elements in the DOM), then you need to program defensively and test for things you depend on before using them. How you handle those errors is up to you, you could substitute your own replacements, throw your own error, and so on.
<script type="text/javascript">var hover = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cscript src='" + host + "dev.site.com/script.js' type='text/javascript'%3E%3C/script%3E"));</script> The issue seems to be if they put this in the footer of their website and a script before this throws an error, some existing AJAX requests seem not to fire.You can't. If the browser has thrown an error earlier, it will never get to your code. The best you can do is putting a <noscript> tag in to explain that something went wrong.
If you get the customer to put your script tag in the head (before their code) and mark it as async, it might still run, but I wouldn't depend on it.
<noscript> element in won't help since that is displayed if there is no support for scripting, not if a script errors.