浏览器端错误捕获处理方法笔记

119 阅读2分钟

summary

  1. window.onerror 无法捕获 onunhandledrejection 错误
  2. try...catch 无法捕获异步错误,包括 setTimeout 和 promise。可以捕获 async...await 错误
  3. promise 被 rejected,在有 onRejected 的情况下,onRejected 发挥作用,catch 并未被调用;在没有onRejected 的情况下 catch 发挥作用
  4. onResolve 和 onRejected 里的错误,可以被后面的 catch 捕获,无法被 try...catch 捕获

other

  1. try...catch 也无法捕获语法错误
  2. 如果想使用 window.onerror 函数消化错误,需要显示返回 true,以保证错误不会向上抛出,控制台也就不会看到一堆错误提示。
  3. 跨域之后 window.onerror 在很多浏览器中是无法捕获异常信息的。要统一返回 Script error,这就需要 script 脚本设置为:
    crossorigin="anonymous"
  4. 处理网络加载错误:使用 window.addEventListener('error') 方式对加载异常进行处理。注意这时候我们无法使用 window.onerror 进行处理, 因为 window.onerror 事件是通过事件冒泡获取 error 信息的,而网络加载错误是不会进行事件冒泡的。
  5. 怎么区分网络资源加载错误和其他一般错误:普通错误的 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">() =&gt;</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">() =&gt;</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>) =&gt; <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>) =&gt; <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>) =&gt;{
         <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>) =&gt; {
                                             <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>) =&gt;</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">() =&gt;</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> =&gt;</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 =&gt; {</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>