前端监控系统之代码运行错误类型及相应的处理方式

常见JS执行错误

SyntaxError：语法错误，解析时发生语法错误

// 在控制台运行

// 一般语法错误
const xx,

// 特殊语法错误
JSON.parse('');

SyntaxError在构建阶段，甚至本地开发阶段就会被发现；
而特殊语法错误可以被所有错误捕获方式捕获。

TypeError：类型错误，值不是所期待的类型

// 控制台运行 
const person = undefined;
person.name;

ReferenceError：引用错误，引用未声明的变量

// 控制台运行 
nodefined;

RangeError：范围错误，当一个值不在其所允许的范围或者集合中

// 控制台运行
// 爆栈
(function fn() {
    fn();
})();

网络错误

ResourceError：资源加载错误

// 控制台运行 
new Image().src = '/remote/image/notdeinfed.png';

HttpError：http请求错误

// 控制台运行 
fetch('/remote/notdefined');

搜集错误

所有起因来源于错误，那我们如何进行错误捕获。

try/catch

能捕获常规运行时错误，语法错误和异步错误不行

// 常规运行时错误，可以捕获 ✅
try {
  console.log(notdefined);
} catch(e) {
  console.log('捕获到异常：', e);
}

// 语法错误，不能捕获 ❌
try {
  const notdefined,
} catch(e) {
  console.log('捕获到异常：', e);
}

// 异步错误，不能捕获 ❌
try {
  setTimeout(() => {
    console.log(notdefined);
  }, 0)
} catch(e) {
  console.log('捕获到异常：',e);
}

try/catch有它细致处理的优势，但缺点也比较明显。

window.onerror

当 JS 运行时错误发生时，window 会触发一个 ErrorEvent 接口的 error 事件。

/**
* @param {String}  message    错误信息
* @param {String}  source    出错文件
* @param {Number}  lineno    行号
* @param {Number}  colno    列号
* @param {Object}  error  Error对象
*/

window.onerror = function(message, source, lineno, colno, error) {
   console.log('捕获到异常：', {message, source, lineno, colno, error});
}

先验证下几个错误是否可以捕获。​

window.onerror = function(message, source, lineno, colno, error) {
   console.log('捕获到异常：', {message, source, lineno, colno, error});
};
window.onload = function () {
  // 一般语法错误 ❌
  const xx,
  
  // 特殊语法错误 ✅
  JSON.parse('');

  // 类型错误 ✅
  const person = undefined;
  person.name;

  // 引用错误 ✅
  a;

  // 范围错误 ✅
  (function fn() {
    fn();
  })();

  // 资源加载错误 ❌
  new Image().src = 'aaa';

  // http请求错误 ❌
  fetch('aaa');

  // promise异步错误 ❌
  new Promise(() => {
    a;
  });

  // setTimeout/setInterval异步错误 ✅
  setTimeout(() => {
    b;
  }, 0);
};

window.onerror不能捕获语法错误和promise异步错误（包括网络错误、资源加载）。

window.addEventListener

当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，这些 error 事件不会向上冒泡到 window，但能被捕获。而window.onerror不能监测捕获。

// 图片、script、css加载错误，都能被捕获 ✅
<script>
  window.addEventListener('error', (error) => {
     console.log('捕获到异常：', error);
  }, true)
</script>
<img src="https://yun.tuia.cn/image/kkk.png">
<script src="https://yun.tuia.cn/foundnull.js"></script>
<link href="https://yun.tuia.cn/foundnull.css" rel="stylesheet"/>
  
// new Image错误，不能捕获 ❌
<script>
  window.addEventListener('error', (error) => {
    console.log('捕获到异常：', error);
  }, true)
</script>
<script>
  new Image().src = 'https://yun.tuia.cn/image/lll.png'
</script>

// fetch错误，不能捕获 ❌
<script>
  window.addEventListener('error', (error) => {
    console.log('捕获到异常：', error);
  }, true)
</script>
<script>
  fetch('https://tuia.cn/test')
</script>

到目前为止，还有语法错误、promise异步错误、new Image资源加载错误还没有捕获方法。

语法错误可以在开发阶段依靠编辑器发现，上线的项目是不会出现语法错误的。

new Image运用的比较少，可以单独自己处理自己的错误，可以通过img.onerror = fn来单独处理。

但通用的fetch怎么办呢，fetch返回Promise，但Promise的错误不能被捕获，怎么办呢？​

Promise错误

1.普通Promise错误

try/catch不能捕获Promise中的错误

// try/catch 不能处理 JSON.parse 的错误，因为它在 Promise 中
try {
  new Promise((resolve,reject) => { 
    JSON.parse('')
    resolve();
  })
} catch(err) {
  console.error('in try catch', err)
}

// 需要使用catch方法
new Promise((resolve,reject) => { 
  JSON.parse('')
  resolve();
}).catch(err => {
  console.log('in catch fn', err)
})

2.async错误

try/catch不能捕获async包裹的错误

const getJSON = async () => {
  throw new Error('inner error')
}

// 通过try/catch处理
const makeRequest = async () => {
    try {
        // 捕获不到
        JSON.parse(getJSON());
    } catch (err) {
        console.log('outer', err);
    }
};

try {
    // try/catch不到
    makeRequest()
} catch(err) {
    console.error('in try catch', err)
}

try {
    // 需要await，才能捕获到
    await makeRequest()
} catch(err) {
    console.error('in try catch', err)
}

3.import chunk错误

import其实返回的也是一个promise，因此使用如下两种方式捕获错误

// Promise catch方法
import(/* webpackChunkName: "incentive" */'./index').then(module => {
    module.default()
}).catch((err) => {
    console.error('in catch fn', err)
})

// await 方法，try catch
try {
    const module = await import(/* webpackChunkName: "incentive" */'./index');
    module.default()
} catch(err) {
    console.error('in try catch', err)
}

小结：全局捕获Promise中的错误

以上三种其实归结为Promise类型错误，可以通过unhandledrejection捕获。
为了防止有漏掉的 Promise 异常，可通过unhandledrejection用来全局监听Uncaught Promise Error。

// 全局统一处理Promise
window.addEventListener("unhandledrejection", function(e){
  console.log('捕获到异常：', e);
});
fetch('https://tuia.cn/test')

Vue错误

由于Vue会捕获所有Vue单文件组件或者Vue.extend继承的代码，所以在Vue里面出现的错误，并不会直接被window.onerror捕获，而是会抛给Vue.config.errorHandler。

/**
 * 全局捕获Vue错误，直接扔出给onerror处理
 */
Vue.config.errorHandler = function (err) {
  setTimeout(() => {
    throw err
  })
}

React错误

react 通过componentDidCatch，声明一个错误边界的组件

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

class App extends React.Component {
   
  render() {
    return (
    <ErrorBoundary>
      <MyWidget />
    </ErrorBoundary>  
    )
  }
}

但error boundaries并不会捕捉以下错误：React事件处理，异步代码，error boundaries自己抛出的错误。