前端性能监控

window.performance.timing 获取各种时间

window.performance.timing = {
  navigationStart: 1657100460006
  // redirect
  redirectStart: 0
  unloadEventStart: 1657100460069
  redirectEnd: 0
  unloadEventEnd: 1657100460069
  // APP CACHE
  fetchStart: 1657100460039
  // DNS
  domainLookupStart: 1657100460039
  domainLookupEnd: 1657100460039
  // TCP
  connectStart: 1657100460039
  secureConnectionStart: 0
  connectEnd: 1657100460039
  // REQ RES
  requestStart: 1657100460042
  responseStart: 1657100460053
  responseEnd: 1657100460056
  // DOMContentLoaded
  domLoading: 1657100461708
  domInteractive: 1657100461778
  domContentLoadedEventStart: 1657100461778
  domContentLoadedEventEnd: 1657100461778
  domComplete: 1657100461841
  // LOAD
  loadEventStart: 1657100461841
  loadEventEnd: 1657100461841
}

加载顺序

• domLoading - fetchStart：index.html响应的时间（用它的大小来算网速？）
• domLoading - navigationStart：index.html响应的时间（含 DNS 解析）

const HTML_LOAD_TIME = 30;
const FIRST_SCREEN_LOAD_TIME = 1000;
const offset = FIRST_SCREEN_LOADING_TIME / HTML_LOADING_TIME

var duration = performance.timing.domLoading - performance.timing.fetchStart;
var loadingTime = duration * offset; // 开屏动画时间

参考： https://blog.csdn.net/wang_yu_shun/article/details/110790205、http://www.alloyteam.com/2020/01/14184/

监控工具 sentry

搭建方式参考 https://zhuanlan.zhihu.com/p/210765546

sentry for react

npm install @sentry/react @sentry/tracing

import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import App from "./App";

Sentry.init({
  // c4e5aad16fc942bbaec0dd3ef3903a72由每个项目唯一生成。localhost:9000/5对应的是sentry的dns地址。
  dsn: "http://c4e5aad16fc942bbaec0dd3ef3903a72@localhost:9000/5",
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

ReactDOM.render(<App />, document.getElementById("root"));

优化由于压缩打包造成的错误日志难以阅读：

npm install --save-dev @sentry/webpack-plugin

// .sentryclirc
[defaults]
project=react-test         // 生成sentry sdk的时候建立的名字
org=sentry                 // 后台 Settings - Organization Settings - GENERAL 处查看
url=http://localhost:9000  // sentry的后台地址

[auth] // 由后台生成 Auth Tokens
token=851d20d9e7e943b191df663643d13f89d8fb6c2d12584c729d0e29f831ec1fd1

// webpack.config.js
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
...
  configureWebpack: {
    plugins: [
      new SentryWebpackPlugin({
        include: ".",
        ignore: ["node_modules", "webpack.config.js"],
        configFile: "sentry.properties", // 默认为根目录下的 .sentryclirc
      }),
    ],
  },
  output:{
     filename:"[name].js",
     path:path.resolve(__dirname, 'dist/'),
     sourceMapFilename: "[name].js.map"
  },
  devtool: 'hidden-source-map',

但是，hidden-source-map的官方解释是： 与 source-map 相同，但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。

另一个工具TraceKit

参考：https://www.yuque.com/docs/share/799e3059-ce31-420b-b78d-b6d1c65d0527

它可以支持到 IE6，轻量级工具，仅格式化，不包含上报，上报需要自己搞（比如使用 requestIdleCallback 浏览器空闲回调）