Вступление

Ведение журнала чрезвычайно важно, и есть несколько вариантов: FullStory, Inspectlet и другие. Недавно я погрузился в новый инструмент ведения журнала под названием LogRocket… и это потрясающе. У них даже есть интеграции для Angular (промежуточное ПО ngrx), Vue (плагин Vuex) и MobX!

Настраивать

Первый шаг - зарегистрироваться на сайте LogRocket. Затем вам нужно будет придумать название проекта. Вы получите шестизначный ключ, который будет использоваться с именем вашего проекта как YOUR_APP_ID в настройках инициализации в вашем приложении (см. Ниже). Когда вы будете готовы к запуску, вы запустите LogRocket, вставив две строки кода в свое приложение. Да, это так просто. Две строки дают вам доступ ко многому (воспроизведение видео сеанса пользователя, журналы консоли, действия Redux и т. Д.).

import LogRocket from 'logrocket';
LogRocket.init(YOUR_APP_ID); // TA-DA! Wow! So easy!

Даже если вы поместите это в свой локальный код, вы сразу увидите результаты на панели инструментов LogRocket. Вы обретаете божественные способности и становитесь всеведущим, способным видеть все, что делает пользователь. Теперь вы должны увидеть на своей панели инструментов, что пользователя зовут «Анонимный пользователь», что на самом деле бесполезно. Как вы можете отслеживать, какая сессия какая? А теперь давайте определим наших пользователей.

LogRocket.identify('123456', {
  name: 'Sonic the Hedgehog',
  email: '[email protected]',
  // Insert custom properties called "User Traits" below
  subscriptionType: 'premium',
  favoriteFood: 'chili dogs'
});

Теперь, если вы перезагрузите приложение и перейдете на панель управления LogRocket (возможно, вам потребуется обновить ее несколько раз), вы увидите, что «Анонимный пользователь» превратился в «Еж Соник», что, на мой взгляд, намного круче. Кроме того, вы увидите, что электронное письмо отображается под именем. Поля «имя» и «электронная почта» - это специальные свойства, которые LogRocket использует для панели управления. «123456» в приведенном выше коде - это UID, и его можно использовать для поиска в ваших сеансах пользователей с определенным идентификатором. Это позволяет отслеживать, какие сеансы принадлежат какому пользователю. Пользовательские свойства, которые вы указываете после этого, используются для фильтров поиска. Вы можете искать во всех сеансах пользователей, которым, возможно, нравятся собаки чили.

Для записи действий Redux вам нужно будет следовать их руководству и вставить это в свое промежуточное ПО:

import { applyMiddleware, createStore } from 'redux';
const store = createStore(
  reducer, // your app reducer
  applyMiddleware(middlewares, LogRocket.reduxMiddleware())
);

Промежуточное ПО LogRocket должно быть самым последним применяемым промежуточным ПО, чтобы оно могло правильно регистрировать все. Это имеет смысл, потому что у вас может быть другое промежуточное программное обеспечение, перехватывающее действия или запускающее еще больше действий (что является обычным, если вы используете промежуточное программное обеспечение Redux-Thunk или Redux-Saga), и поэтому вы хотите быть уверены, что ничего не пропустите.

Функции

LogRocket имеет несколько действительно интересных функций, в том числе:

  • Воспроизведение видео сеанса пользователя: возьмите немного попкорна, потому что вы действительно можете видеть все, что видит ваш пользователь, в режиме реального времени. Вы видите легальное видео обо всем, что они сделали, что привело к ошибке, которую вы видели в своих инструментах мониторинга. Конечно, эта функция доступна в других инструментах ведения журнала, таких как FullStory, но вы также можете увидеть каждое действие Redux, запущенное во время видео, что идеально подходит для нас, ребят из React / Redux (хотя VueJS по-прежнему занимает особое место в моем сердце! ❤).
  • Отслеживание IP-адреса и пользовательского агента: LogRocket отслеживает IP-адрес каждого сеанса, но также может сообщить вам, какой браузер использует пользователь, что чрезвычайно полезно для устранения проблем, связанных с конкретным браузером.
  • Ведение журнала действий: вы можете видеть все действия Redux, запущенные вашим приложением, а также полезную нагрузку, которую они удерживали во время запуска.
  • Ведение журнала сетевых запросов / ответов: вы можете видеть все сетевые запросы с момента перехода к определенной конечной точке. Да, это может быть очень полезно для ведения журнала, но также для подключения новых людей к вашему приложению. Иногда бывает сложно узнать обо всех перенаправлениях, которые происходят, когда вы попадаете в одну конечную точку, до того, как она фактически отобразит страницу. Вы можете потратить много времени на копание в коде или просто просмотреть порядок сетевых запросов. Конечно, вы всегда можете использовать Chrome Dev Tools, но LogRocket более интересен :)
  • Сохраняемые фильтры: LogRocket позволяет вставлять в журналы настраиваемые свойства, называемые User Traits, что позволяет создавать пары ключ-значение, которые предоставляют дополнительную информацию о вашем пользователе или сеансе. Однако иногда вам нужно быстро найти ключ с определенным значением. Вы можете сохранить фильтры поиска, чтобы ваша команда (или вы сами) могли быстро получить доступ к сеансам с определенными чертами пользователя, как только вы их определите.
  • Интеграция с другими инструментами регистрации: LogRocket интегрируется с множеством других инструментов регистрации, таких как Sentry, Airbrake, Google Analytics и другими. Вы даже можете отправить URL-адрес воспроизведения сеанса, что сделает те дни по телефону более интересными. Опять же, возьмите попкорн и посмотрите, как гнев пользователя щелкает, когда у него проблемы с вашим сайтом.
  • Быстрая поддержка клиентов в чате: я не знаю, спят ли когда-нибудь Мэтт или Бен, потому что я всегда вижу их онлайн. Всякий раз, когда у меня возникают вопросы, я открываю окно внутренней связи, которое находится по всему сайту LogRocket (фиолетовое поле в правом нижнем углу экрана), включая страницу панели инструментов, и задаю несколько простых вопросов. Они были очень дружелюбны и быстро ответили.
  • И еще больше возможностей! Читайте документы. Logrocket .com!

SDK / API

Если вы зайдете на сайт docs.logrocket.com, то обнаружите, что там есть отличная документация. Он очень подробный и может ответить на многие ваши вопросы. SDK очень прост и дает вам возможность игнорировать или очищать данные перед их отправкой на серверы LogRocket. Это очень полезно для предотвращения хранения конфиденциальной информации на удаленных серверах. Эта гибкость и простой API делает LogRocket очень привлекательным инструментом для ведения журнала. Я не буду вдаваться в подробности, но вы должны знать, что у вас есть контроль над фильтрацией / очисткой следующего содержания:

  • HTML / CSS: вы можете добавить класс «_lr-hide» к любому элементу HTML в вашем приложении, чтобы предотвратить сохранение LogRocket этой части приложения на своих серверах и, следовательно, скрыть ее в функции воспроизведения видео.
  • Сетевые запросы: вы можете полностью игнорировать конечные точки с определенными ключевыми словами или скрыть определенную информацию в заголовках, телах запросов и телах ответов. Вы также можете полностью игнорировать все запросы из журнала, если вам не хочется добавлять данные в белый / черный список из запросов, что, как я знаю, может занять много времени.
  • Действия: вы можете игнорировать действия и, следовательно, не регистрировать связанные с ними полезные данные. Это также полезно для удаления действий, которые вы считаете бесполезными в журналах или появляются повсюду в ваших журналах, засоряя их.
  • Состояние: вы можете очистить состояние от действий, используя функцию actionSanitizer в промежуточном программном обеспечении Redux или функцию stateSanitizer. Имейте в виду, что вы, скорее всего, будете использовать и то, и другое, чтобы скрыть как состояние в полезной нагрузке действия (с помощью actionSanitizer), так и состояние, которое отображается в полях prevState или nextState вашего журнала (с помощью stateSanitizer).

За кулисами

Позвольте мне объяснить, как работает некоторая магия в LogRocket в соответствии с их документацией.

HTML / CSS / щелчки / запись мыши: воспроизведение видео пользовательских сеансов возможно через веб-API MutationObserver. Согласно их документам, LogRocket записывает« видео сеансов ваших пользователей, регистрируя различия в DOM через MutationObserver ». Это позволяет захватывать фреймы вашего HTML / CSS, а также любые щелчки пользователя или движения мыши, которые происходят. На панели инструментов LogRockets видео сеанса пользователя пропускает все кадры, которые пользователь неактивен по умолчанию, но вы можете разрешить их, если хотите.

Запись действий: это достигается с помощью промежуточного программного обеспечения Redux. Для тех, кто не знает, промежуточное ПО Redux очень просто настроить. Это очень просто:

const customLogger = store => next => action => {
  if (action.type === 'my_action') {
    // logs payload whenever the 'my_action' action type is fired
    console.log('PAYLOAD: ', action.payload); 
  }
  return next(action);
}

Однако вам не нужно писать ничего подобного, как упоминалось выше. Это всего лишь примечание, чтобы показать, насколько легко любому человеку создать собственное промежуточное ПО для Redux. Для LogRocket вы просто применяете промежуточное программное обеспечение, которое команда LogRocket уже написала для вас, а затем оно начинает регистрировать ваши действия Redux.

Масштабирование и безопасность: LogRocket использует Google Cloud Platform (GCP), поэтому он основан на соответствии GCP.

Ценообразование

Их цены довольно разумные. На самом деле он конкурирует с другими инструментами ведения журнала, такими как FullStory.

Бесплатно: 14-дневная пробная версия с доступом ко всем функциям и до 1000 сеансов. Каждый сеанс длится 30 минут с момента использования функции LogRocket.init (). Для тестирования вы можете открыть новое личное окно Firefox, чтобы начать новый сеанс. Я обнаружил, что Chrome в режиме инкогнито недостаточно для запуска нового сеанса. Бесплатная версия показалась мне действительно полезной. Я могу просто протестировать в локальной среде, вставить две строки кода, и я уже начал работать с LogRocket. Затем я могу поиграть с LogRocket SDK, чтобы увидеть, что все, что я могу сделать, и как интегрировать его в свое приложение.

Команда:

  • 99 $ / месяц за 10000 сеансов, 5 членов команды
  • 199 $ / месяц за 25000 сеансов, 10 членов команды
  • 399 $ / месяц за 100000 сессий, 20 членов команды
  • См .: https://logrocket.com/pricing/, чтобы поиграть с колесом ценообразования.

Профессиональный:

  • Индивидуальное ценообразование: вам придется поговорить с ними напрямую

Список моих желаний

  • Возможность экспортировать зарегистрированные действия - полезно для отладки локальных проблем путем импорта действий в инструменты разработки Redux.
  • Возможность фильтрации по типам действий для сортировки гигантских списков действий (для тех, у кого они есть).
  • Доступный для просмотра список всех пользовательских черт, которые вы определили в своей функции LogRocket identify ().
  • Цветное выделение синтаксиса, как показано на картинке на главной странице LogRocket. Я хочу больше цвета в моих журналах!