Як знайти помилку в додатку за 2-3 хвилини: прискорюємо налагодження за допомогою LogScope

Класичні пошук та виправлення помилок у додатку забирають багато ресурсів: тестувальники відтворюють проблему, розробники шукають винятки в коді, менеджери ставлять усім завдання.

Ми в Creonit спеціалізуємося на автоматизації та оптимізації процесів, у тому числі власних.
Сьогодні розповідаємо, як запустили LogScope — інструмент, який допомагає знаходити проблеми у роботі мобільного додатка без залучення тестувальників та розробників.

Що таке LogScope і для чого він потрібний

LogScope — це система аналізу роботи мобільного додатка та досвіду користувача в реальному часі.

LogScope не тільки знаходить помилки і винятки в роботі програми, але й показує причини їх появи.

За допомогою сервісу будь-який учасник команди розробки може знайти проблему в цифровому продукті за 2-3 хвилини без залучення тестувальників та розробників LogScope немає аналогів на російському ринку.

Чим LogScope корисний команді продукту та бізнесу

Використовуючи LogScope на проекті:

Проджект-менеджери — швидко опрацюють інцидент і зрозуміють, де сталася помилка — на боці бекенду чи фронтенду.

Розробники — отримують точну інформацію про роботу програми та можуть швидко налагодити код у режимі розробки. Не слід вивчати величезні масиви даних у неструктурованих логах.

Тестувальники — самостійно вивчають дані про роботу мобільного додатка та знаходять проблеми. Не потрібно використовувати сторонні налагоджувачі, відтворювати помилки та просити розробників подивитися код.

Фаундери, CEO, продакт-менеджери — економлять годинник і гроші на розробці та підтримці програми. Також утримують користувачів та знижують репутаційні ризики за рахунок швидкого вирішення проблем у додатку.

Як зазвичай відбувається налагодження програм

Щоб зрозуміти, де і чому сталася помилка в цифровому продукті, потрібно знайти інформацію про збій логах — текстові файли з даними про дії програми та користувачів.

Зазвичай логи дивляться в IDE (Integrated Development Environment) – середовище, де розробники пишуть код. Але вони неструктуровані та містять багато інформації, в якій важко розібратися. Якщо людина не знає мов програмування, то дані у текстових файлах їй нічого не скажуть.

Щоб подивитися логи, потрібно зробити низку дій, з якими впорається лише розробник:

1. Розгорнути проект.
2. Запустити його на емуляторі.
3. Відтворити помилку.

Тому класичне налагодження відбувається за такою схемою:

Цей сценарій має кілька обмежень:

• Помилка може не відтворюватися у тестувальника чи розробника.
• Команда витрачає багато часу на весь ланцюжок дій — від 18 годин.

Як результат — на пошук помилки можуть піти десятки годин роботи кількох людей. У цей час бізнес зазнає репутаційних ризиків, втрачає користувачів і гроші.

Можливості LogScope

Щоб не витрачати десятки годин роботи кількох людей на пошук помилок, ми розробили інструмент, який автоматизує їхній моніторинг. LogScope збирає події в додатку в реальному часі та дає можливість швидко знаходити винятки. Можна вивчити всі сесії користувачів, знайти проблеми, відфільтрувати їх та отримати повну інформацію про інцидент.

1. За допомогою номера телефону, email або логіна користувача, сервіс ідентифікує його проблему

Більше не потрібно відтворювати баг, щоб зрозуміти причину.

Розглянемо з прикладу, як це працює.

Кейс

Проблема: у додатку інтернет-магазину не працює функція «Додати до вибраного» - іконка не змінює колір при натисканні.

Рішення: менеджер проекту відкриває в LogScope сесію і дивиться, звідки йде проблема — з боку бекенду чи фронтенду. У події видно, що користувач натискає на іконку і в цей час бекенд не змінює значення поля. У цьому фронтенд відправляє серверу запит змінити значення. Отже, проблема на боці бекенда.

Разом: менеджер знає, який боці відбулася помилка і ставить завдання бэкенд-разработчику її виправити. Пошук проблеми зайняв 2 хвилини.

2. Сервіс показує контекст взаємодії користувача з продуктом — його навігацію та жести, що виконуються.

Це дозволяє виявити проблему, навіть якщо у коді немає винятків.

Кейс

Ситуація: по логах LogScope видно, що користувачі, відкриваючи додаток, роблять нетипові дії:

• перепідключаються з Wi-Fi на мобільний інтернет;
• повторно натискають ті самі кнопки;
• знову відкривають екрани.

Проблема: Зрозуміло, що сервіс не працює.

Рішення: з логів видно, що запити працюють коректно - сервер надає користувачеві потрібний контент.Але насправді сервер не відповідає - користувачеві висвічується помилка 500.

Подібний сценарій відбувається через упущення роботи backend-фахівців — вони неправильно налаштував роботу запитів на сервері. Така поведінка програми формально не вважається помилкою, тому не відображається в LogScope як виняток. Але проблема є, і її можна виявити тільки з поведінки користувачів, або після прямих скарг.

Разом: проблему вдалося знайти до того, як користувачі почали залишати негативні відгуки про неробочу програму в сторах.

3. Виявлення унікальних інцидентів, з яким зіткнувся лише один користувач

Кейс

Проблема: Користувач залишає додатку поганий відгук в App Store з текстом, що не може відкрити бонусну картку.

Рішення: за допомогою номера телефону користувача шукаємо його сесії в LogScope, вивчаємо їх та знаходимо причину помилки.

Разом: швидко знайшли проблему конкретного користувача. Після виправлення помилки клієнту можна надіслати смс за номером телефону з оповіщенням, що його запит вирішено. Це підвищить його лояльність.

Налагодження з LogScope вдвічі швидше і дешевше за класичний підхід

Можливості LogScope прискорюють налагодження в рази – більше не потрібно залучати кілька людей для вирішення однієї проблеми.

Як результат — пошук та усунення помилок стають дешевшими.

Вартість робіт скорочується за рахунок меншого залучення ресурсів - помилку може ідентифікувати будь-який член команди, не потрібно залучати тестувальників та розробників. Більше того, немає потреби витрачати час на спроби відтворити проблему. Вся інформація про дії користувачів та помилки наочно відображена в системі ліг.

Як працює LogScope

Після підключення LogScope збирає дані про роботу програми та групує їх на типи:

• події;
• помилки;
• дії користувача: натискання кнопок, зміну екранів, жести;
• мережеві запити;
• зміни змінних.

Завдяки цьому інформація про роботу програми не виглядає як шматок незрозумілого тексту – всі дані структуровані та їх можна фільтрувати. LogScope формує систему логів, які зручно читати людині без досвіду у програмуванні.

В адміністративній панелі з ліг збираються дашборди, в яких видно:

• всі пристрої, на яких відкривають програму;
• користувачі та їх ідентифікаційна інформація;
• сесії;
• події;
• проблеми.

Програмні помилки автоматично збираються в одній вкладці - "Баги". Їх можна виправити заздалегідь, не чекаючи на скарги користувачів.

Разом

LogScope в 2 рази знижує вартість та терміни налагодження програми. З його допомогою тестувальникам більше не потрібно відтворювати проблеми, а розробникам шукати винятки у коді. Менеджер проекту сам може знайти помилку та поставити завдання вирішити її.

Ще раз коротко про можливості сервісу:

• швидке виявлення помилок будь-яким спеціалістом продуктової команди;
• пошук унікальних проблем користувачів, навіть якщо помилка сталася лише на одному пристрої;
• аналіз поведінки користувачів, за допомогою якого можна запідозрити проблему, навіть якщо код не має винятків.

У цій статті ми розглянули лише частину переваг LogScope. У нових матеріалах розповімо про інші функції та плани на розвиток інструменту.

Як використовувати консоль браузера для виявлення помилок на сайті

Кожен браузер має консольну панель, за допомогою якої розробники проводять тестування веб-сайту.Вкладка Elements містить всю інформацію про HTML-файл, що інспектується: теги, таблиці стилів і т.д. Але в консолі є інші розділи, такі як Console, Sources, Network та інші.

Для яких цілей вони використовуються та як можна виявити помилки через консоль – поговоримо у сьогоднішній статті.

Як відкрити консоль на різних браузерах

Алгоритм запуску консолі (інспектора) у всіх браузерах ідентичний. Є два шляхи: перший – запуск через спеціальну клавішу на клавіатурі, другий – за допомогою функції «Подивитися код сторінки/елемента».

Наприклад, якщо скористатися в Chrome клавішею F12, відкриється додаткове вікно з консоллю.

Другий шлях полягає в перегляді коду поточної сторінки – для цього необхідно клікнути правою кнопкою миші по будь-якому елементу сайту і в меню вибрати опцію «Подивитися код». Зверніть увагу, що ця назва опції в Google Chrome, в інших браузерах вона може відрізнятися. Наприклад, в Яндексі функція називається «Дослідити елемент».

В результаті перед нами знову з'явиться вікно, в якому буде відкрито головну вкладку з кодом сторінки. Докладніше про неї ми ще поговоримо, а поки давайте подивимося, як виконується запуск консолі у браузері Safari на пристроях Mac.

Насамперед нам потрібно включити меню розробника – для цього переходимо до розділу «Налаштування» та відкриваємо підрозділ «Просунуті». Знаходимо пункт «Показати меню «Розробка у рядку меню» та відзначаємо його галочкою.

Тепер можна запустити консольне вікно – достатньо скористатися комбінацією клавіш Cmd+Opt+C.

Як бачите, запустити консоль у браузері – справа кількох секунд. Опція корисна, коли ви верстаєте новий сайт, виправляєте помилки, проводите різні тести.

Які вкладки є в консолі та за що вони відповідають

Консоль кожного браузера містить практично ідентичні вкладки з тим самим функціоналом, тому розглянемо кожен із блоків на прикладі веб-браузера Google Chrome.

Перед тим як перейти до аналізу кожної вкладки, давайте розглянемо основні елементи, які можуть бути корисні при роботі з консоллю. Перший – це увімкнення адаптивного режиму. Для цього необхідно відкрити консоль і у верхньому лівому куті натиснути кнопку у вигляді телефону/планшета.

В результаті ліва частина вікна буде трохи змінена: додадуться кнопки для вибору роздільної здатності під потрібний девайс. Наприклад, виберемо пристрій iPhone X, і сайт відразу ж виглядатиме так, як він виглядав би на телефоні.

Якщо вибрати опцію «Responsive», то ліворуч від сторінки з'явиться додаткова лінія, яку ми можемо тягнути ліворуч або праворуч – за допомогою неї можна підібрати необхідну роздільну здатність сторінки. Також налаштувати роздільну здатність ми можемо і у верхній частині вікна.

І ще одна опція, яка може бути корисною – зміна розташування консольної панелі. Щоб їй скористатися, необхідно у верхній правій частині натиснути кнопку у вигляді троєточки і в рядку «Dock side» змінити орієнтацію. Доступні положення: праворуч, ліворуч, знизу в окремому вікні.

На цьому стандартний набір функцій консольної панелі закінчується. Давайте подивимося, які в ній є вкладки та за що вони відповідають.

Elements

Основний компонент для верстальників. Він включає всю інформацію про відкриту HTML-сторінку. Тут ми можемо не тільки переглянути поточні теги та атрибути, але й змінити їх – у такому випадку відбудеться автоматична зміна дизайну на сторінці. Якщо її оновити, то все повернеться на свої місця.Також відкритий доступ до перегляду CSS та інших елементів – для цього у правій частині розділу йдуть вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties та Accessibility.

Console

Ще одна найважливіша вкладка для верстальників - Console. В ній ми можемо дізнатися інформацію про поточні помилки на сайті, подивитися JavaScript, що виконується, якщо він виведений в консоль за допомогою методу console.log, і багато іншого.

Якщо вам потрібно очистити інформацію, виведену в консоль, зробити це легко. Достатньо у верхньому лівому куті натиснути кнопку у вигляді знака заборони.

Також в даній консолі ми можемо переглянути інформацію про помилки плагіна, скористатися пошуком за словом або фразою, а також встановити різні фільтри на інформацію, що відображається.

Sources

Цей розділ відкриває доступ до всієї ієрархії сайту: тут ми можемо подивитися, які використовуються картинки, файли CSS, шрифти та інше.

Сама вкладка, як бачите, поділена на 3 частини. У першій міститься дерево ієрархії файлів, які належать до сайту. Друга призначена для перегляду вмісту цих файлів та виконання їх налагодження. Для її запуску потрібно скористатися останнім вікном.

Network

З назви вже зрозуміло, що цей розділ призначений для відстеження трафіку. Його основна функція – запис мережевого журналу. Можна виявити час завантаження та обробки різних файлів, щоб згодом оптимізувати сторінку.

Performance

Панель відображає таймлайн використання мережі, виконання JavaScript-коду та завантаження пам'яті. Після початкової побудови графіків будуть доступні докладні дані про виконання коду та весь життєвий цикл сторінки.

Memory

У цій вкладці можна відстежувати використання пам'яті веб-програмою або сторінкою. Ми можемо дізнатися, де витрачається багато ресурсів – цю інформацію можна використовувати для оптимізації коду.

Application

Даний розділ дозволяє перевіряти та очищати всі завантажені ресурси. Ми можемо взаємодіяти з HTML5 Database, Local Storage, Cookies, AppCache та іншими елементами.

Основна особливість настройки – чищення куки. Якщо вам необхідно виконати цю процедуру, просто відкрийте в лівій частині розділ «Cookies» і натисніть праворуч на значок заборони. Куки для вибраного посилання будуть очищені.

Security

Розділ Security відображає інформацію про безпечний протокол. Якщо його немає, то буде повідомлено, що ця сторінка є небезпечною. Крім того, можна отримати ще деякі відомості про:

• перевірки сертифіката – чи підтвердив сайт свою автентичність TLS;
• tls-з'єднанні – чи використовує сайт найсучасніші безпечні протоколи;
• безпеки другорядних джерел.

Lighthouse

Останній розділ є інструментом аудиту з відкритим вихідним кодом. Завдяки цьому розробники можуть підвищити продуктивність та доступність своїх веб-сайтів.

Виявлення основних помилок

При виникненні можливих помилок ми одразу будемо про це повідомлено у вкладці Console – у ній з'явиться інформація з червоним рядком тексту. Розглянемо найпоширеніші помилки, які можуть виникати в Google Chrome, Safari та Internet Explorer:

1. Uncaught TypeError: Cannot read property. Помилка виникає в Хром при виклику методу або читанні властивості для невизначеного об'єкта.
2. TypeError: 'undefined' is not an object (evaluating). Аналогічна попередня помилка, але тільки в Safari.
3. TypeError: null is not an object (evaluating). Виникає у Сафарі під час виклику методу чи читанні властивості для нульового об'єкта.
4. (unknown):Scripterror. Визначає помилку скрипта.
5. TypeError: Object doesn’t support property. Зустрічається в Internet Explorer – виникає під час виклику певного методу.
6. TypeError: 'undefined' is not a function. Вказує на невизначену функцію (Chrome).
7. Uncaught RangeError: Maximum call stack. Помилка Chrome, що означає перевищення максимального розміру стека.
8. TypeError: Cannot read property 'length'. Неможливо прочитати властивість.
9. Uncaught TypeError: Cannot set property. Виникає, коли скрипт не може отримати доступу до невизначеної змінної.
10. ReferenceError: event is not defined. Позначає неможливість доступу до змінної, яка не входить до поточної області.

Усунення основних та інших помилок може бути проблематичним. Якщо ви вважаєте, що вони сильно заважають продуктивності вашого сайту, рекомендуємо пошукати інформацію про них в офіційній документації браузера або на тематичних форумах.

Висновок

Іноді консоль підходить не тільки верстальникам - вона буває корисна для найпростіших дій. Наприклад, щоб подивитися мобільну версію, скачати картинку або дізнатися шрифт, що використовується на сайті. Загалом застосовувати консольне вікно можна в різних ситуаціях - як для перегляду вмісту сайту, так і для аналізу споживання пам'яті.

Вивчайте та знаходите свої застосування цього інструменту – він може багато чого. Успіхів!