如何为React RTK的所有API请求添加Firebase性能监控中间件？

实现思路 #

RTK Query允许通过包装baseQuery的方式为所有API请求添加自定义逻辑，我们可以基于fetchBaseQuery封装一层，在请求生命周期中嵌入Firebase Performance的追踪逻辑，这样就能仅针对当前RTK API实例的所有请求启用监控。

具体实现步骤 #

1. 导入依赖 #

确保已安装Firebase及Performance模块，然后导入所需工具：

import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { getPerformance, trace } from 'firebase/perf';

2. 封装带性能监控的baseQuery #

创建一个包装函数，将Firebase追踪逻辑注入到请求的开始和结束阶段：

// 封装带Firebase性能监控的baseQuery
const createPerfBaseQuery = (baseOptions) => {
  const originalBaseQuery = fetchBaseQuery(baseOptions);

  return async (args, api, extraOptions) => {
    // 解析请求参数，获取URL和请求方法
    const requestDetails = typeof args === 'string' 
      ? { url: args, method: 'GET' } 
      : { ...args, method: args.method || 'GET' };
    
    const { url, method } = requestDetails;
    // 初始化Firebase性能追踪实例
    const perfInstance = getPerformance();
    // 创建HTTP请求追踪，命名格式为"HTTP 请求方法 接口路径"
    const httpTrace = trace(perfInstance, `HTTP ${method} ${url}`);

    try {
      // 开始追踪
      await httpTrace.start();
      // 为追踪添加自定义属性，方便后续分析
      httpTrace.putAttribute('request_method', method);
      httpTrace.putAttribute('request_url', url);

      // 执行原始的API请求
      const response = await originalBaseQuery(args, api, extraOptions);

      // 根据请求结果标记追踪状态
      if (response.error) {
        httpTrace.putAttribute('request_status', 'failure');
        httpTrace.putAttribute('error_code', response.error.status || 'unknown');
      } else {
        httpTrace.putAttribute('request_status', 'success');
        httpTrace.putAttribute('response_code', response.data?.status || 200);
      }

      return response;
    } finally {
      // 无论请求成功还是失败，都必须停止追踪
      await httpTrace.stop();
    }
  };
};

3. 替换原baseQuery #

将你的RTK API实例中的baseQuery替换为上面封装的createPerfBaseQuery：

export const api = createApi({
  reducerPath: 'api',
  // 使用带性能监控的baseQuery
  baseQuery: createPerfBaseQuery({
    baseUrl: Config.API_ENDPOINT,
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as RootState).app.token;

      if (token) {
        headers.set('Authorization', 'Bearer ' + token);
      }

      return headers;
    },
  }),
  tagTypes: ['AuthToken'],
  endpoints: (builder) => ({
    auth: builder.query<BaseResponse<AuthResult>, any>({
      query: () => ({
        url: '/auth/token',
        method: 'POST',
        responseHandler: (response) => response.json(),
      }),
      providesTags: ['AuthToken'],
    }),
  }),
});

注意事项 #

• 确保已正确初始化Firebase项目并启用Performance Monitoring功能
• 追踪的名称和自定义属性可根据业务需求调整，方便在Firebase控制台筛选分析请求
• finally块保证了即使请求抛出异常，追踪也能正常停止，避免内存泄漏
• 该方式仅作用于当前RTK API实例的所有请求，不会影响项目中的其他HTTP请求或Redux逻辑

内容的提问来源于stack exchange，提问作者Dirk