Question

这是我的第一个React.js项目，我在此tutorial之后通过npm debug添加了日志记录。

我的目标是使程序可以做的所有事情都以人类可读的方式记录下来，以便在遇到错误时可以快速诊断出来。该应用程序具有许多由CMS中的内容决定的树逻辑（该逻辑也在CMS中），因此，随着内容的变化和变得越来越复杂，调试必须清晰。

我的问题是，在记录所有内容之后，流太平坦了。很难知道什么时候完成大任务（以及哪些任务需要完成才能完成大任务）。我的日志现在看起来像这样：

My logging output right now.

我应该使用另一个日志系统吗？还是有某种DevOps或Analytics（分析）工具会根据它们是否嵌套功能自动为日志提供更好的组织？

谢谢！

Answer 1

通过使用console.group和console.groupEnd();在控制台中开始和结束组，我能够解决此问题。我最终完成了教程here。

我现在有了这个组件：

const COLOURS = {
  trace: '#aaa',
  info: 'blue',
  warn: 'pink',
  error: 'red'
};

class Log {
  generateMessage(level, message, source, group) {
    var textColor = COLOURS[level];

    if(!group){
      if(typeof message === "object"){
        console.log("This is an object")
      } else {
        console.log("%c"+source+"  ||  %c"+message, "color:#000;", "color:"+textColor+";")
      }

    } else if(group === "start") {
      console.group("%c"+source+"  ||  %c"+message, "color:#000;", "color:"+textColor+";")
    } else if(group === "end"){
      console.groupEnd();
    }

  }

  trace(message, source, group) {
    return this.generateMessage('trace', message, source, group);
  }

  info(message, source, group) {
    return this.generateMessage('info', message, source, group);
  }

  warn(message, source, group) {
    return this.generateMessage('warn', message, source, group);
  }

  error(message, source, group) {
    return this.generateMessage('error', message, source, group);
  }
}

export default new Log();

，然后，如果我想开始一个新的日志分组，可以使用（例如）：

Log.trace("Lesson data successful retrieved from Contentful.", "Lesson.js", "start")

如果要结束论坛，可以使用：

Log.trace(null,null,"end")

这将导致我的控制台现在看起来像这样：my console now with grouped messages

使用console.log进行分层日志记录

1 个答案: