乐趣区

关于前端:前端异常的捕获与处理

jiezi

这是第 89 篇不掺水的原创，想获取更多原创好文，请搜寻公众号关注咱们吧~ 本文首发于政采云前端博客：前端异样的捕捉与解决

按键无奈点击、元素不展现、页面白屏，这些都是咱们前端不想看到的场景。在计算机程序运行的过程中，也总是会呈现各种各样的异样。上面就让咱们聊一聊有哪些异样以及怎么解决它们。

一、前言

什么是异样，异样就是意料之外的事件，往往影响了程序的正确运行。例如上面几种场景：

  • 页面元素异样（例如按钮无奈点击、元素不展现）
  • 页面卡顿
  • 页面白屏

这些状况都是极其影响用户体验的。对于前端来说，异样尽管不会导致计算机宕机，然而往往会导致用户的操作被阻塞。尽管异样不可齐全杜绝，然而咱们有充沛的理由去了解异样、学习解决异样。

异样解决在程序设计中的重要性是毋庸置疑的。任何有影响力的 Web 应用程序都须要一套欠缺的异样解决机制，但实际上，通常只有服务端团队会在异样解决机制上投入较大精力。尽管客户端应用程序的异样解决也同样重要，但真正受到重视，还是最近几年的事。作为新世纪的卓越前端开发人员，咱们必须了解有哪些异样，当产生异样时咱们有哪些伎俩和工具能够利用。

二、异样分类

从根本上来说，异样就是一个数据结构，它存了异样产生时相干信息，譬如错误码、错误信息等。其中 message 属性是惟一一个可能保障所有浏览器都反对的属性，除此之外，IE、Firefox、Safari、Chrome 以及 Opera 都为事件对象增加了其它相干信息。譬如 IE 增加了与 message 属性完全相同的 description 属性，还增加了保留这外部谬误数量的 number 属性。Firefox 增加了 fileName、lineNumber 和 stack（蕴含堆栈属性）。所以，在思考浏览器兼容性时，最好还是只应用 message 属性。

执行 JS 期间可能会产生的谬误有很多类型。每种谬误都有对应的谬误类型，而当谬误产生的时候就会抛出响应的谬误对象。ECMA-262 中定义了下列 7 种谬误类型：

  • Error：谬误的基类，其余谬误都继承自该类型
  • EvalError：Eval 函数执行异样
  • RangeError：数组越界
  • ReferenceError：尝试援用一个未被定义的变量时，将会抛出此异样
  • SyntaxError：语法解析不合理
  • TypeError：类型谬误，用来示意值的类型非预期类型时产生的谬误
  • URIError：以一种谬误的形式应用全局 URI 处理函数而产生的谬误

三、异样解决

ECMA-262 第 3 版中引入了 try-catch 语句，作为 JavaScript 中解决异样的一种规范形式，根本的语法如下所示。这和 Java 中的 try-catch 语句是全完雷同的。

try {// 可能会导致谬误的代码} catch (error) {// 在谬误产生时怎么解决}

如果 try 块中的任何代码产生了谬误，就会立刻退出代码执行过程，而后执行 catch 块。此时 catch 块会接管到一个蕴含错误信息的对象，这个对象中蕴含的信息因浏览器而异，但独特的是有一个保留着错误信息的 message 属性。

finally 子句在 try-catch 语句中是可选的，然而 finally 子句一经应用，其代码无论如何都会执行。换句话说，try 语句块中代码全副失常执行，finally 子句会执行；如果因为出错执行了 catch 语句，finally 子句照样会执行。只有代码中蕴含 finally 子句，则无论 try 或 catch 语句中蕴含什么代码——甚至是 return 语句，都不会阻止 finally 子句执行。来看上面函数的执行后果：

function testFinally {
  try {return "出去玩";} catch (error) {return "看电视";} finally {return "做作业";}
  return "睡觉";
}

外表上调用这个函数会返回 “ 出去玩 ”，因为返回 “ 出去玩 ” 的语句位于 try 语句块中，而执行此语句又不会出错。实际上返回 “ 做作业 ”，因为最初还有 finally 子句，后果就会导致 try 块里的 return 语句被疏忽，也就是说调用的后果只能返回 “ 做作业 ”。如果把 finally 语句拿掉，这个函数将返回 “ 出去玩 ”。因而，在应用 finally 子句之前，肯定要十分分明你想让代码怎么样。（思考一下如果 catch 块和 finally 块都抛出异样，catch 块的异样是否能抛出）

但令人遗憾的是，try-catch 无奈解决异步代码和一些其余场景。接下来让我具体分析几种异样场景及其解决计划。

四、异样剖析

1. JS 代码谬误

上面为我司外部谬误监控平台一次日常报错的调用堆栈截图：

谬误还是比拟显著的，this 指向导致的问题。onOk 应用一般函数时，函数内执行语句的 this 上下文为 Antd.Modal 组件的实例，而 Antd.Modal 组件不存在 changeFilterType 这个办法。将 onOK 办法像 onCancel 办法一样改成箭头函数，将 this 指向父组件即可。

TypeError 类型在 JavaScript 中会常常遇到，在变量中保留着意外类型时，或者在拜访不存在的办法时，都会导致这种谬误。谬误的起因尽管多种多样，但归根结底还是因为在执行特定类型的操作时，变量的类型并不符合要求所致。再看几个例子：

class People {constructor(name) {this.name = name;}
  sing() {}
}
const xiaoming = new People("小明");
xiaoming.dance(); // 抛出 TypeError
xiaoming.girlfriend.name; // 抛出 TypeError

代码谬误个别在开发和测试阶段就能发现。用 try-catch 也能捕捉到：

// 代码
try {xiaoming.girlfriend.name;} catch (error) {console.log(xiaoming.name + "没有女朋友", error);
}
// 运行后果
// 小明没有女朋友 TypeError: Cannot read property 'name' of undefined

2. JS 语法错误

咱们批改一下代码，咱们把英文分号改成中文分号:

try {xiaoming.girlfriend.name；// 结尾是中文分号} catch(error) {console.log(xiaoming.name + "没有女朋友", error);
}
// 运行后果
// Uncaught SyntaxError: Invalid or unexpected token

SyntaxError 语法错误咱们无奈通过 try-catch 捕捉到，不过语法错误在咱们开发阶段就能够看到，应该不会顺利上到线上环境。

不过凡事总有例外，线上还是能收到一些语法错误的告警，但多半是 JSON 解析出错和浏览器兼容性导致。

再看几个例子：

JSON.parse('{name:xiaoming}');      // Uncaught SyntaxError: Unexpected token n in JSON at position 1
JSON.parse('{"name":xiaoming}');    // Uncaught SyntaxError: Unexpected token x in JSON at position 8
JSON.parse('{"name":"xiaoming"}');  // 失常
var testFunc () => {};             // 在 IE 下会抛出 SyntaxError，因为 IE 不反对箭头函数，须要通过 Babel 等工具当时转译下

应用 JSON.parse 解析时出现异常就是一个很好的应用 try-catch 的场景：

try {JSON.parse(remoteData); // remoteData 为服务端返回的数据
} catch {console.error("服务端数据格式返回异样，无奈解析", remoteData);
}

并不是捕捉到谬误就完结了，捕捉到谬误后，咱们须要思考当谬误产生时：

  • 谬误是否是致命的，会不会导致其它连带谬误
  • 后续的代码逻辑还能不能继续执行，用户还能不能持续操作
  • 是不是须要将谬误信息反馈给用户，提醒用户如何解决该谬误
  • 是不是须要将谬误上报服务端

对应下面的问题这里就会有很多解决方案了，譬如：

  1. 如果是服务器未知异样导致，能够阻塞用户操作，弹窗提醒用户 ” 服务器异样，请稍后重试 ”。并提供给用户一个刷新的按钮；
try {return JSON.parse(remoteData);
} catch (error) {Modal.fail("服务器异样，请稍后重试");
  return false;
}
  1. 如果是数据异样导致，可阻塞用户操作，弹窗提醒用户 ” 服务器异样，请分割客服解决~”，同时将错误信息上报异样服务器，开发人员通过异样堆栈和用户埋点定位问题起因；
try {return JSON.parse(remoteData);
} catch (error) {Modal.fail("服务器异样，请分割客服解决~");
  logger.error("JSON 数据解析出现异常", error);
  return false;
}
  1. 如果数据解析出错属于预料之中的状况，也有代替的默认值，那么当解析出错时间接应用默认值也能够；
try {return JSON.parse(remoteData);
} catch (error) {console.error("服务端数据格式返回异样，应用本地缓存数据", erorr);
  return localData;
}

任何错误处理策略中最重要的一个局部，就是确定谬误是否致命。

3. 异步谬误 

try {setTimeout(() => {undefined.map(v => v);
  }, 1000)
} catch(e) {console.log("捕捉到异样：", e);
}
 
Uncaught TypeError: Cannot read property 'map' of undefined
  at <anonymous>:3:15

并没有捕捉到异样，try-catch 对语法和异步谬误却无能为力，捕捉不到，这是须要咱们特地留神的中央。

五、异样捕捉

5.1 window.onerror

当 JS 运行时谬误产生时，window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror()。

/**
 * @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.error 无奈捕捉动态资源异样和 JS 代码谬误。

5.2 动态资源加载异样

办法一：onerror 来捕捉 

<script>
  function errorHandler(error) {console.log("捕捉到动态资源加载异样", error);
  }
</script>
<script src="http://cdn.xxx.com/js/test.js" onerror="errorHandler(this)"></script>
<link rel="stylesheet" href="http://cdn.xxx.com/styles/test.css" onerror="errorHandler(this)">

这样能够拿到动态资源的谬误，但毛病很显著，代码的侵入性太强了，每一个动态资源标签都要加上 onerror 办法。

办法二：addEventListener(“error”)

<!DOCTYPE html>
<html lang="zh">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>error</title>
  <script>
    window.addEventListener('error', (error) => {console.log('捕捉到异样：', error);
    }, true)
  </script>
</head>
 
<body>
  ![](https://itemcdn.zcycdn.com/15af41ec-e6cb-4478-8fad-1a47402f0f25.png)
</body>
 
</html>

因为网络申请异样不会事件冒泡，因而必须在捕捉阶段将其捕捉到才行，然而这种形式尽管能够捕捉到网络申请的异样，然而无奈判断 HTTP 的状态是 404 还是其余比方 500 等等，所以还须要配合服务端日志才进行排查剖析才能够。

5.3 Promise 异样

Promise 中的异样不能被 try-catch 和 window.onerror 捕捉，这时候咱们就须要监听 unhandledrejection 来帮咱们捕捉这部分谬误。

window.addEventListener("unhandledrejection", function (e) {e.preventDefault();
  console.log("捕捉到 promise 谬误了");
  console.log("谬误的起因是", e.reason);
  console.log("Promise 对象是", e.promise);
  return true;
});

Promise.reject("promise error");
new Promise((resolve, reject) => {reject("promise error");
});
new Promise((resolve) => {resolve();
}).then(() => {throw "promise error";});

5.4 React 异样

React 解决异样的形式不同。尽管 try-catch 实用于许多非一般 JavaScript 应用程序，但它只实用于命令式代码。因为 React 组件是申明性的，所以 try-catch 不是一个牢靠的选项。为了补救这一点，React 实现了所谓的谬误边界。谬误边界是 React 组件，它“捕捉子组件树中的任何中央的 JavaScript 谬误”，同时还记录谬误并显示回退用户界面。

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

  componentDidCatch(error, info) {
    // 展现出错的 UI
    this.setState({hasError: true});
    // 将错误信息上报到日志服务器
    logErrorToMyService(error, info);
  }

  render() {if (this.state.hasError) {
      // 能够展现自定义的谬误款式
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

然而须要留神的是，error boundaries 并不会捕获上面这些谬误：

  • 事件处理器
  • 异步代码
  • 服务端的渲染代码
  • 在 error boundaries 区域内的谬误

咱们能够这样应用 ErrorBoundary：

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary

5.5 Vue 异样 

Vue.config.errorHandler = (err, vm, info) => {console.error("通过 vue errorHandler 捕捉的谬误");
  console.error(err);
  console.error(vm);
  console.error(info);
};

5.6 申请异样

以最罕用的 HTTP 申请库 axios 为例，模仿接口响应 401 的状况：

// 申请
axios.get(/api/test/401")
// 后果
Uncaught (in promise) Error: Request failed with status code 401
at createError (axios.js:1207)
at settle (axios.js:1177)
at XMLHttpRequest.handleLoad (axios.js:1037)

能够看进去 axios 的异样能够当做 Promise 异样来解决：

// 申请
axios.get("http://localhost:3000/api/uitest/sentry/401")
.then(data => console.log('接口申请胜利', data))
.catch(e => console.log('接口申请出错', e));
// 后果
接口申请出错 Error: Request failed with status code 401
at createError (createError.js:17)
at settle (settle.js:18)
at XMLHttpRequest.handleLoad (xhr.js:62)

个别接口 401 就代表用户未登录，就须要跳转到登录页，让用户进行从新登录，但如果每个申请办法都须要写一遍跳转登录页的逻辑就很麻烦了，这时候就会思考应用 axios 的拦截器来做对立梳理，同理能对立解决的异样也能够在放在拦截器里解决。

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
  },
  function (error) {if (error.response.status === 401) {goLogin(); // 跳转登录页
    } else if (error.response.status === 502) {alert(error.response.data.message || "系统升级中，请稍后重试");
    }
    return Promise.reject(error.response);
  }
);

5.7 总结

异样一共七大类，解决时需分清是致命谬误还是非致命谬误。

  • 可疑区域减少 try-catch
  • 全局监控 JS 异样 window.onerror
  • 全局监控动态资源异样 window.addEventListener
  • 捕捉没有 catch 的 Promise 异样用 unhandledrejection
  • Vue errorHandler 和 React componentDidCatch
  • Axios 申请对立异样解决用拦截器 interceptors
  • 应用日志监控服务收集用户错误信息

六、异样上报

即便咱们前端开发实现后，会有一系列的 Web 利用的上线前的验证，如自测、QA 测试、code review 等，以确保利用能在生产上没有事变。

然而大失所望，很多时候咱们都会接到客户反馈的一些线上问题，这些问题有时候可能是你本人代码的问题。这样的问题个别可能在测试环境重现，咱们很快的能定位到问题要害地位。然而，很多时候有一些问题，咱们在测试中并未发现，可是在线上却有局部人呈现了，问题确确实实存在的，这个时候咱们测试环境又不能重现，还有一些偶现的生产的偶现问题，这些问题都很难定位到问题的起因，让咱们前端工程师头疼不已。

而咱们不可能每次都近程给用户解决问题，或者让用户按 F12 关上浏览器控制台把错误信息截图给咱们吧。这时候，咱们不得不借助一些工具来解决这一系列令人头疼的问题。

前端谬误监控日志零碎就利用而生。以后端代码在生产运行中呈现谬误的时候，第一工夫传递给监控零碎，从而第一工夫定位并且解决问题。

有很多成熟的计划可供选择：ARMS、fundebug、BadJS、Sentry。政采云以后应用的是 Sentry 的开源版本，并联合业务进行一些革新：

  • 与构建零碎联合，构建我的项目时主动生成 Sentry 我的项目，注入 Sentry 脚本
  • 客服端注入 Sentry 客户端脚本后，按我的项目、页面等不同粒度配置告警事件的过滤规定
  • 对接钉钉音讯零碎，将告警音讯推送到订阅群
  • 过滤接口谬误和优化 Promise 谬误上报信息

后续也能够单开一篇介绍介绍，如何联合开源的谬误监控零碎，搭建具备公司特色的监控体系。

举荐浏览

动静表单之表单组件的插件式加载计划

编写高质量可保护的代码：优雅命名

招贤纳士

政采云前端团队（ZooTeam），一个年老富裕激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 40 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员形成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端利用、数据分析及可视化等方向进行技术摸索和实战，推动并落地了一系列的外部技术产品，继续摸索前端技术体系的新边界。

如果你想扭转始终被事折腾，心愿开始能折腾事；如果你想扭转始终被告诫须要多些想法，却无从破局；如果你想扭转你有能力去做成那个后果，却不须要你；如果你想扭转你想做成的事须要一个团队去撑持，但没你带人的地位；如果你想扭转既定的节奏，将会是“5 年工作工夫 3 年工作教训”；如果你想扭转原本悟性不错，但总是有那一层窗户纸的含糊… 如果你置信置信的力量，置信平凡人能成就不凡事，置信能遇到更好的本人。如果你心愿参加到随着业务腾飞的过程，亲手推动一个有着深刻的业务了解、欠缺的技术体系、技术发明价值、影响力外溢的前端团队的成长历程，我感觉咱们该聊聊。任何工夫，等着你写点什么，发给 ZooTeam@cai-inc.com

退出移动版