Why I cannot handle js errors when adding a javascript code dynamically?

Here is the code:

try {
  var element = document.createElement("script");
  element.language = "javascript";
  element.type = "text/javascript";       
  element.defer = true;
  element.text = "this is not a javascript code";
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(element);
} catch(err) {
  alert("error caught");
}

The error caught alert isn't shown even if the script is incorrect.

Why I cannot handle js errors when adding a javascript code dynamically?

Here is the code:

try {
  var element = document.createElement("script");
  element.language = "javascript";
  element.type = "text/javascript";       
  element.defer = true;
  element.text = "this is not a javascript code";
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(element);
} catch(err) {
  alert("error caught");
}

The error caught alert isn't shown even if the script is incorrect.

• javascript
• error-handling

• 1 What type of error is this, and does the error not throw if you try it in a normal script tag? Anyway, that code (presuming that's an example only) throws a SyntaxError, which is an early error that cannot be handled by a try-catch statement. – Qantas 94 Heavy Commented Dec 30, 2013 at 11:04

3 Answers 3

As far as I know, there's no way to handle errors (even syntax ones) on certain script tag. You could use window.onerror and look for SyntaxError at the beginning of the error message. I suppose, this is the kind of errors, you're trying to catch.

For catching src loading errors from dynamically added script

var element = document.createElement("script");
element.type = "text/javascript";
element.defer = true;
element.src = "Your link";

element.onerror = (error) => {
  alert("Error") ; //you will get to know some errors here
}

var windowErrorHandler = (event) =>{
    event.preventDefault(); //if you do not want to output SyntaxErrors to console
    var error = event.error;
    //and some errors here                      
};    
window.addEventListener('error', windowErrorHandler);

var head = document.getElementsByTagName('head')[0];
head.appendChild(element);

Here is another example snippet that dynamically imports a ES6 module and that you might want to adapt to your needs:

 convertScriptToTree(){

        this.clearViews();
        

        window.scriptLoadedHook = ()=>{
                window.scriptLoadedHook = undefined;
                if(window.createModel){
                    this.model = window.createModel();
                }               
                this.refresh();             
        }; 

        var self = this;
                    
        this.editor.processText(async (sourceCode)=>{

            await new Promise((resolve, reject)=>{               

                var script = document.createElement('script');
                script.type = 'module';
                script.innerHTML = sourceCode + '\n' + 
                                   'if(window.scriptLoadedHook){window.scriptLoadedHook();}'; 

                var windowErrorHandler = (event) =>{
                    event.preventDefault();
                    var error = event.error;
                    error.stack = error.stack + '\n\n' + sourceCode;                    
                    window.removeEventListener('error', windowErrorHandler);
                    reject(error);
                };

                window.addEventListener('error', windowErrorHandler);  

                var rejectHandler = (event) =>{
                    console.log(event);
                    window.removeEventListener('error', windowErrorHandler);
                    var message = 'Please check the import statements:\n'+sourceCode;
                    reject(message);                        
                };              

                script.addEventListener('error', rejectHandler);                

                script.addEventListener('abort', rejectHandler);            
                             

                var loadedHandler = ()=>{
                    window.removeEventListener('error', windowErrorHandler);
                    resolve();
                };

                script.addEventListener('load', loadedHandler);
                script.onload = loadedHandler;

                var body = document.getElementsByTagName('body')[0];
                try {
                    body.appendChild(script); 
                } catch(error){
                    reject(error);
                }               

            })
            .catch(error => {
                console.warn('[Treez]: Could not process JavaScript code:\n', error);
            })
            .then(()=>{
                self.refreshViews();
            });                 
            
        });        
            
    }

the catch statement should be at different level of code try to catch the error inside your added code also the error should be exception not syntax error

<html>
<head>
<script type="text/javascript">
try {
    var element = document.createElement("script");
    element.language = "javascript";
    element.type = "text/javascript";       
    element.defer = true;
    element.text = "try{callingAnonymousMethod();} catch(ex) {alert('error caught');}";
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(element);
} catch(err) {
  alert("error caught");
}
</script></head>
<body>

</body>
<html>