开发者社区> 小鲜女他爸> 正文

ionic3日志组件

简介: 背景 我们在开发时都很喜欢使用console.*来打印出日志信息以方便我们调试代码,但是在上线时肯定是需要去除所有的console;但是大多数情况下开发者都会忘记移除console输出,这会带来生产日志风险。
+关注继续查看

背景

我们在开发时都很喜欢使用console.*来打印出日志信息以方便我们调试代码,但是在上线时肯定是需要去除所有的console;但是大多数情况下开发者都会忘记移除console输出,这会带来生产日志风险。

编写

  1. 新增一个日志组件:logger

ionic g provier logger
  1. 修改logger.ts的内容如下:
import {Injectable} from '@angular/core';
import {Constants} from "../Constants";

@Injectable()
export class Logger {

  constructor() {

  }

  /**
   * Logs messages or objects  with the debug level.
   * Works the same as console.log().
   */
  public log(...objects: any[]) {
    this.log_real(console.log, LogLevel.Debug, objects);
  }

  /**
   * Logs messages or objects  with the debug level.
   * Works the same as console.debug().
   */
  public debug(...objects: any[]) {
    this.log_real(console.log, LogLevel.Debug, objects);
  }

  /**
   * Logs messages or objects  with the info level.
   * Works the same as console.info().
   */
  public info(...objects: any[]) {
    this.log_real(console.info, LogLevel.Info, objects);
  }

  /**
   * Logs messages or objects  with the warning level.
   * Works the same as console.warn().
   */
  public warn(...objects: any[]) {
    this.log_real(console.warn, LogLevel.Warning, objects);
  }

  /**
   * Logs messages or objects  with the error level.
   * Works the same as console.error().
   */
  public error(...objects: any[]) {
    this.log_real(console.error, LogLevel.Error, objects);
  }

  protected async log_real(func: Function, level: LogLevel, objects: any[]) {
    const env = Constants.ENVIRONMENT || 'development';
    if (env !== 'production') {
      func.apply(console, objects);
    }
  }
}

export enum LogLevel {
  Error,
  Warning,
  Info,
  Debug,
}
  1. 在app.module.ts中引入Logger组件:
import {Logger} from "../common/logger/logger";
......
  providers: [
    Logger, 
]
......

使用:

  1. 在Constants中新增一个变量:
export const Constants = {
  ENVIRONMENT: 'development',//app环境,开发时为development,正式发布时需求注掉或者改为production
}
  1. 在需要打印日志的地方引用
import {Injectable} from "@angular/core";
import {RequestPreviewHandler} from "../RequestPreviewHandler";
import {HttpRequest} from "@angular/common/http";
import {Logger} from "../../../../common/logger/logger";

@Injectable()
export class DefaultRequestPreviewHandler extends RequestPreviewHandler {
  constructor(private logger: Logger) {
    super();
  }


  handle(request: HttpRequest<any>): HttpRequest<any> {
    this.logger.warn("未注入自定义请求前置处理类,使用默认前置处理");
    return request;
  }
}

效果与使用console一致,如下:


img_53448d43a57329fe051c784c61099afd.png
logger.png
  1. 生产发版
    只需要将Constants中ENVIRONMENT的值为production即可去除所有日志输出
export const Constants = {
  ENVIRONMENT: 'production',//app环境,开发时为development,正式发布时需求注掉或者改为production
}
;

避免了还需要手动删除console相关代码的问题。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
日志组件logback介绍及配置使用方法
转载于:http://sunney2010.iteye.com/blog/1404729 一、logback的介绍 Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块:logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-cla
2350 0
平台日志组件使用介绍
平台日志组件使用介绍 需要导入的类: import com.frameworkset.platform.sysmgrcore.entity.Organization; import com.
579 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
18224 0
ThinkPHP 接入 SeasLog 日志组件
【背景】 为实现开发前期联调bug 定位、线上bug快速定位、快速响应,遂暂为斐讯路由后台 Api 模块添加日志记录支持。 【SeasLog 简介】 1. 国产log组件 2. 简洁配置 3.应用简单、性能强劲 4.分模块、分级别记录日志。
1092 0
Ionic如何创建自定义展开标题组件
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/77806847 自定义组件 我开始构建一个简单的实现,最后一个自定义组件如下所示: 自动获取标题高度,然后当标题滚动时,可扩展标题缩减开始被切断的任何元素将会消失(并退回到再次出现空间的位置)。
716 0
日志组件slf4j介绍及配置详解
1 基本介绍 每一个Java程序员都知道日志对于任何一个Java应用程序,尤其是服务端程序是至关重要的,而很多程序员也已经熟悉各种不同的日志库如java.util.logging、Apache log4j、logback。但如果你还不知道SLF4J(Simple logging facade for Java)的话,那么是时候去在你项目中学习使用SLF4J了。 SLF4J
3480 0
8
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载