Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samdenty/console-feed
Captures console.log's into a React Component 🔥
https://github.com/samdenty/console-feed
hacktoberfest
Last synced: 3 days ago
JSON representation
Captures console.log's into a React Component 🔥
- Host: GitHub
- URL: https://github.com/samdenty/console-feed
- Owner: samdenty
- License: mit
- Created: 2018-04-07T22:34:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-31T18:42:18.000Z (about 2 months ago)
- Last Synced: 2024-12-12T09:00:23.265Z (10 days ago)
- Topics: hacktoberfest
- Language: TypeScript
- Homepage: https://stackblitz.com/~/github.com/samdenty/console-feed
- Size: 1.06 MB
- Stars: 698
- Watchers: 6
- Forks: 110
- Open Issues: 47
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - console-feed
README
# console-feed [](https://github.com/sponsors/samdenty)
[Sponsor this project](https://github.com/sponsors/samdenty)
[](https://www.npmjs.com/package/console-feed)
[](https://www.npmjs.com/package/console-feed)
[](https://stackblitz.com/github/samdenty/console-feed?file=demo%2Fpublic%2Fiframe.html)
A React component that displays console logs from the current page, an iframe or transported across a server.
## 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
- [CodeSandbox.io](https://codesandbox.io)
- [Framer](https://www.framer.com)
- [Plunker](https://plnkr.co)
- [P5.js Editor](https://editor.p5js.org)
- [Builder.io](https://builder.io)
- [Utopia](https://utopia.app/project)
- [facebook/flipper](https://github.com/facebook/flipper)
- [Effector playground](https://share.effector.dev/)
## Features
- **Console formatting** - [style and give your logs color](https://stackoverflow.com/questions/22155879/how-do-i-create-formatted-javascript-console-log-messages), 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
```sh
yarn add console-feed
# or
npm install console-feed
```
## Basic usage
[StackBlitz](https://stackblitz.com/github/samdenty/console-feed?file=demo%2Fpublic%2Fiframe.html)
```js
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 (
)
}
}
```
OR with hooks:
```js
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
}
export { LogsContainer }
```
## Props for `` 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`](https://github.com/samdenty/console-feed/blob/master/src/definitions/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
### `components?: ComponentOverrides`
To fully customize layout and rendering of the console feed, you can provide your own React
components. Currently, only the `Message` component is customizable.
## 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.
```ts
type Methods =
| 'log'
| 'debug'
| 'info'
| 'warn'
| 'error'
| 'table'
| 'clear'
| 'time'
| 'timeEnd'
| 'count'
| 'assert'
```
## `Log` object
A log object consists of the following:
```ts
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 `` component, you need to call the `Decode()` method.
### Disabling serialization
If the `Hook` function and the `` component are on the same origin, you can disable serialization to increase performance.
```js
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.
```js
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:
```bash
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.