基于nuxt ssr页面的监控数据

页面方式

1、ssr.enter：空白窗口打开页面（如浏览器打开：https://www.ctyun.cn/qzdh/b，在https://www.ctyun.cn/qzdh/点击链接选择在新窗口打开）

2、ssr.forward：在已经打开的页面点击链接在本窗口打开页面（在https://www.ctyun.cn/qzdh/，点击页面链接进入https://www.ctyun.cn/qzdh/b）

3、blank：在已有历史记录的浏览器窗口点击前进或者后退，进入页面（https://www.ctyun.cn/qzdh/b）

判断打开方式

在plugin中添加app.client，将vue的beforeEach

router.beforeEach((to, from, next) => {
    const { protocol, hostname, port } = window.location;
    const origin = window.location.origin || `${protocol}//${hostname}${port ? `:${port}` : ''}`;
    const referer = from.name ? `${origin}${from.fullPath}` : (document.referrer || window.txydWebViewReferer || '');
    const current = to.name ? `${origin}${to.fullPath}` : location.href;
    routeInfo.to = to;
    routeInfo.from = from;
    routeInfo.referer = referer;
    routeInfo.current = current;
    routeInfo.pageId = to.path;
    routeInfo.pageName = to.path;
    routeInfo.pageQuery = to.query;
    console.error('routeInfo', routeInfo)
    
    routeRecords.push({
      ...routeInfo
    })
    next();
  });

判断页面进入类型

/**
 * 获取路由类型
 * @param  {Object} to   目标路由对象
 * @param  {Object} from 来源路由对象
 * @return {String} 路由类型：enter、forward
 */

function getRouteType(to, from) {
  const isEnter = to.name && !from.name;
  // const isSpa = typeof $('html').data('n-head-ssr') === 'undefined';
  const isSpa = false
  const prefix = isSpa ? 'spa':'ssr'
  // 空白窗口页面
  if (isEnter) {
    return `${prefix}.enter`
  }
  // 点击浏览器后退哥前进
  let hasRecord = !!routeRecords.slice(0,-1).find(record => record.to.fullPath === to.fullPath) 
  return hasRecord ? '' : `${prefix}.forward`;
}

 白屏时间，取first-paint的值

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(
      `The time to ${entry.name} was ${entry.startTime} milliseconds.`
    );
    // Logs "The time to first-paint was 386.7999999523163 milliseconds."
    // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
  });
});

observer.observe({ type: "paint", buffered: true });