前端监控sdk

}

// 异步错误，不能捕获 ❌

try {

setTimeout(() => {

console.log(notdefined);

}, 0)

} catch(e) {

console.log(‘捕获到异常：’,e);

}

复制代码

try/catch有它细致处理的优势，但缺点也比较明显。

window.onerror

pure js错误收集，window.onerror，当 JS 运行时错误发生时，window 会触发一个 ErrorEvent 接口的 error 事件。

/**

• @param {String} message 错误信息

• @param {String} source 出错文件

• @param {Number} lineno 行号

• @param {Number} colno 列号

• @param {Object} error Error对象

*/

window.onerror = function(message, source, lineno, colno, error) {

console.log(‘捕获到异常：’, {message, source, lineno, colno, error});

}

复制代码

先验证下几个错误是否可以捕获。 ​

// 常规运行时错误，可以捕获 ✅

window.onerror = function(message, source, lineno, colno, error) {

console.log(‘捕获到异常：’,{message, source, lineno, colno, error});

}

console.log(notdefined);

// 语法错误，不能捕获 ❌

window.onerror = function(message, source, lineno, colno, error) {

console.log(‘捕获到异常：’,{message, source, lineno, colno, error});

}

const notdefined,

// 异步错误，可以捕获 ✅

window.onerror = function(message, source, lineno, colno, error) {

console.log(‘捕获到异常：’,{message, source, lineno, colno, error});

}

setTimeout(() => {

console.log(notdefined);

}, 0)

// 资源错误，不能捕获 ❌

复制代码

window.onerror 不能捕获资源错误怎么办？ ​

window.addEventListener

当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，这些 error 事件不会向上冒泡到 window，但能被捕获。而window.onerror不能监测捕获。

// 图片、script、css加载错误，都能被捕获 ✅

// new Image错误，不能捕获 ❌

// fetch错误，不能捕获 ❌

复制代码

new Image运用的比较少，可以单独自己处理自己的错误。 ​

但通用的fetch怎么办呢，fetch返回Promise，但Promise的错误不能被捕获，怎么办呢？ ​

Promise错误

1. 普通Promise错误

try/catch不能捕获Promise中的错误

// try/catch 不能处理 JSON.parse 的错误，因为它在 Promise 中

try {

new Promise((resolve,reject) => {

JSON.parse(‘’)

resolve();

})

} catch(err) {

console.error(‘in try catch’, err)

}

// 需要使用catch方法

new Promise((resolve,reject) => {

JSON.parse(‘’)

resolve();

}).catch(err => {

console.log(‘in catch fn’, err)

})

复制代码

1. async错误

try/catch不能捕获async包裹的错误

const getJSON = async () => {

throw new Error(‘inner error’)

}

// 通过try/catch处理

const makeRequest = async () => {

try {

// 捕获不到

JSON.parse(getJSON());

} catch (err) {

console.log(‘outer’, err);

}

};

try {

// try/catch不到

makeRequest()

} catch(err) {

console.error(‘in try catch’, err)

}

try {

// 需要await，才能捕获到

await makeRequest()

} catch(err) {

console.error(‘in try catch’, err)

}

复制代码

1. import chunk错误

import其实返回的也是一个promise，因此使用如下两种方式捕获错误

// Promise catch方法

import(/* webpackChunkName: “incentive” */‘./index’).then(module => {

module.default()

}).catch((err) => {

console.error(‘in catch fn’, err)

})

// await 方法，try catch

try {

const module = await import(/* webpackChunkName: “incentive” */‘./index’);

module.default()

} catch(err) {

console.error(‘in try catch’, err)

}

复制代码

小结：全局捕获Promise中的错误

以上三种其实归结为Promise类型错误，可以通过unhandledrejection捕获

// 全局统一处理Promise

window.addEventListener(“unhandledrejection”, function(e){

console.log(‘捕获到异常：’, e);

});

fetch(‘https://tuia.cn/test’)

复制代码

为了防止有漏掉的 Promise 异常，可通过unhandledrejection用来全局监听Uncaught Promise Error。 ​

Vue错误

由于Vue会捕获所有Vue单文件组件或者Vue.extend继承的代码，所以在Vue里面出现的错误，并不会直接被window.onerror捕获，而是会抛给Vue.config.errorHandler。

/**

• 全局捕获Vue错误，直接扔出给onerror处理

*/

Vue.config.errorHandler = function (err) {

setTimeout(() => {

throw err

})

}

复制代码

React错误

react 通过componentDidCatch，声明一个错误边界的组件

class ErrorBoundary extends React.Component {

constructor(props) {

super(props);

this.state = { hasError: false };

}

static getDerivedStateFromError(error) {

// 更新 state 使下一次渲染能够显示降级后的 UI

return { hasError: true };

}

componentDidCatch(error, errorInfo) {

// 你同样可以将错误日志上报给服务器

logErrorToMyService(error, errorInfo);

}

render() {

if (this.state.hasError) {

// 你可以自定义降级后的 UI 并渲染

return

Something went wrong.

;

}

return this.props.children;

}

}

class App extends React.Component {

render() {

return (

)

}

}

复制代码

但error boundaries并不会捕捉以下错误：React事件处理，异步代码，error boundaries自己抛出的错误。

跨域问题

一般情况，如果出现 Script error 这样的错误，基本上可以确定是出现了跨域问题。

如果当前投放页面和云端JS所在不同域名，如果云端JS出现错误，window.onerror会出现Script Error。通过以下两种方法能给予解决。

• 后端配置Access-Control-Allow-Origin、前端script加crossorigin。

const script = document.createElement(‘script’);

script.crossOrigin = ‘anonymous’;

script.src = ‘http://yun.tuia.cn/test.js’;

document.body.appendChild(script);

复制代码

• 如果不能修改服务端的请求头，可以考虑通过使用 try/catch 绕过，将错误抛出。

<!doctype html>

复制代码

会发现如果不加try catch，console.log就会打印script error。加上try catch就能捕获到。 ​

我们捋一下场景，一般调用远端js，有下列三种常见情况。

• 调用远端JS的方法出错

• 远端JS内部的事件出问题

• 要么在setTimeout等回调内出错

调用方法场景

可以通过封装一个函数，能装饰原方法，使得其能被try/catch。

<!doctype html>

复制代码

大家可以尝试去掉wrapErrors感受下。 ​

事件场景 ​

可以劫持原生方法。

<!doctype html>

http://test.com

复制代码

大家可以尝试去掉封装EventTarget.prototype.addEventListener的那段代码，感受下。

上报接口

为什么不能直接用GET/POST/HEAD请求接口进行上报？ ​

这个比较容易想到原因。一般而言，打点域名都不是当前域名，所以所有的接口请求都会构成跨域。 ​

为什么不能用请求其他的文件资源（js/css/ttf）的方式进行上报？ ​

创建资源节点后只有将对象注入到浏览器DOM树后，浏览器才会实际发送资源请求。而且载入js/css资源还会阻塞页面渲染，影响用户体验。 ​

构造图片打点不仅不用插入DOM，只要在js中new出Image对象就能发起请求，而且还没有阻塞问题，在没有js的浏览器环境中也能通过img标签正常打点。

使用new Image进行接口上报。最后一个问题，同样都是图片，上报时选用了1x1的透明GIF，而不是其他的PNG/JEPG/BMP文件。 ​

首先，1x1像素是最小的合法图片。而且，因为是通过图片打点，所以图片最好是透明的，这样一来不会影响页面本身展示效果，二者表示图片透明只要使用一个二进制位标记图片是透明色即可，不用存储色彩空间数据，可以节约体积。因为需要透明色，所以可以直接排除JEPG。 ​

同样的响应，GIF可以比BMP节约41%的流量，比PNG节约35%的流量。GIF才是最佳选择。

• 可以进行跨域

• 不会携带cookie

• 不需要等待服务器返回数据

使用1*1的gif

非阻塞加载

尽量避免SDK的js资源加载影响。

通过先把window.onerror的错误记录进行缓存，然后异步进行SDK的加载，再在SDK里面处理错误上报。

这是一个测试页面(new)

复制代码

采集聚合端（日志服务器）

---

这个环节，输入是借口接收到的错误记录，输出是有效的数据入库。核心功能需要对数据进行清洗，顺带解决了过多的服务压力。另一个核心功能是对数据进行入库。

总体流程可以看为错误标识 -> 错误过滤 -> 错误接收 -> 错误存储。

错误标识（SDK配合）

聚合之前，我们需要有不同维度标识错误的能力，可以理解为定位单个错误条目，单个错误事件的能力。 ​

单个错误条目 ​

通过date和随机值生成一条对应的错误条目id。

const errorKey = ${+new Date()}@${randomString(8)}

function randomString(len) {

len = len || 32;

let chars = ‘ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678’;

let maxPos = chars.length;

let pwd = ‘’;

for (let i = 0; i < len; i++) {

pwd += chars.charAt(Math.floor(Math.random() * maxPos));

}

return pwd;

}

复制代码

单个错误事件

首先需要有定位同个错误事件（不同用户，发生相同错误类型、错误信息）的能力。

通过message、colno与lineno进行相加计算阿斯克码值，可以生成错误的errorKey。

const eventKey = compressString(String(e.message), String(e.colno) + String(e.lineno))

function compressString(str, key) {

let chars = ‘ABCDEFGHJKMNPQRSTWXYZ’;

if (!str || !key) {

return ‘null’;

}

let n = 0,

m = 0;

for (let i = 0; i < str.length; i++) {

n += str[i].charCodeAt();

}

for (let j = 0; j < key.length; j++) {

m += key[j].charCodeAt();

}

let num = n + ‘’ + key[key.length - 1].charCodeAt() + m + str[str.length - 1].charCodeAt();

if(num) {

num = num + chars[num[num.length - 1]];

}

return num;

}

复制代码

如下图，一个错误事件（事件列表），下属每条即为实际的错误条目。

错误过滤（SDK配合）

域名过滤 ​

过滤本页面script error，可能被webview插入其他js。 ​

我们只关心自己的远端JS问题，因此做了根据本公司域名进行过滤。

// 伪代码

if(!e.filename || !e.filename.match(/^(http|https)😕/yun./)) return true

复制代码

重复上报 ​

怎么避免重复的数据上报？根据errorKey来进行缓存，重复的错误避免上报的次数超过阈值。

// 伪代码

const localStorage = window.localStorage;

const TIMES = 6; // 缓存条数

export function setItem(key, repeat) {

if(!key) {

key = ‘unknow’;

}

if (has(key)) {

const value = getItem(key);

// 核心代码，超过条数，跳出

if (value >= repeat) {

return true;

}

storeStorage[key] = {

value: value + 1,

time: Date.now()

}

} else {

storeStorage[key] = {

value: 1,

time: Date.now()

}

}

return false;

}

复制代码

错误接收

在处理接收接口的时候，注意流量的控制，这也是后端开发需要投入最多精力的地方，处理高并发的流量。

错误记录

接收端使用Koa，简单的实现了接收及打印到磁盘。

// 伪代码

module.exports = async ctx => {

const { query } = ctx.request;

// 对于字段进行简单check

check([ ‘mobile’, ‘network’, ‘ip’, ‘system’, ‘ua’, …], query);

ctx.type = ‘application/json’;

ctx.body = { code: ‘1’, msg: ‘数据上报成功’ };

// 进行日志记录到磁盘的代码，根据自己的日志库选择

};

复制代码

削峰机制 ​

比如每秒设置2000的阈值，然后根据请求量减少上限，定时重置上限。

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法