天眼+iLog实现端到端全链路监控

一、背景

前后端一般通过请求进行交互,当服务出现异常时,开发人员就需要回溯当时所有操作,进行异常分析与定位。

单点监控会导致前后端数据无法串联,无法完整回溯所有行为,定位问题成本较高。

引入端到端全链路监控解决以上问题( 天眼+iLog )

二、端到端全链路监控工作流程

天眼&iLog

三、集成步骤

1.iLog组件配置(ilog需要1.2版本及以上)
$config => [
    'iLog' => [
        ...
        'logIdFlag' => 'x-logid',
        'customRequestParams' => ['x-tenant-code', 'x-uid', 'x-client-version', 'x-deviceid']
    ]
]
  将'log_id'字段添加到索引列表中
2.应用前端集成天眼探针
3.探针注入业务租户、用户信息
  • 手动调用探针registUser方式注入
// 可以用户在登录后进行注册
login().then(() => {
  // 使用天眼平台创建的探针对象为 __myWebLogTracker__,手动创建的探针对象调用相应的对象即可
  window.__myWebLogTracker__ && window.__myWebLogTracker__.registUser({
    tenant_code: 'mysoft',
    user_account: 'zhangsan',
    user_group: '管理员'
  });
});
  • 真实用户信息读取配置-探针手动初始化
// 创建探针
const tracker = myWebLogTracker && myWebLogTracker({
  product_code: '产品编码XXX',
  app_code: '应用编码XXX',
  // 将在url的search部分搜索key为tenant的取值作为日志中的tenant字段上报
  tenant_code_query: { key: 'tenant', range: ['url'] },
  // 将按照cookie、url的顺序 查找key为account的取值作为日志中的real_user_id字段上报
  user_account_query: { key: 'account', range: ['cookie', 'url'] },
  // 将按照url、cookie的顺序 查找key为role的取值作为日志中的user_group字段上报
  user_group_query: { key: 'role', range: ['url', 'cookie'] }
});
  • 真实用户信息读取配置-探针在线配置

4.开启探针全链路配置

开启全链路配置后,探针会根据指定【域名】对使用Fetch或XHR方式发送请求的API【增加】指定的【请求头】,探针生成的全局唯一TraceID为固定请求头内容,同时也可【自定义请求头】发送【探针内置数据】或【自定义数据】

工作流程: 校验是否采集API事件 -> 校验API是否被忽略 -> 校验API域名是否与配置匹配 -> 添加自定义头 -> 发送请求

  • 探针手动初始化配置
    // 创建探针
    const tracker = myWebLogTracker && myWebLogTracker({
    product_code: '产品编码XXX',
    app_code: '应用编码XXX',
    trace_config: {
      rules: ['fast.mypaas.com.cn'],
      headers: [{
        name: 'x-log-id',  // 请求头名称
        type: 'built-in',         // 请求头类型
        value: 'tid'              // 请求头取值
      }, {
        name: 'x-tenant-code',
        type: 'static',
        value: 'mysoft'
      }]
    },
    });
    
  • 探针在线配置
5.确认是否存在跨域请求

Hybrid App发送请求均为跨域请求

使用默认Webview时是否存在异常请求 使用默认MWKWebview插件时是否存在异常请求

跨域情况下,响应头设置Access-Control-Allow-Headers :x-logid,x-tenant-code,x-uid,x-client-version,x-deviceid

跨域请求不设置Access-Control-Allow-Headers, 浏览器厂商会根据W3C CORS标准对请求进行拦截,导致请求失败,引发应用功能异常。

不同浏览器客户端对cros行为作出的反应不一致,尤其是APP端(Hybrid App)在开启全链路配置时,所有API请求均为跨域请求,需检查【默认WebView】与【MWKWebView】两种场景。

关于CORS-preflight的更多可以查看以下文档

1、Access Control CORS 2、CORS-preflight fetch 3、CORS-preflight W3C

6.验证
  • 天眼验证 打开浏览器开发者工具->Network->查看请求详情->检查Request Headers是否有添加自定义头,x-logid以fast_XXX的tid发送给后端,则前端配置完成
  • iLog-验证 登陆阿里日志服务查询控制台,查看web请求日志的logid是否为fast_开头,x-tenant-code和x-uid是否有值, APP还应查看x-client-version,x-deviceid是否有值。
  • iLog-log_id加入索引设置与检查 登录阿里日志服务查询控制台,查看“查询分析属性-设置”,看log_id是否添加入索引列表中
7.注意事项
  • 前后端使用的自定义请求头关键字key值需保持一致
  • 前端无需再生成log_id,这个有天眼探针生成,否则可能会出现x-logid会有两个value值或被覆盖的现象

四、数据查询(全链路可视化即将集成)

results matching ""

    No results matching ""