summary
- window.onerror 无法捕获 onunhandledrejection 错误
- try...catch 无法捕获异步错误,包括 setTimeout 和 promise。可以捕获 async...await 错误
- promise 被 rejected,在有 onRejected 的情况下,onRejected 发挥作用,catch 并未被调用;在没有onRejected 的情况下 catch 发挥作用
- onResolve 和 onRejected 里的错误,可以被后面的 catch 捕获,无法被 try...catch 捕获
other
- try...catch 也无法捕获语法错误
- 如果想使用 window.onerror 函数消化错误,需要显示返回 true,以保证错误不会向上抛出,控制台也就不会看到一堆错误提示。
- 跨域之后 window.onerror 在很多浏览器中是无法捕获异常信息的。要统一返回 Script error,这就需要 script 脚本设置为:
crossorigin="anonymous" - 处理网络加载错误:使用 window.addEventListener('error') 方式对加载异常进行处理。注意这时候我们无法使用 window.onerror 进行处理, 因为 window.onerror 事件是通过事件冒泡获取 error 信息的,而网络加载错误是不会进行事件冒泡的。
- 怎么区分网络资源加载错误和其他一般错误:普通错误的 error 对象中会有一个 error.message 属性,表示错误信息,而资源加载错误对应的 error 对象却没有,
test code
const fetchDataSuccess = () => Promise.resolve({ name:'123'})
const fetchDataFail = () => Promise.reject({ name:'123'})
const testTryCatch = async() =>{
try{
// Promise.reject('reject')
// throw Error('err')
await fetchDataFail()
console.log('fetch success')
} catch(e){
console.log('catch error:',e)
}
}
const testPromiseError = () => {
try{
new Promise((resolve, reject) => {
throw new Error()
// resolve({})
}).then( () => {
console.log('resolved')
// throw Error()
}, err => {
console.log('rejected')
throw err
})
// .catch(err => {
// console.log('catch')
// })
}catch(e){
console.log('testPromiseError try-catch')
}
}
// testTryCatch();
// testPromiseError();" title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
</div><pre class="js hljs language-javascript"><span class="hljs-variable language_">window</span>.<span class="hljs-property">onerror</span> = <span class="hljs-function">() =></span> { <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'window.onerror'</span>)}
<span class="hljs-variable language_">window</span>.<span class="hljs-property">onunhandledrejection</span> = <span class="hljs-function">() =></span> { <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'window.onunhandledrejection'</span>) }
<span class="hljs-keyword">const</span> <span class="hljs-title function_">fetchDataSuccess</span> = (<span class="hljs-params"></span>) => <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">resolve</span>({ <span class="hljs-attr">name</span>:<span class="hljs-string">'123'</span>})
<span class="hljs-keyword">const</span> <span class="hljs-title function_">fetchDataFail</span> = (<span class="hljs-params"></span>) => <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>({ <span class="hljs-attr">name</span>:<span class="hljs-string">'123'</span>})
<span class="hljs-keyword">const</span> <span class="hljs-title function_">testTryCatch</span> = <span class="hljs-keyword">async</span>(<span class="hljs-params"></span>) =>{
<span class="hljs-keyword">try</span>{
<span class="hljs-comment">// Promise.reject('reject')</span>
<span class="hljs-comment">// throw Error('err')</span>
<span class="hljs-keyword">await</span> <span class="hljs-title function_">fetchDataFail</span>()
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'fetch success'</span>)
} <span class="hljs-keyword">catch</span>(e){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'catch error:'</span>,e)
}
}
<span class="hljs-keyword">const</span> <span class="hljs-title function_">testPromiseError</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">try</span>{
<span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>()
<span class="hljs-comment">// resolve({})</span>
}).<span class="hljs-title function_">then</span>( <span class="hljs-function">() =></span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'resolved'</span>)
<span class="hljs-comment">// throw Error()</span>
}, <span class="hljs-function"><span class="hljs-params">err</span> =></span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'rejected'</span>)
<span class="hljs-keyword">throw</span> err
})
<span class="hljs-comment">// .catch(err => {</span>
<span class="hljs-comment">// console.log('catch')</span>
<span class="hljs-comment">// })</span>
}<span class="hljs-keyword">catch</span>(e){
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'testPromiseError try-catch'</span>)
}
}
<span class="hljs-comment">// testTryCatch();</span>
<span class="hljs-comment">// testPromiseError();</span></pre><p>from: <a href="https://link.segmentfault.com/?enc=6F%2B%2FqKdNsAdv4JKif7rWuA%3D%3D.Z653zA9cADzeVP361LK19akuR4lP5vDrfoXiaKsefa6FrO27m9lJX1c00Ocy9BnqAOOPYAxwQ2lpxDb9ZXxMxw6TGD3nl0NQ%2Bih3KC5TLp5xugEjA3m%2FKydEmGiRmJ2sR%2FE%2BOM8X1mm0%2BtmbJ2%2BY1Q%3D%3D" rel="nofollow" target="_blank">https://fe.mbear.top/xing-neng-you-hua/032-xing-neng-jian-kon...</a></p>