Molog:使用 Serverless 搭建的前端错误日志及事件收集系统

原创 2017年12月15日 00:00:00


最近在交接项目,也因此有了一些时间。之前想过做一个前端的错误日志系统,便想着直接用 Serverlss 做了好了。

开始之前先让我简单地介绍一下:https://github.com/phodal/molog,以便于了解我们的需求及功能。

Molog 使用

先让我们看看最后要怎么用,在网页上引入:

  1. <script data-component="homepage" data-env="dev" src="//static.pho.im/molog.min.js"></script>

顾名思义,其中的 component 针对的不是不同组件的名字,而 env 便是具体的环境。

前端的代码是基于 sherlog.js,因此在事件上也是差不多的:

  1. Molog.push({field: 'xxx', action:' '}, function() { })

Serverless 错误收集系统架构设计

在之前的文章中,我们讨论过错误日志收集是一个很好的 Serverless 应用使用场景。

架构设计

事实上,这样的系统很简单:


640?wx_fmt=png&wxfrom=5&wx_lazy=1系统架构图


1.前端通过 window.onerror 来捕获错误日志

  1. window.onerror = function(message, source, lineno, colno, error) {

  2. ...

  3. }

  1. 然后将错误日志发给 AWS Lambda 来处理

  2. AWS Lambda 将数据存储到 AWS DynamoDB 数据库里

  3. 当用户打开后台时,从 AWS DynamoDB 获取相应的数据

  4. 前端的静态文件,通过 S3 + Cloudfront 作为 CDN 来分发前端资源

Molog 系统实现

1. 存储日志和事件

要在 AWS 上实际这样的系统,就便得很简单了。我们只需要存储一下这些数据即可,相关的存储逻辑如下所示:

  1.  const params = {

  2.    TableName: process.env.DYNAMODB_TABLE,

  3.    Item: {

  4.      id: uuid.v1(),

  5.      data: JSON.stringify(event.queryStringParameters),

  6.      env: env,

  7.      component: component,

  8.      createdAt: timestamp

  9.    },

  10.  };

这里的 env 和 component 是在 script 标签中遍历解析出来的:

  1. env: function() {

  2.  var s = doc.getElementsByTagName('script')

  3.    , env;

  4.  for( var i = 0, l = s.length; i < l; i++) {

  5.    if (s[i].src.indexOf('molog') > -1) {

  6.      env = s[i].getAttribute('data-env');

  7.      break;

  8.    }

  9.  }

  10.  this.env = env || '';

  11. }

然后,再将这个 URL 放置到 POST 的 URL 中,即 serverless.yml 的配置文件中:

  1. functions:

  2.  create:

  3.    handler: create/index.handler

  4.    events:

  5.      - http:

  6.          path: /{component}/{env}/

  7.          method: get

  8.          cors: true

从 URL 中获取这些相关的参数

2. 读取日志

有了上面的基础,有读取日志也很简单,首先配置好 URL:

  1.  list:

  2.    handler: list/index.list

  3.    events:

  4.      - http:

  5.          path: /{component}/{env}/logs

  6.          method: get

  7.          cors: true

然后从数据库中获取这些结果:

  1.  const params = {

  2.    TableName: process.env.DYNAMODB_TABLE,

  3.    FilterExpression: 'env = :env and component = :component',

  4.    ExpressionAttributeValues: {

  5.      ':env': env,

  6.      ':component': component,

  7.    }

  8.  };

  9.  dynamoDb.scan(params, (error, result) => {

  10.    const response = {

  11.      statusCode: 200,

  12.      headers: {

  13.        "Access-Control-Allow-Origin" : "*" // Required for CORS support to work

  14.      },

  15.      body: JSON.stringify(result.Items),

  16.    };

  17.    callback(null, response);

  18.  });

这样就可以得到相关的日志了。

问题

就这么简单,发现由于 CloudFront 在国内有点水土不服,并且提供压缩的功能,导致加载速度有点慢。

0?wx_fmt=jpeg


版权声明:本文为博主原创文章,未经博主允许不得转载。

使用开源软件sentry来收集日志

http://luxuryzh.iteye.com/blog/1980364       对于一个已经上线的系统,存在未知的bug或者运行时发生异常是很常见的事情,随之而来的几点需求产生了:  ...
  • scdxmoe
  • scdxmoe
  • 2016年12月09日 15:20
  • 1513

钱柜娱乐开户 app崩溃日志收集以及上传

源码获取请到github:https://github.com/DrJia/钱柜娱乐开户LogCollector 已经做成sdk的形式,源码已公开,源码看不懂的请自行google。 如果...
  • jiabinjlu
  • jiabinjlu
  • 2014年08月15日 20:40
  • 26314

APP系统报错日志反馈机制设计

APP日志调取与服务器的交互设计APP日志调取接口设计接口约定接口返回说明 参数 参数类型 说明 code Integer 含义类似http协议返回码,200代表成功 mes...
  • RuihanChen
  • RuihanChen
  • 2016年04月12日 15:16
  • 3054

windows安全日志事件ID4625错误

  • 2014年05月06日 14:53
  • 19KB
  • 下载

清除系统事件日志工具。

  • 2006年03月16日 00:00
  • 28KB
  • 下载

EventLog系统事件日志 查看工具下载

  • 2014年12月15日 12:18
  • 863B
  • 下载

EventLog,输出到系统事件日志

  • 2011年12月15日 14:29
  • 30KB
  • 下载

读写Windows系统事件日志.rar

  • 2010年07月01日 13:04
  • 39KB
  • 下载

错误日志收集

  • 2016年08月02日 23:33
  • 23.74MB
  • 下载

安卓错误日志收集

  • 2016年10月25日 21:22
  • 228KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Molog:使用 Serverless 搭建的前端错误日志及事件收集系统
举报原因:
原因补充:

(最多只允许输入30个字)