@bigbinary/console-feed NPM

console-feed

!NOTE This is a fork of the original console-feed packages. Here are the changes we made from the original package:
Changed display of Promise from Promise <Pending> to Promise {}
Added support for console.dir logs.
Improved display of console.table to match the response from browser dev tools.

Sponsor this project

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

Demo

Alternative to `console-feed`

https://github.com/liriliri/chii supports the embedding the entire Chrome devtools.

https://github.com/tachibana-shin/vue-console-feed is a fork for Vue.JS

Who's using it

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 @bigbinary/console-feed
# or
npm install @bigbinary/console-feed

Basic usage

StackBlitz

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>
    )
  }
}

OR with hooks:

import React, { useState, useEffect } from 'react'
import { Console, Hook, Unhook } from 'console-feed'

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

  // run once!
  useEffect(() => {
    const hookedConsole = Hook(
      window.console,
      (log) => setLogs((currLogs) => [...currLogs, log]),
      false
    )
    return () => Unhook(hookedConsole)
  }, [])

  return <Console logs={logs} variant="dark" />
}

export { LogsContainer }

Props for `<Console />` component

`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

`styles?: 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'
  | 'debug'
  | 'info'
  | 'warn'
  | 'error'
  | 'table'
  | 'clear'
  | 'time'
  | 'timeEnd'
  | 'count'
  | 'assert'

`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 serialization to increase performance.

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

Limiting serialization

You can limit the number of keys/elements included when serializing objects/arrays.

Hook(
  window.console,
  (log) => {
    this.setState(({ logs }) => ({ logs: [...logs, log] }))
  },
  true,
  100 // limit to 100 keys/elements
)

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.