Как узнать номер строки в коде с которой вызвана функция?

Question

[Надим]

Хочу сделать свою собственную функцию логирования:

function log(text) {
    console.log(text);
}

Но хотелось бы, чтобы в консоли вместе с логом показывалась и ссылка на строку взвывавшую log()

Это вообще реально сделать? И если да, то каким образом?

Comments

[Михаил]

кидать ошибку и смотреть на err.stack))))))))))

console.trace()

[Надим]

Михаил, я только сейчас понял, что вы имели в виду... Вот я жираф)

Answer 1

[Хороший UI]

Можно в девтулзах по колстеку смотреть кто вызвал функцию, а вот получить номер строчки кода думаю нельзя.



Если вы пишете на чем то(тайпскрипт, реакт и т.д) либо или используете минификатор или бабел, то номер строчки кода всё равно будет отличаться от ваших исходников.

Но можно в аргумент функции логера передавать параметром имя функции.

const logger = (text, fnName) => {
  console.log(text, fnName);
}

const someFn = () => {
  // Code...
  logger('text', 'someFn');
}

Comments

[Надим]

> Можно в девтулзах по колстеку смотреть кто вызвал функцию

В принципе тоже вариант вариант, а то если у меня через логгер какая-нибудь типовая ошибка будет, я потом фиг же найду функцию, которая вызывала эту ошибка. Как пример:
log('Ошибка, элемент не найден');
Такого типа предупреждений у меня может быть понапихана куча и все в разных функциях.

[Хороший UI]

Надим Закиров, просто если смотреть по колстеку надо точку останова или дебагер ставить, а это иногда неудобно может быть.

Может быть тебе, как я писал выше, передавать вторым аргументов в функцию логер, название функции, которая её вызвала.

const logger = (text, fnName) => {
  console.log(text, fnName);
};

const someFn111 = () => {
  // Code...
  logger('text error', ' from someFn111');
};

const someFn222 = () => {
  // Code...
  logger('text error', ' from someFn222');
};

const someFn333 = () => {
  // Code...
  logger('text error', ' from someFn333');
};

Answer 2

[acwartz]

весь-весьма странным образом но можно.
Есть класс Error выбрасывающий исключение, в секции catch будет объект Error у котрого будет поле стэка. Не хитрыми манипуляциями со строкой, можно получить нужное.

function patchConsole() {
  window.oldConsole = window.console;
  var myConsole = {
     getStack: function() {
        try {
          throw Error('CustomError');
       } catch(e) {
         return e.stack;
       }
     },
     log: function(data) {
       let stack = this.getStack();
       let s = `<p>${data} at ${stack.split(' at ')[3]}</p>`;  //0 - info stack start, 1 - getStack, 2 - this function, 3 - calle function
       $('div.myconsole').append(s);
       oldConsole.log(s);
     }
  }
  window.console = myConsole;
}


function dummyFunction() {
  console.log('Dummu called a custom log!');   
}

patchConsole();
dummyFunction();

dummyFunction укажет на console.log внутри себя.

Comments

[Надим]

Круть!) Век живи, век учись. Этот лайфхак лично для меня открывает возможность централизованной обработки логов, наконец-то теперь я смогу все логи хранить в базе и не терять какой лог какой строкой вызван. Например, сдохло что-то у клиента, а ты бац и посмотрел логи недельной давности, где видно, что это клиент нажал не ту кнопку, а не у тебя ошибка в приложении.