Catch js errors when adding a script dynamically

user_202550 0
Viewed 10129

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.

error-handling javascript
3 Answers

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();
            });                 
            
        });        
            
    }
user_44418790
Related