Angular HTTP请求的日志记录与监控

Angular HTTP 请求简介

在现代 Web 应用开发中，与后端服务器进行数据交互是必不可少的环节。Angular 作为一款流行的前端框架，提供了强大的 @angular/common/http 模块来处理 HTTP 请求。这个模块基于 RxJS 构建，使得开发者能够以响应式编程的方式处理 HTTP 操作，例如发送 GET、POST、PUT、DELETE 等请求，并处理服务器返回的响应。

以下是一个简单的 GET 请求示例：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/posts/1')
     .subscribe((response: any) => {
        console.log(response);
      });
  }
}

在上述代码中，我们通过依赖注入将 HttpClient 引入组件，然后在 ngOnInit 生命周期钩子函数中发起一个 GET 请求到指定的 URL。subscribe 方法用于处理服务器返回的响应，这里我们简单地将响应打印到控制台。

为什么需要日志记录与监控

1. 调试与故障排查 当应用出现问题，比如无法正确获取数据或者服务器返回错误状态码时，详细的日志记录可以帮助开发者快速定位问题。通过记录请求的 URL、请求头、请求体以及响应的状态码、响应体等信息，能够清晰地了解数据交互过程中发生了什么。例如，如果服务器返回 401 未授权错误，查看日志中的请求头是否包含正确的认证信息，有助于解决认证相关问题。
2. 性能优化 监控 HTTP 请求的性能指标，如请求的发起时间、响应时间等，可以帮助优化应用性能。如果发现某个请求响应时间过长，可能是服务器端性能问题，也可能是网络问题，通过监控可以针对性地进行优化，例如对频繁的请求进行合并，或者优化服务器端查询语句。
3. 安全审计 在一些对安全要求较高的应用中，记录 HTTP 请求可以用于安全审计。例如，记录所有的 POST 请求，检查请求体中是否包含敏感信息被非法传输，或者监控异常的请求模式，防范恶意攻击。

HTTP 请求的日志记录

1. 手动记录日志 最简单的方式是在每个 HTTP 请求的 subscribe 方法中手动记录日志。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/posts/1')
     .subscribe((response: any) => {
        console.log('GET Request to https://jsonplaceholder.typicode.com/posts/1 - Success:', response);
      }, (error: any) => {
        console.log('GET Request to https://jsonplaceholder.typicode.com/posts/1 - Error:', error);
      });
  }
}

在这个例子中，我们在成功和错误回调中分别记录了请求的相关信息。这种方式虽然简单直接，但如果应用中有大量的 HTTP 请求，会导致代码重复且难以维护。

2. 使用拦截器记录日志 Angular 的 HTTP 拦截器是一种更优雅的方式来记录日志。拦截器可以在请求发送前和响应返回后对请求和响应进行处理。 首先，创建一个拦截器类：

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

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('Outgoing Request:', req.url, req.headers, req.body);
    return next.handle(req).pipe(
      tap((event: HttpEvent<any>) => {
        if (event.type === 4) { // HttpResponse
          console.log('Incoming Response:', event.status, event.body);
        }
      }, (error: any) => {
        console.log('Incoming Response - Error:', error.status, error.error);
      })
    );
  }
}

在上述代码中，intercept 方法接收 HttpRequest 和 HttpHandler。我们首先记录了即将发出的请求的 URL、请求头和请求体。然后通过 next.handle(req) 将请求传递给下一个处理器，并使用 tap 操作符在响应返回时记录响应状态码和响应体（如果是成功响应），或者记录错误状态码和错误信息（如果是错误响应）。

接下来，需要将这个拦截器注册到应用的模块中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { LoggingInterceptor } from './logging.interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoggingInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

通过在 providers 数组中配置 HTTP_INTERCEPTORS，我们将 LoggingInterceptor 注册为应用的 HTTP 拦截器。multi: true 表示可以有多个拦截器。这样，应用中的所有 HTTP 请求和响应都会经过这个拦截器进行日志记录。

日志记录的详细内容

1. 请求相关信息

   • URL：记录请求发送到的完整 URL，包括查询参数。这有助于确定请求的目标资源，例如 https://api.example.com/users?page=1&limit=10。
   • 请求方法：明确是 GET、POST、PUT、DELETE 等哪种请求方法，不同的方法有不同的语义和用途，例如 POST 通常用于创建新资源，DELETE 用于删除资源。
   • 请求头：请求头包含了很多重要信息，如认证令牌（Authorization 头）、内容类型（Content - Type）等。记录请求头可以帮助排查认证问题或者确保请求的数据格式正确。例如，Content - Type: application/json 表示请求体是 JSON 格式的数据。
   • 请求体：对于 POST、PUT 等包含请求体的请求，记录请求体内容可以帮助验证发送到服务器的数据是否正确。例如，在注册用户时，请求体可能包含用户名、密码等信息，记录下来可以检查是否存在数据错误。

2. 响应相关信息

   • 状态码：HTTP 状态码表示了服务器对请求的处理结果，如 200 表示成功，404 表示资源未找到，500 表示服务器内部错误等。通过记录状态码，可以快速判断请求是否成功，以及失败的大致原因。
   • 响应头：响应头可能包含缓存控制信息（Cache - Control）、内容长度（Content - Length）等。例如，Cache - Control: max - age = 3600 表示响应可以被缓存 1 小时，了解这些信息有助于优化应用的缓存策略。
   • 响应体：响应体是服务器返回的数据，记录响应体可以查看实际获取到的数据，验证数据结构和内容是否符合预期。在处理用户登录请求时，响应体可能包含用户的认证令牌等重要信息。

HTTP 请求的监控

1. 监控请求性能指标
   • 请求发起时间：可以在拦截器中记录请求发起的时间戳，例如使用 Date.now()。在 intercept 方法开始处记录：

const startTime = Date.now();

- **响应时间**：在接收到响应时，再次获取时间戳，并计算与请求发起时间的差值，得到响应时间。

return next.handle(req).pipe(
  tap((event: HttpEvent<any>) => {
    if (event.type === 4) { // HttpResponse
      const endTime = Date.now();
      const responseTime = endTime - startTime;
      console.log('Response Time:', responseTime, 'ms');
    }
  }, (error: any) => {
    const endTime = Date.now();
    const responseTime = endTime - startTime;
    console.log('Response Time (Error):', responseTime, 'ms');
  })
);

通过监控响应时间，可以发现哪些请求耗时较长，进而分析原因，如网络延迟、服务器性能瓶颈等。

2. 监控请求频率 可以使用 RxJS 的 scan 操作符来监控一定时间内的请求频率。首先，在拦截器类中添加一个计数器和一个时间窗口变量：

private requestCounter = 0;
private timeWindow = 60 * 1000; // 1 minute
private timer: any;

然后，在 intercept 方法中：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  this.requestCounter++;
  if (!this.timer) {
    this.timer = setInterval(() => {
      console.log('Requests in the last minute:', this.requestCounter);
      this.requestCounter = 0;
    }, this.timeWindow);
  }
  return next.handle(req);
}

这里，我们在每次请求经过拦截器时增加计数器。通过 setInterval 定时打印过去一分钟内的请求数量，并重置计数器。这样可以监控应用对服务器的请求频率，避免过高的频率导致服务器负载过大。

3. 监控异常请求 在拦截器的错误处理部分，可以对异常请求进行监控和统计。例如，统计不同错误状态码出现的次数：

private errorCounter: { [status: number]: number } = {};
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(req).pipe(
    tap((event: HttpEvent<any>) => {
      // 正常响应处理
    }, (error: any) => {
      if (!this.errorCounter[error.status]) {
        this.errorCounter[error.status] = 1;
      } else {
        this.errorCounter[error.status]++;
      }
      console.log('Error Status Count:', this.errorCounter);
    })
  );
}

通过这种方式，可以了解应用中哪些错误状态码出现较为频繁，如 404 未找到错误过多，可能表示前端路由或者后端资源管理存在问题。

日志存储与分析

1. 日志存储
   • 本地存储：对于开发和测试阶段，可以将日志存储在浏览器的本地存储中。Angular 可以使用 localStorage API 来实现。例如，在拦截器中，将日志信息 JSON 字符串化后存储：

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

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const log = {
      request: {
        url: req.url,
        method: req.method,
        headers: req.headers.toString(),
        body: req.body
      }
    };
    const existingLogs = JSON.parse(localStorage.getItem('http - logs') || '[]');
    existingLogs.push(log);
    localStorage.setItem('http - logs', JSON.stringify(existingLogs));
    return next.handle(req).pipe(
      tap((event: HttpEvent<any>) => {
        if (event.type === 4) { // HttpResponse
          const responseLog = {
            status: event.status,
            body: event.body
          };
          const existingResponseLogs = JSON.parse(localStorage.getItem('http - response - logs') || '[]');
          existingResponseLogs.push(responseLog);
          localStorage.setItem('http - response - logs', JSON.stringify(existingResponseLogs));
        }
      }, (error: any) => {
        const errorLog = {
          status: error.status,
          error: error.error
        };
        const existingErrorLogs = JSON.parse(localStorage.getItem('http - error - logs') || '[]');
        existingErrorLogs.push(errorLog);
        localStorage.setItem('http - error - logs', JSON.stringify(existingErrorLogs));
      })
    );
  }
}

这种方式方便在本地调试时查看日志，但本地存储容量有限，且在生产环境中不太适用，因为用户可能会清除本地存储数据。 - 服务器端存储：在生产环境中，通常将日志发送到服务器端进行存储。可以创建一个专门的日志 API，在拦截器中通过 HTTP POST 请求将日志数据发送到该 API。

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

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  constructor(private http: HttpClient) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const log = {
      request: {
        url: req.url,
        method: req.method,
        headers: req.headers.toString(),
        body: req.body
      }
    };
    this.http.post('/api/logs', log).subscribe();
    return next.handle(req).pipe(
      tap((event: HttpEvent<any>) => {
        if (event.type === 4) { // HttpResponse
          const responseLog = {
            status: event.status,
            body: event.body
          };
          this.http.post('/api/logs/response', responseLog).subscribe();
        }
      }, (error: any) => {
        const errorLog = {
          status: error.status,
          error: error.error
        };
        this.http.post('/api/logs/error', errorLog).subscribe();
      })
    );
  }
}

服务器端可以使用数据库（如 MongoDB、MySQL 等）来存储这些日志数据，以便长期保存和分析。

2. 日志分析
   • 基于规则的分析：可以制定一些规则来分析日志。例如，如果某个请求的响应时间超过设定的阈值（如 500ms），标记为慢请求，并发送通知给开发人员。在服务器端，可以通过定时任务或者实时处理程序来检查日志数据并应用这些规则。
   • 数据可视化：使用数据可视化工具（如 Grafana、Kibana 等）将日志数据展示为图表，更直观地分析趋势和问题。例如，可以绘制请求响应时间的折线图，观察性能变化；或者绘制不同错误状态码的柱状图，了解错误分布情况。通过数据可视化，可以快速发现异常情况和潜在的性能瓶颈。

处理敏感信息

在记录 HTTP 请求和响应日志时，可能会涉及到敏感信息，如用户密码、信用卡号等。需要采取措施避免这些敏感信息被记录或者泄露。

1. 数据掩码 对于请求体和响应体中的敏感信息，可以进行数据掩码处理。例如，对于密码字段，可以将其替换为掩码字符（如 ****）。在拦截器中，可以使用正则表达式来进行替换：

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

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  private maskSensitiveData(data: any): any {
    if (typeof data ==='string') {
      return data.replace(/password=\w+/g, 'password=****');
    } else if (typeof data === 'object') {
      for (const key in data) {
        if (Object.prototype.hasOwnProperty.call(data, key)) {
          if (key === 'password') {
            data[key] = '****';
          } else if (typeof data[key] === 'object') {
            data[key] = this.maskSensitiveData(data[key]);
          }
        }
      }
    }
    return data;
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const maskedBody = this.maskSensitiveData(req.body);
    const log = {
      request: {
        url: req.url,
        method: req.method,
        headers: req.headers.toString(),
        body: maskedBody
      }
    };
    console.log('Outgoing Request:', log);
    return next.handle(req).pipe(
      tap((event: HttpEvent<any>) => {
        if (event.type === 4) { // HttpResponse
          const maskedResponse = this.maskSensitiveData(event.body);
          console.log('Incoming Response:', event.status, maskedResponse);
        }
      }, (error: any) => {
        const maskedError = this.maskSensitiveData(error.error);
        console.log('Incoming Response - Error:', error.status, maskedError);
      })
    );
  }
}

在上述代码中，maskSensitiveData 方法会递归地检查对象和字符串中的敏感字段，并进行掩码处理。

2. 条件记录 可以根据环境变量或者配置参数来决定是否记录某些敏感信息。例如，在开发环境中可以记录完整的请求和响应数据以便调试，但在生产环境中只记录非敏感信息。

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

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  private shouldLogSensitive = false; // 假设通过配置文件或者环境变量获取这个值

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const log = {
      request: {
        url: req.url,
        method: req.method,
        headers: req.headers.toString()
      }
    };
    if (this.shouldLogSensitive) {
      log.request.body = req.body;
    }
    console.log('Outgoing Request:', log);
    return next.handle(req).pipe(
      tap((event: HttpEvent<any>) => {
        if (event.type === 4) { // HttpResponse
          const responseLog = {
            status: event.status
          };
          if (this.shouldLogSensitive) {
            responseLog.body = event.body;
          }
          console.log('Incoming Response:', responseLog);
        }
      }, (error: any) => {
        const errorLog = {
          status: error.status
        };
        if (this.shouldLogSensitive) {
          errorLog.error = error.error;
        }
        console.log('Incoming Response - Error:', errorLog);
      })
    );
  }
}

通过这种方式，可以在保证调试便利性的同时，确保生产环境中的数据安全。

与其他工具集成

1. 与监控系统集成
   • Prometheus 和 Grafana：Prometheus 是一款流行的监控系统，Grafana 用于数据可视化。可以将 Angular 应用中的 HTTP 请求监控指标（如请求响应时间、请求频率等）发送到 Prometheus 进行存储，然后在 Grafana 中创建仪表盘展示这些指标。 首先，在 Angular 应用中使用 @promster/angular 库来发送指标数据。安装该库后，在拦截器中发送指标：

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

@Injectable()
export class MonitoringInterceptor implements HttpInterceptor {
  constructor(private promster: PromsterService) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const startTime = Date.now();
    const requestMetric = this.promster.counter({
      name: 'http_requests_total',
      help: 'Total number of HTTP requests',
      labelNames: ['method', 'url']
    });
    requestMetric.inc({ method: req.method, url: req.url });
    return next.handle(req).pipe(
      tap((event: HttpEvent<any>) => {
        if (event.type === 4) { // HttpResponse
          const endTime = Date.now();
          const responseTimeMetric = this.promster.histogram({
            name: 'http_response_time_seconds',
            help: 'Response time of HTTP requests in seconds',
            labelNames: ['method', 'url','status']
          });
          responseTimeMetric.observe((endTime - startTime) / 1000, { method: req.method, url: req.url, status: event.status });
        }
      }, (error: any) => {
        const endTime = Date.now();
        const errorMetric = this.promster.counter({
          name: 'http_request_errors_total',
          help: 'Total number of HTTP request errors',
          labelNames: ['method', 'url','status']
        });
        errorMetric.inc({ method: req.method, url: req.url, status: error.status });
      })
    );
  }
}

然后，配置 Prometheus 来收集这些指标数据，并在 Grafana 中创建仪表盘展示图表，如请求频率趋势图、响应时间分布直方图等。 2. 与日志管理系统集成 - Elasticsearch 和 Kibana：Elasticsearch 是一个分布式搜索和分析引擎，Kibana 用于可视化 Elasticsearch 中的数据。可以将 Angular 应用的 HTTP 日志发送到 Elasticsearch，然后在 Kibana 中进行搜索、分析和可视化。 在 Angular 应用中，可以使用 @elastic/elasticsearch 库来发送日志数据。例如，在拦截器中：

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

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  constructor(private elasticsearch: ElasticsearchService) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const log = {
      request: {
        url: req.url,
        method: req.method,
        headers: req.headers.toString(),
        body: req.body
      }
    };
    this.elasticsearch.indexLog(log).subscribe();
    return next.handle(req).pipe(
      tap((event: HttpEvent<any>) => {
        if (event.type === 4) { // HttpResponse
          const responseLog = {
            status: event.status,
            body: event.body
          };
          this.elasticsearch.indexLog(responseLog).subscribe();
        }
      }, (error: any) => {
        const errorLog = {
          status: error.status,
          error: error.error
        };
        this.elasticsearch.indexLog(errorLog).subscribe();
      })
    );
  }
}

ElasticsearchService 负责与 Elasticsearch 进行交互，将日志数据索引到 Elasticsearch 中。在 Kibana 中，可以创建索引模式、可视化图表和搜索查询，以便更好地管理和分析日志数据。

通过与这些工具集成，可以进一步提升对 Angular HTTP 请求的监控和管理能力，为应用的稳定运行和性能优化提供有力支持。