导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

针对性攻坚(TODO)

工作流程相关

产品开发标准流程

前端监控怎么做

1. 监听 Vue.config.errorHandler
2. 监听error事件
3. 监听unhandledrejection事件，捕获promise的报错
4. 开源框架：Sentry - 实时错误监控的项目

import Vue from 'vue'
import * as api from '@/api/index'

Vue.config.errorHandler = (err) => {
  console.error(err)
  const {
    message, // 异常信息
    name, // 异常名称
    script, // 异常脚本url
    line, // 异常行号
    column, // 异常列号
    stack // 异常堆栈信息
  } = err
  // 错误上报到收集报错的平台
  captureError({
    name, errorMessage: message, scriptURI: script, lineNo: line, columnNo: column, error: stack
  })
}

window.addEventListener('error', function (errorMessage, scriptURI, lineNo, columnNo, error) {
  captureError({
    errorMessage, scriptURI, lineNo, columnNo, error
  })
})

window.addEventListener('unhandledrejection', function (errorMessage, scriptURI, lineNo, columnNo, error) {
  captureError({
    errorMessage, scriptURI, lineNo, columnNo, error
  })
})

function captureError (err) {
  const type = err.name || 'noType'
  const message = err.errorMessage || 'noMessage'
  const stack = err.error ? JSON.stringify(err.error) : 'noStack'
  api.postH5({
    key: 'qqRedPacketMallError',
    eventId: type,
    eventName: message,
    eventContent: stack
  })
}

由于这边对错误上报需要比较及时，所以没有做合并上报，需要的同学可以了解一下 navigator.sendBeacon

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

TODO

0到1搭建前端监控平台 - 柯基与佩奇 - 博客园

juejin.cn

Sentry的原理以及自定义上报的使用方式

juejin.cn

前端监控体系及实现技术详解

NodeJS中使用winston做日志记录真的太好用辣