Playground Tools: Console Logger - display console errors in the post editor

[flexseth]

Description: Display an error below the post content with any console errors.

Could be part of a bigger, canonical plugin for Automattic. Especially when building blocks, it helps to not constantly have the console open looking for errors in a custom block you're working on.

(function () {
    var old = console.log;
    var logger = document.getElementById('log');
    console.log = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
        } else {
            logger.innerHTML += message + '<br />';
        }
    }
})();

https://stackoverflow.com/questions/20256760/javascript-console-log-to-html

Methodology

• Implement via @wordpress/create-block a custom plugin that displays console errors
• When inserting a block, append the console-error-block to the end of the post
• If there is already an instance of the console-error-block - don't add again
• If no errors, do nothing
• If errors, display in Editor with formatting

Roadmap

• Copy/paste error
• Open a new issue with this error
• Implement on a per-block basis
• Include with create-block package as a webpack script
• Core setting: Display console errors in post editor

Rationale

When working with the Playground, there may be many console errors. Especially when users are installing plugins..

Providing a shortcut for the user to describe this error in a new issue gives additional context to Playground contributors, and makes it easier for newer users to report errors. Reducing friction - at least the user can see there's an error without needing to understand using the console

Bonus: This would be a great block for any build, not just Playground.

[flexseth]

#1146 (comment)

It would be also neat to have logging levels in the logger, like console.warn(), instead of just a yes/no switch.

[adamziel]

Solved by #1230