import { toDisplayString as _toDisplayString, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _createVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _createVNode("p", null, [
      _createVNode("span", null, [
        _createVNode("a", null, _toDisplayString(_ctx.age), 1 /* TEXT */)
      ])
    ])
  ], 64 /* STABLE_FRAGMENT */))
}

console.log(render({name: 'jf', age: 18}));
// Check the console for the AST

import { createVNode as _createVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    (_ctx.flag)
      ? (_openBlock(), _createBlock(_Fragment, { key: 0 }, [
          _createVNode("p", null, "hello word"),
          _createVNode("span", null, _toDisplayString(_ctx.title), 1 /* TEXT */)
        ], 64 /* STABLE_FRAGMENT */))
      : (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
          _createVNode("span", null, _toDisplayString(_ctx.title), 1 /* TEXT */),
          _createVNode("p", null, "hello word")
        ], 64 /* STABLE_FRAGMENT */))
  ]))
}

console.log(render({flag: true}));
// console.log(render({flag: false}));

let domArr=document.getElementByTagName('a');
[...domArr].forEach(item=>{
    item.addEventListener('click',function(){
        location.href=this.href
    })
})

new SentryPlugin ({
    release: "production@1.0.1",//版本号  
    include: path.join(__dirname,'../dist/'), //需要上传到sentry服务器的资源目录,会自动匹配js 以及map文件
    ignore: ['node_modules'], //忽略文件目录,当然我们在inlcude中制定了文件路径,这个忽略目录可以不加
    configFile :'.sentryclirc',  
    urlPrefix : "~/"    //  线上对应的url资源的相对路径 比如我的域名是 http://XXX  .com/,静态资源都在 static文件夹里面,
})

Sentry.init({
  dsn: "http://73779960f3a74f4b893f54b81b386020@121.40.178.235:9000/2",
  release: "production@1.0.1" // 这个版本号与上一步一致
});

devtool:isDev?'eval-cheap-module-source-map' : 'nosources-source-map', // 'source-map'

Sentry.init({
  dsn: "http://xxxxx@xxx.xxx.xxx.xxx:9000/x",
  release: "production@1.0.3",
  environment: 'env_react1', // process.env.NODE_ENV 可以在Sentry->版本->环境区分
});

import React from 'react';

let func = () => {
  return 1;
};

function App() {
  return <div>
      1
      {func()}
    </div>;
}
export default App;

{ SyntaxError: E:\hjf\test\babel-app\src\App.js: Support for the experimental syntax 'jsx' isn't currently enabled 

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to en                                                able transformation.

module.exports = {
    plugins: [
        "@babel/plugin-syntax-jsx"
    ]
}

import React from 'react';
let func = () => {
  return 1;
};
function App() {
  return <div>
      1
      {func()}
    </div>;
}
export default App;

module.exports = {
+   presets: [
+       "@babel/preset-react"
+   ],
    plugins: [
        "@babel/plugin-syntax-jsx"
    ]
}

import React from 'react';

let func = () => {
  return 1;
};

function App() {
  return /*#__PURE__*/React.createElement("div", null, "1", func());
}

export default App;

import React from 'react';

let func = function () {
  return 1;
};

function App() {
  return /*#__PURE__*/React.createElement("div", null, "1", func());
}
export default App;

module.exports = {
    presets: [
        "@babel/preset-react",
+       "@babel/preset-env"
    ],
    plugins: [
        "@babel/plugin-syntax-jsx"
    ]
}

"use strict";

var func = function func() {
  return 1;
};

module.exports = {
    presets: [
        "@babel/preset-react",
        "@babel/preset-env",
+       "@babel/preset-flow",
+       "@babel/preset-typescript"
    ],
    plugins: [
        "@babel/plugin-syntax-jsx"
    ]
}

let arr = [1, 2, 4]
arr.includes(3);

"use strict";

var arr = [1, 2, 4];
arr.includes(3);

var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(k) {
                                             ^
ReferenceError: regeneratorRuntime is not defined

plugins:[
    "@babel/plugin-transform-runtime"
]

import React from 'react'
import { useSelector } from 'react-redux'

export const TodoListItem = props => {
  const todo = useSelector(state => state.todos[props.id])
  return <div>{todo.text}</div>
}

import { createSelector } from 'reselect'

const getVisibilityFilter = state => state.visibilityFilter
const getTodos = state => state.todos

export const getVisibleTodos = createSelector(
  [getVisibilityFilter, getTodos],
  (visibilityFilter, todos) => {
    switch (visibilityFilter) {
      case 'SHOW_ALL':
        return todos
      case 'SHOW_COMPLETED':
        return todos.filter(t => t.completed)
      case 'SHOW_ACTIVE':
        return todos.filter(t => !t.completed)
    }
  }
)

import React from 'react'
import { useDispatch } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const dispatch = useDispatch()

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => dispatch({ type: 'increment-counter' })}>
        Increment counter
      </button>
    </div>
  )
}

import React from 'react'
import { useStore } from 'react-redux'

export const CounterComponent = ({ value }) => {
  const store = useStore()

  // EXAMPLE ONLY! Do not do this in a real app.
  // The component will not automatically update if the store state changes
  return <div>{store.getState()}</div>
}

const path = require('path');
//HtmlWebpackPlugin自动产出HTML文件 user-agent 把浏览器的UserAgent变成一个对象
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',//入口文件
    context: process.cwd(),//上下文目录 
    mode: 'development',//开发模式
    output: {
        path: path.resolve(__dirname, 'dist'),//输出目录
        filename: 'monitor.js'//文件名
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist')//devServer静态文件根目录
    },
    plugins: [
        new HtmlWebpackPlugin({//自动打包出HTML文件的
            template: './src/index.html',
            inject: 'head'
        })
    ]
}

import './monitor/index';

import {injectJsError} from './lib/jsError';
injectJsError();

import getLastEvent from '../util/getLastEvent';
import getSelector from '../util/getSelector';
import tracker from '../util/tracker';
export function injectJsError(){
    // 监听全局未捕获的错误
    window.addEventListener('error', function(event){ // 错误实践对象
        console.log("error: ",event);
        let lastEvent = getLastEvent(); // 监听到错误之后，获取到最后一个交互事件
        // console.log("lastEvent:", lastEvent);
        // 这是一个脚本加载错误
        if (event.target && (event.target.src || event.target.href)) {
            tracker.send({//资源加载错误
                kind: 'stability',//稳定性指标
                type: 'error',//resource
                errorType: 'resourceError', // js或css资源加载错误
                filename: event.target.src || event.target.href,//加载失败的资源
                tagName: event.target.tagName,//标签名
                // timeStamp: formatTime(event.timeStamp),//时间
                selector: getSelector(event.path || event.target),//选择器
            })
        }else{
            tracker.send({
                kind: 'stability',//监控指标的大类：stability'稳定性指标
                type: 'error', // 小类型，这是一个错误
                errorType: 'jsError', //JS执行错误
                url: '', // 访问哪个路径报错了s
                message:event.message, // 报错信息
                filename: event.filename, // 哪个文件报错了
                position: `${event.lineno}:${event.colno}`,//行列号
                stack: getLines(event.error.stack), // 错误堆栈
                selector: lastEvent ? getSelector(lastEvent.path) : '', // 选择器，代表最后一个操作的元素
            });
        }        
    }, true); // true代表在捕获阶段调用,false代表在冒泡阶段捕获,使用true或false都可以 （这里是捕获阶段去出发，冒泡阶段有可能阻止冒泡就捕获不到了）
    //当Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件
    window.addEventListener('unhandledrejection', function (event) {
        console.log("unhandledrejection:",event);

        let lastEvent = getLastEvent();
        let message = '';
        let line = 0;
        let column = 0;
        let file = '';
        let stack = '';
        if (typeof event.reason === 'string') {
            message = event.reason;
        } else if (typeof event.reason === 'object') {
            message = event.reason.message;
        }
        let reason = event.reason;
        if (typeof reason === 'object') {
            if (reason.stack) {
                var matchResult = reason.stack.match(/at\s+(.+):(\d+):(\d+)/);
                if (matchResult) {
                    file = matchResult[1];
                    line = matchResult[2];
                    column = matchResult[3];
                }
                stack = getLines(reason.stack);
            }
        }
        tracker.send({//未捕获的promise错误
            kind: 'stability',//稳定性指标
            type: 'error',//jsError
            errorType: 'promiseError',//unhandledrejection
            message: message,//标签名
            filename: file,
            position: line + ':' + column,//行列
            stack,
            selector: lastEvent ? getSelector(lastEvent.path || lastEvent.target) : ''
        })
    }, true);// true代表在捕获阶段调用,false代表在冒泡阶段捕获,使用true或false都可以

    function getLines(stack){
        if (!stack) {
            return '';
        }
        return stack.split('\n').slice(1).map(item => item.replace(/^\s+at\s+/g, '')).join('^');
    }
}

let lastEvent;
// 每次在用户进行下面这些事件交互时，都会把最新的event赋值给lastEvent
['click','pointerdown', 'touchstart', 'mousedown', 'keydown', 'mouseover'].forEach(event => {
    document.addEventListener(event, (event) => {
        lastEvent = event;
    }, {
        capture: true,//capture 控制监听器是在捕获阶段执行还是在冒泡阶段执行 
        passive: true //passive 的意思是顺从的，表示它不会对事件的默认行为说 no
    });
});
export default function () {
    return lastEvent;
};

const getSelector = function (path) {
    return path.reverse().filter(function (element) {
        return element !== window && element !== document;
    }).map(function (element) {
        var selector;
        if (element.id) {
            selector = `#${element.id}`;
        } else if (element.className && typeof element.className === 'string') {
            selector = '.' + element.className.split(' ').filter(function (item) { return !!item }).join('.');
        } else {
            selector = element.nodeName;
        }
        return selector;
    }).join(' ');
}
// pathsOrTarget [input#errorBtn, div.content, div#container, body, html, document, Window]
export default function (pathsOrTarget){
    if (Array.isArray(pathsOrTarget)) { // 有可能是数组
        return getSelector(pathsOrTarget);
    } else { // 也有可能是对象
        var paths = [];
        var element = pathsOrTarget;
        while (element) {
            paths.push(element);
            element = element.parentNode;
        }
        return getSelector(paths);
    }
}

const project = 'front-end-monitor-test';
const endpoint = 'cn-hangzhou.log.aliyuncs.com';
const logstoreName = 'font-end-monitor-store';
var userAgent = require('user-agent');
function getExtraData() {
    return {
        title: document.title,
        url: location.href,
        timestamp: Date.now(),
        userAgent: userAgent.parse(navigator.userAgent).name 
        // 用户ID 等等等 获取额外数据
    };
}
class SendTracker {
    constructor() {
        this.url = `http://${project}.${endpoint}/logstores/${logstoreName}/track`; // 上报的路径  文档里有参数说明
        this.xhr = new XMLHttpRequest();
    }
    send(data = {}, callback) {
        let extraData = getExtraData();
        let logs = { ...extraData, ...data };
        // 阿里云传值的要求 对象的值不能是数字
        for (let key in logs) {
            if (typeof logs[key] === 'number') {
                logs[key] = "" + logs[key];
            }
        }
        console.log("log:",logs);
        let body = JSON.stringify({
            __logs__: [logs]
        });
        console.log("body:",body);
        this.xhr.open("POST", this.url, true);
        this.xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); // 请求体类型
        this.xhr.setRequestHeader('x-log-apiversion', '0.6.0'); // 版本号
        this.xhr.setRequestHeader('x-log-bodyrawsize', body.length); // 请求体大小
        this.xhr.onload = function () {
            if ((this.status >= 200 && this.status <= 300) || this.status == 304) {
                callback && callback();
            }
        }
        this.xhr.onerror = function (error) {
            console.log('error', error);
        }
        this.xhr.send(body);
    }
}
export default new SendTracker();

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    context: process.cwd(),
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'monitor.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        // before是用来配置路由的  内部是起了express服务  webpack-dev-server内置express,所以不用再安装express
        before(router){ 
            router.get('/success',function(req, res){
                res.json({id:1}); // 200
            });
            router.post('/error',function(req, res){
                res.sendStatus(500); // 500
            })
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'head'
        })
    ]
}

import tracker from '../util/tracker';
export function injectXHR() {
    let XMLHttpRequest = window.XMLHttpRequest;
    let oldOpen = XMLHttpRequest.prototype.open;
    // 重写open方法 增强
    XMLHttpRequest.prototype.open = function (method, url, async) {
        if (!url.match(/logstores/) && !url.match(/sockjs/)) { // 把tracker上报的请求排除
            this.logData = {method, url, async}; // 这个this指XMLHttpRequest的实例，给这个实例上加一个logData的属性
        }
        return oldOpen.apply(this, arguments);
    }

    let oldSend = XMLHttpRequest.prototype.send;
    // 重写send方法 增强
    XMLHttpRequest.prototype.send = function (body) { // body是请求体
        if (this.logData) {
            let start = Date.now(); // 在发送前记录下开始的时间
            // XMLHttpRequest readyState 0 1 2 3 4 当状态变为4的时候就是load了
            // 之后 status 2xx 304 就是成功 其他就是失败
            let handler = (type) => (event) => { // 这里的type 就是 load、error、abort
                let duration = Date.now() - start;
                let status = this.status;
                let statusText = this.statusText;
                tracker.send({//未捕获的promise错误
                    kind: 'stability',//稳定性指标
                    type: 'xhr',//xhr
                    eventType: type,//load error abort
                    pathname: this.logData.url,//接口的url地址
                    status: status + "-" + statusText,
                    duration: "" + duration,//接口耗时
                    response: this.response ? JSON.stringify(this.response) : "", // 响应体
                    params: body || ''
                })
            }
            this.addEventListener('load', handler('load'), false);
            this.addEventListener('error', handler('error'), false);
            this.addEventListener('abort', handler('abort'), false); // 终止请求 abort
        }
        oldSend.apply(this, arguments);
    };
}

import {injectJsError} from './lib/jsError';
import {injectXHR} from './lib/xhr';
injectJsError();
injectXHR();

export default function (callback) {
    if (document.readyState === 'complete') {
        callback();
    } else {
        window.addEventListener('load', callback);
    }
};

import tracker from '../util/tracker';
import onload from '../util/onload';
function getSelector(element) {
    var selector;
    if (element.id) {
        selector = `#${element.id}`;
    } else if (element.className && typeof element.className === 'string') {
        selector = '.' + element.className.split(' ').filter(function (item) { return !!item }).join('.');
    } else {
        selector = element.nodeName.toLowerCase();
    }
    return selector;
}
export function blankScreen() {
    // 不需要穷举所有的，像react 的话就只有id=root
    const wrapperSelectors = ['body', 'html', '#container', '.content']; 
    let emptyPoints = 0;
    function isWrapper(element) {
        let selector = getSelector(element);
        if (wrapperSelectors.indexOf(selector) >= 0) { // 匹配上了 空白点 ++
            emptyPoints++;
        }
    }
    onload(function () {
        let xElements, yElements;
        for (let i = 1; i <= 9; i++) {
            // 根据具体页面布局风格定位点的坐标
            xElements = document.elementsFromPoint(window.innerWidth * i / 10, window.innerHeight / 2); // 纵坐标都是高度的一半，横坐标宽度分成10份
            yElements = document.elementsFromPoint(window.innerWidth / 2, window.innerHeight * i / 10); // 横坐标是宽度的一半，纵坐标高度分成10份
            isWrapper(xElements[0]); // xElements 返回包含多个元素的数组，这里取第0个
            isWrapper(yElements[0]);
        }
        if (emptyPoints >0) { // 一共有18个点 假设大于16个点就是白屏  这里写0做测试
            let centerElements = document.elementsFromPoint(window.innerWidth / 2, window.innerHeight / 2); // 中间点
            tracker.send({
                kind: 'stability',
                type: 'blank',
                emptyPoints: "" + emptyPoints,
                screen: window.screen.width + "x" + window.screen.height,
                viewPoint: window.innerWidth + 'x' + window.innerHeight, // 布局视口大小
                selector: getSelector(centerElements[0]),
            })
        }
    });
}
//screen.width  屏幕的宽度   screen.height 屏幕的高度
//window.innerWidth 去除工具条与滚动条的窗口宽度 window.innerHeight 去除工具条与滚动条的窗口高度

import {injectJsError} from './lib/jsError';
import {injectXHR} from './lib/xhr';
import {blankScreen} from './lib/blankScreen';
injectJsError();
injectXHR();
blankScreen();

import tracker from '../util/tracker';
import onload from '../util/onload';
export function timing() {
    onload(function () {
        // 一般延迟3秒后再去拿时间，这样更加准确
        setTimeout(() => {
            const {
                fetchStart,
                connectStart,
                connectEnd,
                requestStart,
                responseStart,
                responseEnd,
                domLoading,
                domInteractive,
                domContentLoadedEventStart,
                domContentLoadedEventEnd,
                loadEventStart } = performance.timing;
            tracker.send({
                kind: 'experience', // 用户体验指标
                type: 'timing', // 每个阶段的时间
                connectTime: connectEnd - connectStart,//TCP连接耗时
                ttfbTime: responseStart - requestStart,//ttfb  首字节到达时间
                responseTime: responseEnd - responseStart,//Response响应耗时
                parseDOMTime: loadEventStart - domLoading,//DOM解析渲染耗时
                domContentLoadedTime: domContentLoadedEventEnd - domContentLoadedEventStart,//DOMContentLoaded事件回调耗时
                timeToInteractive: domInteractive - fetchStart,//首次可交互时间
                loadTime: loadEventStart - fetchStart//完整的加载时间
            });

        }, 3000);
    });
}

import {injectJsError} from './lib/jsError';
import {injectXHR} from './lib/xhr';
import {blankScreen} from './lib/blankScreen';
import {timing} from './lib/timing';
injectJsError();
injectXHR();
blankScreen();
timing();

import tracker from '../util/tracker';
import onload from '../util/onload';
import getSelector from '../util/getSelector';
import getLastEvent from '../util/getLastEvent';
export function timing() {
    onload(function () {
        let FMP, LCP;
        // 增加一个性能条目的观察者
        // 捕获页面中出现有意义的元素
        new PerformanceObserver((entryList, observer) => {
            let perfEntries = entryList.getEntries();
            console.log("perfEntries:",perfEntries);
            FMP = perfEntries[0];
            observer.disconnect(); // 不在观察了
        }).observe({ entryTypes: ['element'] }); // 观察页面中有意义的元素

        // 捕获页面中的large content paint 代表在viewport中最大的页面元素加载的时间
        new PerformanceObserver((entryList, observer) => {
            const perfEntries = entryList.getEntries();
            const lastEntry = perfEntries[perfEntries.length - 1];
            LCP = lastEntry;
            observer.disconnect();
        }).observe({ entryTypes: ['largest-contentful-paint'] });

        // 用户首次和页面交互(单击链接，点击按钮等)到页面响应交互的时间  直接在页面上点击就能触发
        new PerformanceObserver(function (entryList, observer) {
            let lastEvent = getLastEvent();
            const firstInput = entryList.getEntries()[0];
            console.log("FID:", firstInput);
            if (firstInput) {
                // processingStart 开始处理的时间  startTime 开始点击的时间
                let inputDelay = firstInput.processingStart - firstInput.startTime;//处理延迟
                let duration = firstInput.duration;//处理耗时
                if (firstInput > 0 || duration > 0) {
                    tracker.send({
                        kind: 'experience', // 用户体验指标
                        type: 'firstInputDelay', // 首次输入延迟
                        inputDelay: inputDelay, // 延时的时间
                        duration: duration, // 处理的时间
                        startTime: firstInput.startTime,
                        selector: lastEvent ? getSelector(lastEvent.path || lastEvent.target) : ''
                    });
                }
            }
            observer.disconnect();
        }).observe({ type: 'first-input', buffered: true }); // 用户的第一次交互，可以是点击页面，也可以是第一次输入

        setTimeout(() => {
            const {
                fetchStart,
                connectStart,
                connectEnd,
                requestStart,
                responseStart,
                responseEnd,
                domLoading,
                domInteractive,
                domContentLoadedEventStart,
                domContentLoadedEventEnd,
                loadEventStart } = performance.timing;
            tracker.send({
                kind: 'experience', // 用户体验指标
                type: 'timing', // 每个阶段的时间
                connectTime: connectEnd - connectStart,//TCP连接耗时
                ttfbTime: responseStart - requestStart,//ttfb  首字节到达时间
                responseTime: responseEnd - responseStart,//Response响应耗时
                parseDOMTime: loadEventStart - domLoading,//DOM解析渲染耗时
                domContentLoadedTime: domContentLoadedEventEnd - domContentLoadedEventStart,//DOMContentLoaded事件回调耗时
                timeToInteractive: domInteractive - fetchStart,//首次可交互时间
                loadTime: loadEventStart - fetchStart//完整的加载时间
            });

            // 开始发送性能指标
            const FP = performance.getEntriesByName('first-paint')[0];
            const FCP = performance.getEntriesByName('first-contentful-paint')[0];
            console.log('FP', FP);
            console.log('FCP', FCP);
            console.log('FMP', FMP);
            console.log('LCP', LCP);
            tracker.send({
                kind: 'experience',
                type: 'paint',
                firstPaint: FP.startTime,
                firstContentPaint: FCP.startTime,
                firstMeaningfulPaint: FMP.startTime,
                largestContentfulPaint: LCP.startTime
            });

        }, 3000);
    });
}

// 这是一个全局属性
// 告诉浏览器，我现在执行callback函数，但是它优先级比较低，告诉浏览器可以空闲的时候执行
// 但是如果到了超时时间，就必须马上执行
requestIdleCallback(callback, {timeout: 1000});

window.requestIdleCallback(
  callback: (deaLine: IdleDeadline) => void,
  option?: {timeout: number}
  )

interface IdleDeadline {
  didTimeout: boolean // 表示任务执行是否超过约定时间
  timeRemaining(): DOMHighResTimeStamp // 任务可供执行的剩余时间
}