Blog

Blog

PHODAL

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

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

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

Molog 使用

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

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

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

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

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

Serverless 错误收集系统架构设计

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

架构设计

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

系统架构图

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

window.onerror = function(message, source, lineno, colno, error) {
 ... 
}
  1. 然后将错误日志发给 AWS Lambda 来处理

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

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

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

Molog 系统实现

1. 存储日志和事件

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

  const params = {
    TableName: process.env.DYNAMODB_TABLE,
    Item: {
      id: uuid.v1(),
      data: JSON.stringify(event.queryStringParameters),
      env: env,
      component: component,
      createdAt: timestamp
    },
  };

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

env: function() {
  var s = doc.getElementsByTagName('script')
    , env;
  for( var i = 0, l = s.length; i < l; i++) {
    if (s[i].src.indexOf('molog') > -1) {
      env = s[i].getAttribute('data-env');
      break;
    }
  }
  this.env = env || '';
}

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

functions:
  create:
    handler: create/index.handler
    events:
      - http:
          path: /{component}/{env}/
          method: get
          cors: true

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

2. 读取日志

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

  list:
    handler: list/index.list
    events:
      - http:
          path: /{component}/{env}/logs
          method: get
          cors: true

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

  const params = {
    TableName: process.env.DYNAMODB_TABLE,
    FilterExpression: 'env = :env and component = :component',
    ExpressionAttributeValues: {
      ':env': env,
      ':component': component,
    }
  };
  dynamoDb.scan(params, (error, result) => {

    const response = {
      statusCode: 200,
      headers: {
        "Access-Control-Allow-Origin" : "*" // Required for CORS support to work
      },
      body: JSON.stringify(result.Items),
    };
    callback(null, response);
  });

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

问题

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

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签