npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

flinger

v0.2.11

Published

Flinger flings logs from your browser clients back to your node servers so you can see what your users are up to.

Downloads

12

Readme

Why Care?

Web applications, and single page applications in particular, make it hard to see errors that are happening in client side JavaScript.

What It Does

Flinger flings logs from your browser clients back to your node servers so you can see what your users are up to.

What It Is

Flinger is node middleware for express or connect that does two things:

  • For the client, serves a client library that monkey patches
    • console.log
    • console.error
    • Error
  • For the server, provides a receiver that catches and logs client logs

How To Use It

Flinger uses jQuery for HTTP back to the server. Make sure it is in your page.

Here is the most basic installation possible:

npm install flinger

var path = require('path');
var express = require('express');
var flinger = require('flinger');
var app = express()
    .use(express.cookieParser())
    .use(express.static(path.join(__dirname, 'client')))
    .use(flinger())
    .listen(9999);

Flinger serves its client library automatically as a convenience, so on the client:

<script type="text/javascript" src="/flinger.js"></script>

This redirects, by default:

  • client console.log(...) to server console.log(...)
  • client console.error(...) to server console.error(...)
  • client new Error(...) to server console.error(...)

Fancy Server Use

Flinger lets you hook to reformat or log as you see fit, flinger really is:

flinger(onConsoleLog, onConsoleWarn, onConsoleError, onException)

Each of the onXXX functions is:

function handler(logEvent){}

Each logEvent is:

  • request, flinger logs over HTTP, so you can get at cookies etc to identify users and make custom logs
  • arguments, the javascript arguments captured on the client function

Fancy Client Use

If you want to prefix the flinger log messages, say with your user session or user identifier -- we already thought of that:

window.flingerAdditionalClientData = function () {
  return "Your User ID Here!";
}

Want to format your messages:

window.flingerFormatter = function(x){
  return "Your Format Here!";
}

Want to post to a different endpoint or have a server that doesn't live at '/'

<script>
  window.flingerURL("http://www.domain.com/endpoint");
</script>

To disable posting to server, set flingerURL to an empty string.

You can do this anywhere you like client side. Yep, it's a global function, but did we mention that we're monkey patching console.log to make this work? Don't panic.

And you can switch things off, which will log locally but not got to the server:

console.log.on = false;
console.warn.on = true;
console.error.on = true;
console.exception.on = true;

Server side log customizations

By default flinger will log out the error from the client. But what if you want more information from the request, or prepend something to the log output?

Flinger has that covered with augmentLog.

Usage to prepend a date for each log message, and append some request header fields: