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.
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();
});
});
}
error event. Check this for more details please.onerror will only catch HTTP errors.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>
SyntaxError, which is an early error that cannot be handled by a try-catch statement.