解决痛点

前后端联调，获取参数不是服务端想要的，或者入参有必填字段，微信小程序在异常情况下没有获取到，查看后端日志繁琐，不能快速排查及定位问题。

解决后效果

核心代码

const logManager = wx.getRealtimeLogManager();
const logger = logManager.tag("API"); // 定义标签

logger.error("url", url as string);  // 打印出错地址
logger.error("msg", msg); // 打印出错信息
logger.error("exception", exception); // 打印异常信息
logger.error("headers", headers as Record<string, any>); // 打印headers信息
logger.error("params", params); // 打印参数信息

解决过程（微信开发工具中不会上传日志）

封装统一请求函数 src/utils/request.ts

import axios from "axios";
const { VUE_APP_api, VUE_APP_uid, VUE_APP_systemId } = process.env;
import { uuid } from "@/utils/utils";

const service = axios.create({
  baseURL: VUE_APP_api,
  withCredentials: true,
  headers: {
    appId: wx.getAccountInfoSync().miniProgram.appId,  // 获取当前小程序appid
    systemId: VUE_APP_systemId,
    "Cache-Control": "no-cache",
  },
});
const logManager = wx.getRealtimeLogManager();
const logger = logManager.tag("API"); // 定义标签

service.interceptors.request.use(
  (config) => {
    const miniprogram_uid = uni.getStorageSync(VUE_APP_uid) || uuid();
    config.headers = {
      ...config.headers,
      Cookie: `${VUE_APP_uid}=${miniprogram_uid}`,
    };

    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response) => {
    const {
      data,
      config: { url, params, headers },
    } = response;
    VUE_APP_casUid === "_cas_uid" && console.log("response", response);
    const { msg, code, exception } = data;
    // 没有获取到登录信息
    if (code == 10011) {
      uni.reLaunch({ url: `/pages/login/login?retUrl=${encodeURIComponent("/pages/index/index")}` });
    }
    // code不为0，出现异常信息
    if (code && code != 10011) {
      logger.error("url", url as string);  // 打印出错地址
      logger.error("msg", msg); // 打印出错信息
      logger.error("exception", exception); // 打印异常信息
      logger.error("headers", headers as Record<string, any>); // 打印headers信息
      logger.error("params", params); // 打印参数信息
      uni.showToast({
        icon: "none",
        title: msg,
      });
    }

    return data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default service;

使用方法

src/api/goods.ts

import request from "@/utils/request";

/**
 * 获取商品列表
 * @link https://xxx.xxx.com/goods.list
 * @param size 每页显示条目个数
 * @param name 商品名称
 */
export async function getGoodsList(params = {}): Promise<IResponse> {
  return request.get("nxin.qd.mob.dh.goods.list/1.0", {
    params,
  });
}

src/type/api.d.ts

/**
 * 接口响应
 * @param msg 信息
 * @param code 后台码
 * @param data 返回数据
 * @param exception 异常信息
 */
interface IResponse<T = any> {
  msg: string;
  code: number;
  data: T;
  exception: string;
}

src/pages/goods/list.ts

import { getGoodsList } from "@/api/goods";
created () {
    getGoodsList({size: 15, name: "苹果"}).then((res) => {
       const { code, data } = res;
       if (!code) {
          // 业务代码
       }
    })
}

微信小程序，实时日志，getRealtimeLogManager汇总

解决痛点

解决后效果

核心代码

解决过程（微信开发工具中不会上传日志）

相关资料