javascript - 将脚本标签插入 DOM 时捕获 SyntaxError 异常

Question

在单页 Web 应用程序中，有时需要将新的 javascript block 附加到页面。

假设我们有以下脚本标记内容，其中确实存在语法错误，例如缺少引号。它一定是一个在解析时而不是运行时引发异常的错误。

var test = {"foo":1, "bar":"test, "baz":"foobar"};

现在，您创建一个新的脚本元素，在其中注入(inject)文本并将其附加到 DOM 中:

var text = 'var test = {"foo":1, "bar":"test, "baz":"foobar"};';        
var node = document.createElement('script');
node.appendChild(document.createTextNode(text));
head.appendChild(node);

当然，在最后一行，会抛出“SyntaxError”异常。

问题是，将最后一行放在 try catch block 中不起作用，异常永远不会被捕获。我设法使用旧的脏 window.onerror 东西捕获错误，但仅限于 Chrome。例如，在 IE11 上，如果禁用脚本错误，则它仅在控制台打开时有效。

所以问题是，如何可靠地捕获此异常以便能够向用户呈现消息？

谢谢

Answer 1

为了捕获 SyntaxError，您可以使用 window.addEventListener('error', ...) 方法并阻止默认值。一些示例代码:

var 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 = (error) =>{
                window.removeEventListener('error', windowErrorHandler);
                reject(error);                  
            };              

            script.addEventListener('error', rejectHandler);
            //script.onerror = rejectHandler;

            script.addEventListener('abort', rejectHandler);
            //script.onabort = 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('Could not process JavaScript code:\n', error);
        })
        .then(()=>{
            //refresh app etc.;
        });                 
        
    });