Skip to content

Visually scan your browser console logs using the power of emojis 🐒 πŸ‡ πŸš€

License

Notifications You must be signed in to change notification settings

jpcamara/emoji-network-log

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

17 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

EmojiNetworkLog

Visually scan network activity in your browser console logs using the power of emojis 🐒 πŸ‡ πŸš€. Works with both fetch and XMLHttpRequest calls.

Inspired by an episode of the Syntax podcast.

I wrote this really nice little handy middleware... that analyzes all my requests as they go, just timing them - and based on how long the request takes it gives me different emoji. So if the request is really fast it's a πŸš€, if it's kinda fast it's a πŸ‡, if it's slow it's a 🐒. ...In my console while I'm just browsing the site I can just see - and it has what type of request, what path it was too, and it's just like at a glance I can see - 'oh I'm in turtle time right now - these requests to this page are all slow for some reason let me take a look'

Scott Tolinski Syntax Podcast, Episode 570 - https://syntax.fm/show/570/node-js-cjs-esm

Usage

EmojiNetworkLog hooks into fetch and XMLHttpRequest, logging timing, status and request type. Timing and http status code are logged with configurable emojis so you can quickly scan your console to see how your requests are performing and investigate. Never miss "turtle time" requests again 🐒.

import { EmojiNetworkLog } from 'emoji-network-log';

// Enable emoji logs
EmojiNetworkLog.enable({
  slow: `🐒`,
  average: `πŸ‡`,
  fast: `πŸš€`,
  slowThreshold: 1000,   // Default slow is <= 1000 ms
  averageThreshold: 500, // Default average is <= 500ms
  fastThreshold: 150,    // Default fast is <= 150ms
  info: `🧠`,            // 100-199
  success: `βœ…`,         // 200-299
  redirect: `πŸ”`,        // 300-399
  bad: `❌`,             // 400-499
  error: `πŸ”₯`,           // 500-599
  cancelled: `❓`,       // < 100
  timingLevel: `slow`,   // Default to only logging slow requests
  statusLevel: `bad`,    // Default to always logging bad (400-499) requests
});

// The following requests will automatically log information about each request for quick scanning
await fetch(`/found-average-speed`, { method: `POST` })
// πŸ‡ POST /found-average-speed 400ms βœ… 200

await fetch(`/not-found-slowly`)
// 🐒 GET /not-found-slowly 1022ms ❌ 404

await fetch(`/error-but-fast`, { method: `DELETE` })
// πŸš€ DELETE /error-but-fast 150ms πŸ”₯ 500

await fetch(`/redirect-average-speed`, { redirect: `manual` })
// πŸ‡ GET /redirect-average-speed 400ms πŸ” 302

// To turn it off
EmojiNetworkLog.disable();

Usage with unpkg.com

<script type="module">
  import { EmojiNetworkLog } from 'https://unpkg.com/[email protected]/index.js';
  EmojiNetworkLog.enable();
</script>

Installation

Installation is done using npm or yarn:

npm install emoji-network-log
# OR with yarn
yarn add emoji-network-log

License

The package is available as open source under the terms of the MIT License.

About

Visually scan your browser console logs using the power of emojis 🐒 πŸ‡ πŸš€

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published