如何追踪线上错误-阿里云开发者社区

如何追踪线上错误

2022-07-21 149

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 如何追踪线上错误

前情提要

这个问题从我接手的第一个项目开始就遇到过这个问题，那时候还是在游戏组实习，就听隔壁前端组的大喊大叫，为什么有用户反应又出了什么什么问题，怎么又又用不了了。

程序员小哥很淡定的说：“用户用什么浏览器？怎么重现？”。

这个问题对于程序员来说是比较常见的，可能潜意识里面很难理解，竟然有用户不知道自己用的是什么浏览器。然后客服就去沟通用户。

用户反馈：“啊，不就是手机自带的浏览器！”

程序员：“他用什么手机？什么版本，安卓还是ios，安卓版本多少？发生错误之前都做了什么操作？”

客服：“？” 用户：“？”

有趣的是，这个问题来来回回沟通了两三天时间，最后因为用户用的手机是安卓版本较低的，我们公司找不到重现的机子，最终最开始大喊大叫的经理说，“等找到重现手机再说吧，反正也只有这一个用户遇到这个问题”。

后来如何，我想大家都很清楚了。只要是“等以后在做，后续优化”，那基本上这个需求就是被毙了。

那时候我就在想，是只有那一个手机遇到问题，还是那一系列手机都有问题？只有这一个用户遇到这个问题，是真的只有他遇到问题，还是只有他反馈问题呢？其实做开发的，收到正反馈的机会，会比收到负反馈的机会要少的多。有没有什么方式，能够自动记录下来所有用户遇到的问题呢？然后把程序员需要的数据正确反馈上来？

回到我们的问题上，如何追踪线上的错误？那你知不知道如何追踪本地错误呢？（在不打开控制台，没有 debug 的时候。）

如何捕获程序错误？

如何捕获js原生错误？

这个算是基本的js的操作了，其实就是监听 window.onerror。

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    window.onerror = function (message, source, lineno, colno, exception) {
      console.log(message);
      console.log(source);
      console.log(lineno);
      console.log(colno);
      console.log(exception);
    }
  </script>
  <script>
    var a -1;
  </script>
</head>
<body>
</body>
</html>

打开控制台你将看到这样的打印信息。

Uncaught SyntaxError: Unexpected token '-' 
file:///Users/xiaohuoni/blog/blog/index.html
15
11
SyntaxError: Unexpected token '-'

出了常见的语法错误，js 中还提供了一个事件 - onunhandledrejection - 当Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件；

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    window.onerror = function (message, source, lineno, colno, exception) {
      console.log(message);
      console.log(source);
      console.log(lineno);
      console.log(colno);
      console.log(exception);
    }
    window.onunhandledrejection = event => {
      console.warn(`UNHANDLED PROMISE REJECTION: ${JSON.stringify(event.reason)}`);
      event.preventDefault();
    };
  </script>
  <script>
    function myExecutorFunc(resolutionFunc, rejectionFunc) {
      rejectionFunc(777);
    }
    var myPromise = new Promise(myExecutorFunc);
  </script>
</head>
<body>
</body>
</html>

要消除上述的错误，仅仅需要 var myPromise = new Promise(myExecutorFunc).then().catch((data) => console.log(data))

上面的方法就可以帮我们正确的捕获到原生的 js 错误了。我们只需要把收到的数据，通过接口调用发送到远程服务器就可以在后台查看数据了。

如何捕获 react 中的错误

部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。

以下引用下官网的例子就能明白了。

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; 
  }
}

我们可以在这里将错误日志上报给服务器。这样我们就完成了错误日志收集服务的前端开发了。希望对想自己搭建错误日志平台的朋友有所帮助。

如何捕获线上的错误

当然如果你没有自己的服务器，或者只是一个小项目，不想耗费这么大的经历去实现这个平台，现在社区上也有很多开源的平台可以选择，这里推荐一个 sentry。他的后台是免费的，提供非常多的跨平台接入方式，包括 js、React、React Native 和原生应用等97个不同的平台。

如果是 umi 项目的话，可以直接使用插件 @alitajs/sentry。

安装之后增加配置

import { defineConfig } from 'umi';
export default defineConfig({
  plugins: ['@alitajs/sentry'],
  sentry: {
    dsn: '可以访问 https://sentry.io/ 免费申请，记得选 react 项目类型',
  },
});