Fe-timeline-watcher NPM

用于前端页面及资源加载的性能监控及错误上报（依赖Performance API）。告别繁杂配置，只需短短几行，即可看到效果。

使用方法

script引入

直接将min.js文件放入html中，并加一行配置（并启动）。

    <script src="path/to/fe-timeline-watcher.min.js"></script>
    <script>
        __FE_TIMELINE_WATCHER__.start(
            watcherUrl: string, // 必填参数
            needResourceInfo?: boolean = true, // 是否需要资源加载信息
            needPageLoadInfo?: boolean = true, // 是否需要首屏加载信息
            needErrorInfo?: boolean = true // 是否需要全局错误捕获
        );
    </script>

在webpack、rollup等配置下引入

    const Watcher = require('fe-timeline-watcher');
    Watcher.start(
        watcherUrl: string,
        needResourceInfo?: boolean = true,
        needPageLoadInfo?: boolean = true,
        needErrorInfo?: boolean = true
    );

数据格式说明

type: 0，表示首屏数据，包含browserInfo，pageLoad，resource。 type: 1，表示更新的数据，包含resource。 type: 2，表示捕获到的错误。

注意事项

监控默认请求采用 fetch（低版本浏览器需polyfill）， 在数据量不大的情况下使用GET请求，反之使用POST 。
当需要捕获全局错误时，请务必保持所有跨域 script脚本含有 crossorigin 属性，并且资源响应头含有正确的 Access-Control-Allow-Origin 设置。可参考touch.qunar.com中对js资源的响应头设置。
如果需要上报所有资源的加载时间，需要给资源的响应头设置 Allow-Timing-Origin 为正确的值，否则有部分计算值不正确。