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

Question

[LookyLoos]

Я делаю сайт на React JS.
Необходимое требование, чтобы выводились логи браузера (все абсолютно: ошибки, предупреждения, cors ошибки и т.д.) в модалке на сайте, в реальном времени.
Это требуется при невозможности открыть консоль, когда сидим на сайте через телефоны, планшеты

Основной упор необходимо сделать на cors ошибки

Comments

[Вадим]

Ну..
Для ошибок оборачивать всё в try catch, очевидно.
Для предупреждений это конечно же не сработает.
Для console.log() и тд можно сделать "декоратор".

Будет ли это работать для выбрасываемых самим браузером сообщений - надо пробовать.

https://stackoverflow.com/questions/6604192/showin...

[LookyLoos]

Вадим, Да, в try - catch обернул всё, что можно. Эти ошибки я могу отобразить.
А вот браузерные и т.п. - которые не могут быть обёрнуты или отловлены в try-catch - уже не знаю как.

[Вадим]

LookyLoos, ну мой эксперимент показывает что даже если сделать декоратор над console.methodName то браузерные выводы он перехватывать не будет. То есть cors не отловится, например.

Так что без прослойки, мне кажется, это не реализуемо на просто js

[LookyLoos]

Вадим, Эх, жаль. А что за прослойка?

[Вадим]

LookyLoos, Ну какая именно прослойка это уже не ко мне. Что-то, что отлавливает сетевую активность, логи браузера и даёт до этого доступ.
Ещё можно посмотреть в сторону service worker

[LookyLoos]

Вадим, Понятно, спасибо за уделённое время) Буду искать что-нибудь подобное

Answer 1

[Сергей delphinpro]

К чему эти извращения?
https://developer.chrome.com/docs/devtools/remote-...

Comments

[Вадим]

LookyLoos, ну и для ios это тоже возможно.
Начать можно отсюда:
https://medium.com/@haroonabbasi/remote-debugging-...
https://github.com/HimbeersaftLP/ios-safari-remote...

[LookyLoos]

Требования такие, ну и уже стало очень интересно - как это можно осуществить без отладок с подключением к компьюетру

[Сергей delphinpro]

LookyLoos, Странные требования. Скорее всего вы просто не знали об удаленной отладке, и не пробовали её.

Но в принципе, такие требования могут быть. Например на codepen реализована собственная веб-консоль. Я не знаю как именно там сделано, но вы можете просто переопределить системный объект console.

https://habr.com/ru/articles/116852/

[LookyLoos]

Сергей delphinpro, Интересная статья, почитаю

Answer 2

[furashcka]

Если нужно прям что-то своё, уникальное, то вам достаточно переинициализировать console.log своей функцией, например console.log = () => {}, ну и по такой же схеме console.error и т.д.

А если вам нужно только для отладки, то рекомендую https://github.com/liriliri/eruda, это эмулятор dev tools

Ошибки вы сможете перехватить в window.onerror например, но только те которые не обвёрнуты в try catch, тут нужно будет самостоятельно обрабатывать каждый try catch

Comments

[LookyLoos]

Хм, на сколько мне известно, window.onerror показывает ошибки только, если html блок не удалось отобразить. Идея интересна, но к сожалению не отлавливает то, что мне нужно.
console.log = () => {} - тоже прикольная тема, но при условии, если в коде мы сами пытаемся обратиться к console.log.

[Kirgus]

Только не "переинициализировать", а переопределить)

[furashcka]

LookyLoos, window.onerror показывает все ошибки, которые ни кто не обрабатывает, https://learn.javascript.ru/exception#poslednyaya-..., правда CORS не отловит, тут вручную придётся

Answer 3

[Радмир Ноирусов]

import React, { useEffect, useState } from 'react';

const ConsoleLog = () => {
  const [logs, setLogs] = useState([]);

  useEffect(() => {
    const consoleLog = console.log;
    console.log = (message) => {
      setLogs((prevLogs) => [...prevLogs, message]);
      consoleLog.apply(console, arguments);
    };
  }, []);

  return (
    <div>
      <button onClick={() => setLogs([])}>Clear logs</button>
      {logs.map((log, index) => (
        <p key={index}>{log}</p>
      ))}
    </div>
  );
};

export default ConsoleLog;

Comments

[LookyLoos]

Прикольная штука, к сожалению она отображает только те логи, которые мы пишем в коде вручную и только первую часть: console.log("это отображается", это уже нет, просто символами)