Иерархическое ведение журнала с помощью console.info
Это мой первый проект React.js, и я добавил ведение журнала через отладку npm после этого руководство.
Моя цель — иметь удобочитаемый журнал всего, что делает программа, чтобы, когда я сталкиваюсь с ошибкой, ее можно было быстро диагностировать. Приложение имеет много древовидной логики, которая определяется содержимым в CMS (логика также находится в CMS), поэтому отладка должна быть понятной по мере изменения и усложнения содержимого.
Моя проблема в том, что после регистрации все становится слишком плоским. Трудно понять, когда выполнены большие задачи (и какие мелкие задачи необходимо выполнить, чтобы выполнить большую задачу). Мой журнал сейчас выглядит так:
Мой вывод журнала прямо сейчас.
Есть ли другая система ведения журнала, которую я должен использовать? Или есть какой-то инструмент DevOps или Analytics, который автоматически обеспечит лучшую организацию моих журналов в зависимости от того, являются ли они вложенными функциями или нет?
Заранее спасибо!
Ответы 1
Я смог решить эту проблему, используя console.group и console.groupEnd(); для запуска и завершения групп в консоли. Я остановился на учебнике здесь.
Теперь у меня есть этот компонент:
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.info("This is an object")
} else {
console.info("%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")
В результате моя консоль теперь выглядит так: моя консоль теперь с сгруппированными сообщениями