Фронтальная регистрация стала проще: используйте этот JavaScript Logger

Статья переиздана с разрешения Вин Халбвакс, инженера программного обеспечения Loggly. Первоначально он был  размещен в блоге Loggly . 

Разработка приложений, работающих в браузерах, может быть ужасающей, учитывая, что вы имеете очень ограниченный контроль над средой, в которой будет выполняться ваш код. Это также может быть очень захватывающим, потому что вы начинаете работать в дисциплине, которая очень быстро вводит новшества и может охватить большое количество пользователей. По мере того как веб-приложения становятся все более сложными, крайне важно создать хорошую культуру поведения журналирования в стеке, включая внешний интерфейс. Правильная регистрация в интерфейсе может предоставить вам:

• Понимание того, как клиенты используют ваш продукт
• Объективные метрики, которые вы можете использовать для принятия важных решений (например, получить поддержку от руководства, чтобы тратить время на то, что, по вашему мнению, важно, намного проще, если вы можете предоставить метрики, подтверждающие ваш случай)
• Способность находить проблемы (или возможности), о которых вы даже не подозревали

Самое главное, если вы хотите что-то улучшить (например, количество ошибок, производительность сайта), вы должны быть в состоянии измерить это. (Для интересного прочтения о мониторинге производительности прочитайте пост моего коллеги Маурисио в  блоге .)

Loggly JavaScript Logger облегчает начало работы

Когда я присоединился к Loggly, я был приятно удивлен тем, какие записи у нас были. Поскольку наш сайт является одностраничным приложением (SPA), один сеанс пользователя, просматривающего файлы журналов, может привести к десяткам, если не сотням HTTP-запросов к нашему бэкэнду. Мы отслеживаем все ошибки, а также сколько времени занимает каждая часть запроса, от браузера до базы данных и нескольких сервисов между ними, которые обрабатывают запрос. Знание того, сколько каждый шаг добавляет к общему времени прохождения в оба конца, имело решающее значение для того, чтобы помочь нам решить, какие компоненты сначала потратить на оптимизацию.

На удивление легко начать при входе в интерфейс:

1. Зарегистрируйте учетную запись Loggly,  если у вас ее еще нет.
2. Включите  трекер Loggly JavaScript в  качестве одного из ресурсов, которые вы загружаете на своей странице. (Трекер работает асинхронно и не блокирует загрузку страниц.) Кроме того, вы можете использовать наш   трекер AngularJS .

Это оно! Теперь у вас есть доступ к глобальному объекту «_LTracker» с помощью метода «push». Вы можете передать ему объект, и трекер обработает его сериализацию в JSON и отправит событие в Loggly для анализа и индексации, например:

_LTracker.push({
    message: 'hello'
});

_LTracker.push({
    category: 'apiCall',
    status: 'success',
    endpoint: window.location.pathname,
    totalTime: 2108,
    databaseTime: 108,
    requestSchedulingTime: 1604
});

_LTracker.push({
    apiCalls: {
        status: 'success',
        endpoint: 'users',
        path: window.location.pathname,
        timingProfile: {
            total: 2108,
            database: 108,
            requestScheduling: 1604
        }
    }
});

var getUsers = function() {
    var deferred = $.Deferred(),
        timingStart = Date.now(),
        trackingPayload = {
            action: 'apiCall',
            endpoint: 'users'
        };

    $.get('/users')
        .done(function(data) {
            var timingEnd = Date.now();
            $.extend(trackingPayload, {
                result: 'success',
                took: timingEnd - timingStart
            });
            deferred.resolve(data);
        }).fail(function(jqXHR) {
            var timingEnd = Date.now();
            $.extend(trackingPayload, {
                result: 'error',
                took: timingEnd - timingStart,
                status: jqXHR.statusText
            });
            deferred.reject(jqXHR);            
        }).always(function() {
            window._LTracker.push(trackingPayload);            
        });
    return deferred.promise();
};

// In use:
getUsers.done(function(data) {
    // process response
});