предисловие
Эта серия статей призвана объяснить, как создать систему внешнего мониторинга с нуля.
Проект находится в открытом доступе
адрес проекта:
- Github.com/bombay js / thin ... (web sdk)
- GitHub.com/Бомбей JS/Тонкий…(сервер, используемый для предоставления API) (незавершенный)
- GitHub.com/Бомбей JS/Тонкий…(Система управления Backstage, визуализированные данные и т. д.) (незавершенный)
Ваша поддержка является движущей силой для нас, чтобы продолжать двигаться вперед.
Нравится, пожалуйста, начните!!!
Нравится, пожалуйста, начните!!!
Нравится, пожалуйста, начните!!!
Эта статья является первой в серии, посвященной проектированию и разработке пакета SDK для веб-зонда, в которой основное внимание уделяется функциям и реализациям, включенным в пакет SDK.
Функция
- отчет пв уф
- поймать ошибку
- отчет о производительности
- Сообщить об отслеживании пользователя
- Поддержка одной страницы
- hack ajax fetch
- Сообщить о загруженных ресурсах
- hack console
- hack onpopstate
- Откройте глобальную переменную __bb
- Похороненная сумма avg msg api
поймать исключение
обработка исключений window.onerror
window.onerror = function (msg, url, row, col, error) {
console.log({
msg, url, row, col, error
})
return true;
};
Уведомление:
-
Только когда функция window.onerror возвращает true, исключение не будет выброшено вверх.
-
window.onerror не может отловить ошибки исключения ресурсов,Поскольку исключение сетевого запроса не будет всплывать событие
Поэтому обычно мы не используем window.onerror, а используем window.addEventListener('error',callback)
window.addEventListener('error', (msg, url, row, col, error) => {
console.log(
msg, url, row, col, error
);
return true;
}, true);
tips:Как отличить перехваченное исключение или ошибку ресурса, что можно сделать с помощьюinstanceofЧтобы отличить, пойманное исключение instanceofErrorEvent, в то время как ошибка ресурса instanceofEvent
Вы можете обратиться к следующему коду
export function handleErr(error): void {
switch (error.type) {
case 'error':
error instanceof ErrorEvent ? reportCaughtError(error) : reportResourceError(error)
break;
case 'unhandledrejection':
reportPromiseError(error)
break;
// case 'httpError':
// reportHttpError(error)
// break;
}
setGlobalHealth('error')
}
обещать исключение
Исключения промисов не могут быть перехвачены с помощью onerror или try-catch. может контролироватьunhandledrejectionмероприятие
window.addEventListener("unhandledrejection", function(e){
e.preventDefault()
console.log(e.reason);
return true;
});
исключение iframe
Исключение, вызванное исключением iframe,Script error., мы обычно игнорируем это напрямую и не сообщаем об этом
Script error.решение:Вууху, alibaba cloud.com/help/this/doc…
производительность страницы
пройти черезwindow.performanceМы можем получить трудоемкость следующих этапов и рассчитать ключевые показатели эффективности.
tips:пройти черезwindow.navigator.connection.bandwidthМы можем оценить пропускную способность
поведение пользователя
Поведение пользователя здесь временно толькоclickсобытия иconsole
Прослушивание событий кликов
window.addEventListener('click', handleClick, true);
// handleClick事件定义
export function handleClick(event) {
var target;
try {
target = event.target
} catch (u) {
target = "<unknown>"
}
if (0 !== target.length) {
var behavior: clickBehavior = {
type: 'ui.click',
data: {
message: function (e) {
if (!e || 1 !== e.nodeType) return "";
for (var t = e || null, n = [], r = 0, a = 0,i = " > ".length, o = ""; t && r++ < 5 &&!("html" === (o = normalTarget(t)) || r > 1 && a + n.length * i + o.length >= 80);)
n.push(o), a += o.length, t = t.parentNode;
return n.reverse().join(" > ")
}(target),
}
}
// 空信息不上报
if (!behavior.data.message) return
let commonMsg = getCommonMsg()
let msg: behaviorMsg = {
...commonMsg,
...{
t: 'behavior',
behavior,
}
}
report(msg)
}
}
Окончательный формат данных отчета выглядит следующим образом
{
"type": "ui.click",
"data": {
"message": "div#mescroll.mescroll.mescroll-bar > div.index__search-content___1Q2eh"
}
}
переписать консоль
Чтобы слушать консоль, мы должны переопределить метод window.console.
// hack console
// Config.behavior.console 取值为["debug", "info", "warn", "log", "error"]
export function hackConsole() {
if (window && window.console) {
for (var e = Config.behavior.console, n = 0; e.length; n++) {
var r = e[n];
var action = window.console[r]
if (!window.console[r]) return;
(function (r, action) {
window.console[r] = function() {
var i = Array.prototype.slice.apply(arguments)
var s: consoleBehavior = {
type: "console",
data: {
level: r,
message: JSON.stringify(i),
}
};
handleBehavior(s)
action && action.apply(null, i)
}
})(r, action)
}
}
}
Поддержка одной страницы
В настоящее время многие мониторы не поддерживают отдельные страницы. Чтобы поддержать отдельные страницы, мы должны знать принцип перехода одной страницы. В настоящее время в целом есть два метода: хеш и история.
hash
Хэш относительно прост, мониторингhashchangeмогу
on('hashchange', handleHashchange)
history
история зависит от HTML5 History API и конфигурации сервера. В основном зависит от history.pushState и history.replaceState
Затем мы хотим, чтобы браузер отправлял одно и то же событие при выполнении двух методов.historystatechangedВыходи, тогда нужно переписать два метода
/**
* hack pushstate replaceState
* 派送historystatechange historystatechange事件
* @export
* @param {('pushState' | 'replaceState')} e
*/
export function hackState(e: 'pushState' | 'replaceState') {
var t = history[e]
"function" == typeof t && (history[e] = function (n, i, s) {
!window['__bb_onpopstate_'] && hackOnpopstate(); // 调用pushState或replaceState时hack Onpopstate
var c = 1 === arguments.length ? [arguments[0]] : Array.apply(null, arguments),
u = location.href,
f = t.apply(history, c);
if (!s || "string" != typeof s) return f;
if (s === u) return f;
try {
var l = u.split("#"),
h = s.split("#"),
p = parseUrl(l[0]),
d = parseUrl(h[0]),
g = l[1] && l[1].replace(/^\/?(.*)/, "$1"),
v = h[1] && h[1].replace(/^\/?(.*)/, "$1");
p !== d ? dispatchCustomEvent("historystatechanged", d) : g !== v && dispatchCustomEvent("historystatechanged", v)
} catch (m) {
warn("[retcode] error in " + e + ": " + m)
}
return f
}, history[e].toString = fnToString(e))
}
Тогда просто слушайhistorystatechangedпросто хорошо
on('historystatechanged', handleHistorystatechange)
tips:используется здесьwindow.CustomEventэтот API
Ресурсы для отчетов
Ресурсы относятся к внешним ресурсам веб-страниц, таким как изображения, js, css и т. д.
Принцип черезperformance.getEntriesByType("resource")Получить ресурсы, загруженные страницей
export function handleResource() {
var performance = window.performance
if (!performance || "object" != typeof performance || "function" != typeof performance.getEntriesByType) return null;
let commonMsg = getCommonMsg()
let msg: ResourceMsg = {
...commonMsg,
...{
dom: 0,
load: 0,
t: 'res',
res: '',
}
}
var i = performance.timing || {},
o = performance.getEntriesByType("resource") || [];
if ("function" == typeof window.PerformanceNavigationTiming) {
var s = performance.getEntriesByType("navigation")[0];
s && (i = s)
}
each({
dom: [10, 8],
load: [14, 1]
}, function (e, t) {
var r = i[TIMING_KEYS[e[1]]],
o = i[TIMING_KEYS[e[0]]];
if (r > 0 && o > 0) {
var s = Math.round(o - r);
s >= 0 && s < 36e5 && (msg[t] = s)
}
})
// 过滤忽略的url
o = o.filter(item => {
var include = getConfig('ignore').ignoreApis.findIndex(ignoreApi => item.name.indexOf(ignoreApi) > -1)
return include > -1 ? false : true
})
msg.res = JSON.stringify(o)
report(msg)
}
монитор API-интерфейса
Здесь мы перепишем ajax или fetch, чтобы автоматически сообщать информацию об успешном и неудачном вызове интерфейса.Конечно, если сетевой запрос не инициируется через эти два метода, также предоставляется дополнительная поддержка.__bb.api()Ручная эскалация
переписать аякс
// 如果返回过长，会被截断，最长1000个字符
function hackAjax() {
if ("function" == typeof window.XMLHttpRequest) {
var begin = 0,
url ='',
page = ''
;
var __oXMLHttpRequest_ = window.XMLHttpRequest
window['__oXMLHttpRequest_'] = __oXMLHttpRequest_
window.XMLHttpRequest = function(t) {
var xhr = new __oXMLHttpRequest_(t)
if (!xhr.addEventListener) return xhr
var open = xhr.open,
send = xhr.send
xhr.open = function (method: string, url?: string) {
var a = 1 === arguments.length ? [arguments[0]] : Array.apply(null, arguments);
url = url
page = parseUrl(url)
open.apply(xhr,a)
}
xhr.send = function() {
begin = Date.now()
var a = 1 === arguments.length ? [arguments[0]] : Array.apply(null, arguments);
send.apply(xhr,a)
}
xhr.onreadystatechange = function() {
if (page && 4=== xhr.readyState) {
var time = Date.now() - begin
if (xhr.status >= 200 && xhr.status <= 299) {
var status = xhr.status || 200
if ("function" == typeof xhr.getResponseHeader) {
var r = xhr.getResponseHeader("Content-Type");
if (r && !/(text)|(json)/.test(r))return
}
handleApi(page, !0, time, status, xhr.responseText.substr(0,Config.maxLength) || '', begin)
} else {
handleApi(page, !1, time, status || 'FAILED', xhr.responseText.substr(0,Config.maxLength) || '', begin)
}
}
}
return xhr
}
}
}
переписать выборку
function hackFetch(){
if ("function" == typeof window.fetch) {
var __oFetch_ = window.fetch
window['__oFetch_'] = __oFetch_
window.fetch = function(t, o) {
var a = 1 === arguments.length ? [arguments[0]] : Array.apply(null, arguments);
var begin = Date.now(),
url = (t && "string" != typeof t ? t.url : t) || "",
page = parseUrl((url as string));
if (!page) return __oFetch_.apply(window, a)
return __oFetch_.apply(window, a).then(function (e) {
var response = e.clone(),
headers = response.headers;
if (headers && 'function' === typeof headers.get) {
var ct = headers.get('content-type')
if (ct && !/(text)|(json)/.test(ct)) return e
}
var time = Date.now() - begin;
response.text().then(function(res) {
if (response.ok) {
handleApi(page, !0, time, status, res.substr(0,1000) || '', begin)
} else {
handleApi(page, !1, time, status, res.substr(0,1000) || '', begin)
}
})
return e
})
}
}
}
Похоронен вручную
Поддерживает различные методы ручной отчетности, такие как sum avg api msg