Самый простой способ поймать ошибки JS

Я проводил некоторое исследование того, как мы можем уловить ошибки JavaScript, а затем отправить их в нашу собственную систему для внутреннего ведения журнала (чтобы мы могли попробовать и реплицировать там, где это возможно, и исправить любые возможные ошибки). До сих пор я нашел немало платных услуг:

TrackJS выглядит интересным, но мы действительно не можем позволить себе тратить еще больше денег каждый месяц. Затем я наткнулся на этот либрей:

http://www.stacktracejs.com/#!/docs/stacktrace-js

Похоже, я не понимаю. Вот что я пытаюсь:

window.onerror = function(msg, file, line, col, error) {
    StackTrace.fromError(error).then(callback).catch(errback);
};

var callback = function(stackframes) {
    var stringifiedStack = stackframes.map(function(sf) {
        return sf.toString();
    }).join('\n');
    console.log(stringifiedStack);
};

var errback = function(err) {
        console.log(err);
};

StackTrace.get().then(callback).catch(errback);

... и все, что я верну, это:

TypeError: ErrorStackParser undefined

var stackframes = ErrorStackParser.parse(ошибка);

Может ли кто-нибудь еще предложить решение или посмотреть, что я делаю неправильно с stacktrace.js script?

ОБНОВЛЕНИЕ:. С помощью ниже я смог, по крайней мере, заставить его что-то сделать сейчас. Оказывается, вам нужно несколько js libs:

Тем не менее, я все еще не могу понять.

var callback = function(stackframes) {
    console.log(stackframes)
    var stringifiedStack = stamap(function(sf) {
        return sf.toString();
    }).join('\n');
    console.log(stringifiedStack);
};

var errback = function(err) { console.log(err.message); };

 try {
    foo;
 } catch(e) {
    StackTrace.get().then(callback).catch(errback);
 }

Пока я получаю ошибки, зарегистрированные в консоли, номера строк и сообщения об ошибках меньше, чем бесполезно:( Пример:

.get()@https://cdn.steampunkjunkies.net/2014/js/scripts-all11.js:5:19706
{anonymous}()@https://cdn.steampunkjunkies.net/2014/js/scripts-all11.js:84:2

Строка 84 - это функция вызывающего абонента:

StackTrace.get().then(callback).catch(errback);

... и строка 5 - это миниатюрный include stacktrace.min.js(в моем основном JS файле)

Я немного озадачен тем, как мы можем получить любую полезную информацию из этого:/

ОБНОВЛЕНИЕ 2: Хорошо, я приближаюсь!

var callback = function(stackframes) {
    var stringifiedStack = stackframes.map(function(sf) {
        return sf.toString();
    }).join('\n');
    alert(stringifiedStack);
};

var errback = function(err) { console.log(err.message); };

 try {
    var foo = 0;
    foo / 1;

    aklert;

    test;
 } catch(e) {
    StackTrace.fromError(e).then(callback).catch(errback);
 }

Теперь выдается сообщение alert():

{anonymous}() @https://cdn.steampunkjunkies.net/2014/js/scripts-all11.js:73:1

Однако это не вся информация, которая мне нужна. Очевидно, что ему нужно хорошее сообщение (т.е. var x cannot be undefined)

У кого-нибудь есть идеи?

Я попытался сохранить их в массиве (с номером строки и номером номера), но это не работает во всех браузерах (и, как это ни парадоксально, код отладки вызвал фатальный:))

ОБНОВЛЕНИЕ 3

Хорошо, мы сближаемся:)

var callback = function(stackframes) {
    var stringifiedStack = stackframes.map(function(sf) {
        return sf.toString();
    }).join('\n');
    alert(stringifiedStack);
};

var errback = function(err) { console.log(err.message); };

window.onerror = function(msg, file, line, col, error) {
    var callback = reportWithMessage(msg);
    StackTrace.fromError(error).then(callback).catch(errback);
};


function reportWithMessage(message) {
    return function report(stack) {
        var yourErrorCollectorUrl = 'https://steampunkjunkiesdev.net/cgi-bin/debug.cgi';
        stack.message = message;
        StackTrace.report(stack, yourErrorCollectorUrl);
    };
}

 try {
    var foo = 0;
    foo / 1;

    aklert;

    test;
 } catch(e) {
    StackTrace.get().then(reportWithMessage()).catch(errback);
 }

введите описание изображения здесь

Линия 92 - это одна}:

StackTrace.get().then(reportWithMessage()).catch(errback);

... так что все его действия говорят мне, что эта функция была вызвана, но это не номер строки для фактической ошибки.

Любые идеи? Я не могу поверить, насколько сложно уловить ошибки JS и просто сообщить об этом в script. Вы бы подумали, что за последние 20 лет развития Интернета для нас разработчики были бы разработаны более уступчивые:/

Ответы

Ответ 1

Прошу прощения за ваши проблемы. Используйте dist/stacktrace.min.js, у которого есть все связанные зависимости. Я подал эту проблему, чтобы мы могли сделать это более ясным, а другие избегали боли, с которой вы столкнулись: https://github.com/stacktracejs/stacktrace.js/issues/140

Относительно сообщения об ошибке кажется, что вы можете что-то сделать с параметром msg window.onerror в вашей системе отчетов об ошибках. Я понимаю, что это не прямолинейно, поскольку нет явного места для хранения сообщений.

Как насчет этого?

window.onerror = function(msg, file, line, col, error) {
    var callback = reportWithMessage(msg);
    StackTrace.fromError(error).then(callback).catch(errback);
};


function reportWithMessage(message) {
    return function report(stack) {
        var yourErrorCollectorUrl = 'https://yourdomain.com/ec';
        stack.message = message;
        // HTTP POST with {message: String, stack: JSON}
        StackTrace.report(stack, yourErrorCollectorUrl);
    };
}

Вне window.onerror вы можете сделать:

StackTrace.get().then(reportWithMessage()).catch(errorhandler);

ОБНОВЛЕНИЕ. В случае, когда вы обнаружили ошибку, вы хотите использовать

StackTrace.fromError(error).then(...).catch(...);