Алексей Андросов
Старший разработчик интерфейсов
FrontTalks, Екатеринюург, 5 июля 2013 года
Алексей Андросов
Старший разработчик интерфейсов
FrontTalks, Екатеринюург, 5 июля 2013 года
@doochik
Если вы меряете эффективность своей работы по количеству багов, поздравляю, у вас серьёзные проблемы.
$(projectNS.init);
if (window['jQuery']) {
$(projectNS.init);
} else {
log({type: 'fatal', error: 'no-jquery'});
}
if (window['jQuery']) {
if (window['projectNS']) {
$(projectNS.init);
} else {
log({type: 'fatal', error: 'no-project-js'});
}
} else {
log({type: 'fatal', error: 'no-jquery'});
}
function log(data) {
var props = [];
for (var key in data) {
var value = encodeURIComponent(data[key]);
var key = encodeURIComponent(key);
props.push(key + '=' + value);
}
new Image().src = '/log?' + props.join('&');
}
window.onerror = function(msg, url, line) {
log({
type: 'jserror',
msg: msg,
url: url,
line: line
})
})
...первые логи вам выдадут вот такую статистику
95% msg=Script error.&url=&line=0
0.2% ...
0.1% ...
Решается только в Firefox 13+ с помощью <script src="…" crossorigin="anonymous"
></script>.
А сервер должен ответить CORS-заголовком Access-Control-Allow-Origin: *
Атрибут есть в черновике HTML 5.1. Ждем…
Если Chrome, Firefox или Opera не получит правильный заголовок Access-Control-Allow-Origin
, то заблокирует загрузку скрипта.
Все обернуть в try-catch сложно, потому что JS – асинхронный язык.
Также стоит учитывать, что try-catch влияет на производительность.
onerror msg |
onerror url |
onerror line |
catch msg |
catch url |
catch line |
|
---|---|---|---|---|---|---|
Chrome 26 | + | - | - | + | - | * |
Fx 22 | + | - | - | + | - | * |
IE 9 | + | - | - | + | - | - |
IE 10 | + | - | - | + | - | * |
Opera 12.15 | + | - | - | + | - | * |
* – строка без урла почти бесполезна
onerror msg |
onerror url |
onerror line |
catch msg |
catch url |
catch line |
|
---|---|---|---|---|---|---|
Chrome 26 | + | - | * | + | - | * |
Fx 22 | + | - | - | + | - | - |
IE 9 | + | - | - | + | - | - |
IE 10 | + | - | * | + | - | * |
Opera 12.15 | + | - | * | + | - | * |
* – строка без урла почти бесполезна
onerror msg |
onerror url |
onerror line |
catch msg |
catch url |
catch line |
|
---|---|---|---|---|---|---|
Chrome 26 | - | - | - | + | * | ** |
Fx 22 | - | * | - | + | * | - |
Opera 12.15 | - | - | - | + | * | ** |
<script src="data:text/javascript,...">
* – урлом является весь src (исходный текст)
** – код вытягивается в одну строку
onerror msg |
onerror url |
onerror line |
catch msg |
catch url |
catch line |
|
---|---|---|---|---|---|---|
Chrome 26 | + | - | - | + | - | ** |
Fx 22 | + | * | - | + | * | - |
IE 9 | + | - | - | + | - | - |
IE 10 | + | - | ** | + | - | ** |
Opera 12.15 | - | - | - | + | * | ** |
* – урлом является весь src (исходный текст)
** – код вытягивается в одну строку
var blob = new Blob([code],
{type: 'text/javascript'});
var url = URL.createObjectURL(blob);
var script = document.createElement('script');
script.src = url;
URL.revokeObjectURL(url);
document.body.appendChild(script);
onerror msg |
onerror url |
onerror line |
catch msg |
catch url |
catch line |
|
---|---|---|---|---|---|---|
Chrome 26 | + | * | + | + | * | + |
Fx 22 | + | * | + | + | * | + |
IE 10 | + | * | + | + | * | + |
* – урлом является id Blob'а. Если исполняется несколько кусков кода, то можно сделать простой маппинг ресурсов
После минификации весь код вытягивается в одну строку, из-за этого неудобно искать ошибки с символе 30768.
Поможет UglifyJS
$ uglifyjs page.js -b beautify=false,max-line-len=100
...о незагрузке скрипта
if (msg && typeof msg != 'string') {
if (msg.type && msg.target) {
try {
url = msg.target.src;
} catch(e) {}
msg = 'Error loading script';
}
}
if (url && (
/(miscellaneous|extension)_bindings/.test(url) ||
/^chrome:/.test(url) ||
/^file:/.test(url)
) {
return;
}
if (url && /(&|\?)callback=/.test(url)) {
errorType = 'noJSONPResponse';
}
if (data && data.status === 'OK') {
// все хорошо
} else {
log({
'type': 'something_went_wrong',
'some_usefull_data': data
)}
}
try {
// все хорошо
} сatch (e) {
log({
'type': 'exception',
'msg': e.message || e.toString(),
'stack': e.stacktrace || e.stack
)}
}
Их можно отлаживать с помощью скрытой консоли, доступной по хоткею.
Алексей Андросов
Старший разработчик интерфейсов
@doochik
github.com/doochik