console-feed

A React component that displays console logs from the current page, an iframe or transported across a server.

Who's using it

• CodeSandbox.io
• Framer
• Plunker
• P5.js Editor

Features

• Console formatting - style and give your logs color, and makes links clickable
• DOM nodes - easily inspect & expand HTML elements, with syntax highlighting
• console.table - view your logs in a table format
• Other console methods:
  • console.time - view the time in milliseconds it takes to complete events
  • console.assert - assert that a statement is truthy
  • console.count - count how many times something occurs
• Inbuilt JSON serialization - Objects, Functions & DOM elements can be encoded / decoded to and from JSON

Install

yarn add console-feed # or npm install console-feed

Basic usage

CodeSandbox

import React from 'react' import { Hook, Console, Decode } from 'console-feed'  class App extends React.Component {   state = {     logs: []   }    componentDidMount() {     Hook(window.console, log => {       this.setState(({ logs }) => ({ logs: [...logs, Decode(log)] }))     })      console.log(`Hello world!`)   }    render() {     return (       <div style={{ backgroundColor: '#242424' }}>         <Console logs={this.state.logs} variant="dark" />       </div>     )   } }

Props

logs: Log[]

An array consisting of Log objects. Required

filter?: Methods[]

Filter the logs, only displaying messages of certain methods.

variant?: 'light' | 'dark'

Sets the font color for the component. Default - light

style?: Styles

Defines the custom styles to use on the component - see Styles.d.ts

searchKeywords?: string

A string value to filter logs

logFilter?: Function

If you want to use a custom log filter function, you can provide your own implementation

Log methods

Each log has a method assigned to it. The method is used to determine the style of the message and for the filter prop.

type Methods =   | 'log'   | 'warn'   | 'error'   | 'info'   | 'debug'   | 'command'   | 'result'

Log object

A log object consists of the following:

type Logs = Log[]  interface Log {   // The log method   method: Methods   // The arguments passed to console API   data: any[] }

Serialization

By default when you use the Hook() API, logs are serialized so that they will safely work with JSON.stringify. In order to restore a log back to format compatible with the <Console> component, you need to call the Decode() method.

Disabling serialization

If the Hook function and the <Console /> component are on the same origin, you can disable serialiation to increase performance.

Hook(   window.console,   log => {     this.setState(({ logs }) => ({ logs: [...logs, log] }))   },   false )

Developing

To run console-feed locally, simply run:

yarn yarn start yarn test:watch

Head over to http://localhost:3000 in your browser, and you'll see the demo page come up. After you make changes you'll need to reload, but the jest tests will automatically restart.