Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

console-feed

Package Overview
Dependencies
Maintainers
1
Versions
66
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

console-feed

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

  • 3.6.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

console-feed Sponsors

Sponsor this project

npm version npm downloads Demo

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 console-feed
# or
npm install 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.

Keywords

FAQs

Package last updated on 01 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc