Статьи

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

Заголовок внешнего журнала

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

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

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

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

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

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

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

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

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

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

Мой коллега Джейсон Сковронски написал  хорошую статью, в  которой приведены советы по входу в JSON. Один совет, который я хотел бы добавить, — это воспользоваться иерархической природой JSON. Например, если вы хотите поместить в пространство имен всю информацию, которую вы регистрируете о вызовах API, вы можете легко записать их все в плоский список, например так:

_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
        }
    }
});

После индексации вы можете получить сводку по значениям по полю в Loggly Dynamic Field Explorer: 

Вход в систему

В этом случае у вас есть быстрый доступ к количеству значений для метрик, которые вы регистрируете. Затем вы можете легко отфильтровать все ошибки и исследовать любые проблемы. Вы также можете установить оповещения, когда уровень ошибок выше, чем вы ожидаете. Например, вы хотели бы знать, что в любое время возникает более 10 ошибок в час, если это ваш пороговый уровень ошибок. Вы также можете построить график количества ошибок и других показателей по времени непосредственно из Field Explorer.

Вход в систему

Для числовых полей Field Explorer обеспечивает быстрый доступ к описательной статистике за временной диапазон, в котором вы искали. Вы можете отфильтровать события, соответствующие числовому оператору (например, все события, где общее количество было больше 1000, или от 0 до 500 (при условии, что вы регистрируете миллисекунды). Вы также можете настроить оповещения, чтобы вы получали уведомление по электронной почте всякий раз, когда вы отвечаете может быть выше определенного приемлемого порога (например, более 10 событий в минуту, для ответа которых требуется более 1000 мс).

Если вы четко структурируете данные журнала, Field Explorer станет очень мощным инструментом, который поможет вам разобраться в данных журнала. Вот пример того, как вы можете регистрировать информацию о том, сколько времени занимают ваши Ajax-запросы / сколько ошибок вы можете получить:

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
});

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

Я надеюсь, что этот пост показал вам, насколько просто войти в браузер, а затем изучить эту информацию с помощью Field Explorer. Таким образом, у вас действительно нет никаких оправданий для того, чтобы не входить в интерфейс!

Если у вас еще нет учетной записи Loggly, я рекомендую вам начать  бесплатную пробную версию  сейчас.