Логирование и аналитика

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

Логирование с помощью сервисов

Создание собственного сервиса логирования позволяет унифицировать вывод сообщений в консоль, отправку на сервер или сохранение в локальное хранилище.

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LoggerService {
  log(message: string) {
    console.log(`[LOG]: ${message}`);
  }

  warn(message: string) {
    console.warn(`[WARN]: ${message}`);
  }

  error(message: string) {
    console.error(`[ERROR]: ${message}`);
  }
}

Применение через внедрение зависимостей позволяет легко интегрировать логирование в любой компонент:

constructor(private logger: LoggerService) {}

ngOnInit() {
  this.logger.log('Компонент инициализирован');
}

Перехватчики HTTP для аналитики

Angular предоставляет возможность перехватывать все HTTP-запросы через HttpInterceptor. Это позволяет автоматически фиксировать статистику запросов, время выполнения и ошибки.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class AnalyticsInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const start = performance.now();
    return next.handle(req).pipe(
      tap({
        next: () => console.log(`Запрос к ${req.url} выполнен за ${performance.now() - start}ms`),
        error: () => console.error(`Ошибка запроса к ${req.url}`)
      })
    );
  }
}

Интеграция с внешними аналитическими системами

Angular позволяет подключать Google Analytics, Mixpanel или Yandex.Metrika через сервисы. Основной подход заключается в том, чтобы все события интерфейса и маршрутизации централизованно передавались в аналитическую систему через единый сервис.

trackPageView(url: string) {
  gtag('event', 'page_view', { page_path: url });
}

События кнопок, форм и пользовательских действий фиксируются аналогичным образом, что позволяет строить детальную статистику поведения пользователей.

Рекомендации по производительности

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

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

Оглавление