前端埋点统计和错误监控 ​

// 1.加载配置 2.监控代码注入
function init(options) {
  loadConfig(options) // 加载配置
}

/**
 * 重写pushState和replaceState方法
 * @param {*} name
 * @returns
 */
const createHistoryEvent = function (name) {
  // 拿到原来的处理方法
  const origin = window.history[name]
  return function (event) {
    if (name === 'replaceState') {
      const { current } = event
      const pathName = location.pathname
      if (current === pathName) {
        let res = origin.apply(this, arguments)
        return res
      }
    }

    let res = origin.apply(this, arguments)
    let e = new Event(name)
    e.arguments = arguments
    window.dispatchEvent(e)
    return res
  }
}

window.history.pushState = createHistoryEvent('pushState')
window.history.replaceState = createHistoryEvent('replaceState')

function listener() {
  const stayTime = getStayTime() // 停留时间
  const currentPage = window.location.href // 页面路径
  lazyReport('visit', {
    stayTime,
    page: beforePage,
  })
  beforePage = currentPage
}

// history.go()、history.back()、history.forward() 监听
window.addEventListener('popstate', function () {
  listener()
})

// history.pushState
window.addEventListener('pushState', function () {
  listener()
})

// history.replaceState
window.addEventListener('replaceState', function () {
  listener()
})

export function hashPageTrackerReport() {
  let beforeTime = Date.now() // 进入页面的时间
  let beforePage = '' // 上一个页面

  // 上报
  function listener() {
    const stayTime = getStayTime()
    const currentPage = window.location.href
    lazyReport('visit', {
      stayTime,
      page: beforePage,
    })
    beforePage = currentPage
  }

  // hash路由监听
  window.addEventListener('hashchange', function () {
    listener()
  })
}

/**
 * 初始化配置
 * @param {*} options
 */
function init(options) {
  ... // 加载配置
  report('user', '加载应用'); // uv统计
}

* 上报
 * @param {*} type
 * @param {*} params
 */
export function report(type, params) {
  const appId = window['_monitor_app_id_'];
  const userId = window['_monitor_user_id_'];
  const url = window['_monitor_report_url_'];

  const logParams = {
    appId, // 项目的appId
    userId,
    type, // error/action/visit/user
    data: params, // 上报的数据
    currentTime: new Date().getTime(), // 时间戳
    currentPage: window.location.href, // 当前页面
    ua: navigator.userAgent, // ua信息
  };

  let logParamsString = JSON.stringify(logParams);

  if (navigator.sendBeacon) { // 支持sendBeacon的浏览器
    navigator.sendBeacon(url, logParamsString);
  } else { // 不支持sendBeacon的浏览器
    let oImage = new Image();
    oImage.src = `${url}?logs=${logParamsString}`;
  }
}

// cache.js
const cache = []

export function getCache() {
  return cache
}

export function addCache(data) {
  cache.push(data)
}

// lazyReport.js
export function lazyReport(type, params) {
  // ....
  const data = getCache()

  if (delay === 0) {
    // delay=0相当于不做延迟上报
    report(data)
    return
  }

  if (data.length > 10) {
    // 数据达到10条上报
    report(data)
    clearTimeout(timer)
    return
  }

  clearTimeout(timer)
  timer = setTimeout(() => {
    // 合并上报
    report(data)
  }, delay)
}

try {
  let name = 'heima; // 少一个单引号
  console.log(name);
} catch (error) {
  console.log('----捕获到了语法错误-----');
}

try {
  const name = 'heima'
  console.log(nam)
} catch (error) {
  console.log('------同步错误-------')
}

try {
  setTimeout(() => {
    undefined.map()
  }, 0)
} catch (error) {
  console.log('-----异步错误-----')
}

window.addEventListener(
  'unhandledrejection',
  function (error) {
    console.log('捕获到异常：', error)
  },
  true,
)

window.addEventListener(
  'error',
  (error) => {
    console.log(error)
  },
  true,
)