可观测性网站之Session的生命周期

本文会列出session的属性值、统计指标，重点讲解session几个字段值，虽然从代码中看出的考虑策略，session和view、app均有关联，但本文仅从代码层面对session的创建、更新、过期的逻辑进行讲解，其中会把关键的变量值也会列出来。

定义：

用户会话信息记录，当前会话中，将会基于会话维度用户页面、资源、操作、错误、长任务相关访问数据。 下面简单列出session有哪些属性，仅供参考。

属性

统计指标

session部分逻辑

并不是所有字段都有值得讲解，比如session_has_replay这个字段代表是否有会话是否有录制。今天只针对session的生命周期进行讲解。

id的生成

这个简单，首先这个要从startSessionStore,其中session要从cookie中获取，如果没有就需要创建，创建或更新的这部分逻辑如下：

function expandOrRenewCookie(cookieSession) {
    var sessionState = computeSessionState(cookieSession[productKey])
    var trackingType = sessionState.trackingType
    var isTracked = sessionState.isTracked
    cookieSession[productKey] = trackingType
    if (isTracked && !cookieSession.id) {
      cookieSession.id = UUID()
      cookieSession.created = String(dateNow())
    }
    return isTracked
  }

上面需要注意一点，这里的cookie值是_dataflulx_usr_id,如何查看当前的cookie值呢，一般可以通过document.cookie进行获取，简单的查看方式便是f12打开控制台，在application中查看，如下图所示。

在上图中，我们除了能看到当前的cookie的value，还有比较重要的内容：

• domain
• 过期时间
• 大小

获取cookie

有关如何获取cookie，这里实现的逻辑是调用

name

document.cookie,name

findCommanSeparatedValue是利用正则进行获取，代码如下：

export function findCommaSeparatedValue(rawString, name) {
  var matches = rawString.match('(?:^|;)\\s*' + name + '\\s*=\\s*([^;]+)')
  return matches ? matches[1] : undefined
}

创建cookie的值

接着上面的逻辑，如果是首次进入，需要创建和设置cookie，我们先看创建的代码：

cookieSession.id = UUID()

UUID这个方法实现也比较简单，是通过Math.random后最后转换成16进制，可以看下面代码：

export function UUID(placeholder) {
  return placeholder
    ? // eslint-disable-next-line  no-bitwise
      (
        parseInt(placeholder, 10) ^
        ((Math.random() * 16) >> (parseInt(placeholder, 10) / 4))
      ).toString(16)
    : `${1e7}-${1e3}-${4e3}-${8e3}-${1e11}`.replace(/[018]/g, UUID)
}

但是我们需要注意，还有几个其他相关属性很重要

export var SESSION_TIME_OUT_DELAY = 4 * ONE_HOUR
export var SESSION_EXPIRATION_DELAY = 15 * ONE_MINUTE

这里SESSION_TIME_OUT_DELAY用于设定最大时长，也就是说4个小时；SESSION_EXPIRATION_DELAY用于判断是否过期，这里是15分钟。

说到时间，就需要知道cookieSession创建时，还有一个比较重要的参数，上面两个变量便是依据这个参数进行的对比，这个参数是：cookieSession.created：

cookieSession.created = String(dateNow())

目测是本地时间，但是得看一下源码 import { dateNow, UUID, throttle } from '../helper/tools' dataNow也来自helper/tools中，其中代码是这样写的：

export function dateNow() {

  return new Date().getTime()
}

看代码采用的是new Date()，也就是客户端的时间，在上面两个相对的时间后，就会执行相关session的更新或者创建。所以对于session的判断也有必要讲一讲，这里使用的函数是根据hasSessionInCache的返回值真假来判断 return sessionCache[productKey] !== undefined，如果存在，还需要判断是否过期（isSessionInCacheOutdated），这里判断条件除了id外还有另外一个值

function isSessionInCacheOutdated(cookieSession) {
    return (
      sessionCache.id !== cookieSession.id ||
      sessionCache[productKey] !== cookieSession[productKey]
    )
  }

假设返回为假，则需要session过期（expireSession）：

function expireSession() {
    sessionCache = {}
    expireObservable.notify()
  }

检查session

因为session的特殊性，所以不能频繁更新和检查session，所以应该有性能上的节流。 expandOrRenewSession: throttle(expandOrRenewSession, COOKIE_ACCESS_DELAY) .throttled, 目前软件的节流时间是export var COOKIE_ACCESS_DELAY = ONE_SECOND 节流函数比较简单，就不做介绍了。 其中还有最后一项，就是session是否在有效期内（isActiveSession）：

function isActiveSession(session) {
    return (
      (session.created === undefined ||
        dateNow() - Number(session.created) < SESSION_TIME_OUT_DELAY) &&
      (session.expire === undefined || dateNow() < Number(session.expire))
    )
  }

session的过期

SESSION_TIME_OUT_DELAY就是上面提到的比较重要的属性值，目前是 export var SESSION_TIME_OUT_DELAY = 4 * ONE_HOUR 有关session是否还要持久化的方法（persistSession）

export function persistSession(session, options) {
  if (isExpiredState(session)) {
    clearSession(options)
    return
  }
  session.expire = String(dateNow() + SESSION_EXPIRATION_DELAY)
  setSession(session, options)
}

SESSION_EXPIRATION_DELAY就是上面提到的比较重要的属性值，目前是15分钟。

有关用户是否活动，是通过事件监听dom是否出现VISIBILITY_CHANGE来判断。

var _addEventListener= addEventListener(document, DOM_EVENT.VISIBILITY_CHANGE, expandSessionWhenVisible)

总结

本文介绍了session的属性和常见统计指标，单独把session的id的创建、更新、获取逻辑以及过期时间的逻辑都做了讲解，希望能对读者有所启发。