andersonba/whoami.js

A simple and lightweight browser detection and logger library

whoami.js

A simple and lightweight browser detection and logger library.

See demo page

Usage

// initialize whoami
var me = new whoami( [options] [, callback] );

// capture
me.execute();

The callback argument gets a data object with all catched informations.

Configuring whoami to communicate via API

// initialize whoami
var me = new whoami( urlApi [, options] [, callback] );

// capture
me.execute();

The callback argument gets 2 arguments:

1. An error when applicable (usually from XHR request)
2. A data object

See a server example using express.js

Options

name	type	default	description
basic	boolean	true	Basic browser informations (document title and url, user-agent, resolution, origin url and time)
console	boolean|object	false	Catch all console output. You could customize which method will be subscribed using options, eg.: {warn: true, log: false}
context	object	{}	Set application context, like as userId, userEmail, etc
cookie	boolean	false	Catch all cookies from domain
error	boolean	false	Catch all exceptions raised on the page
functions	object	{}	Execute custom functions on capture and catch the return values. The functions could be sync/async using callback. You could create feedbacks prompts, check a ping using XHR request, etc
localStorage	object	false	Catch all the localStorage data from domain
screenshot	boolean	false	Capture a screenshot using the html2canvas. It will returns a Data URI containing a representation of the image in jpg format
sessionStorage	boolean	false	Catch all the sessionStorage data from domain
shortcut	boolean	true	Bind the Ctrl+0 shortcut on keyboard to execute whoami.execute()

Thank You

With special thanks to BrowserStack for providing cross browser testing.

whoami.js's Issues

Catch errors/exceptions and console output

• exceptions by window.onerror binding
• log, debug, error ... by monkey patching

Catch browser and user informations

• current url
• document title
• origin
• browser name/version
• os name/version

Send custom data (context)

Example:

{
  uid: "{{ user.id }}",
  email: "{{ user.email }}",
  ...
}

Demo configuration component

Create a composition component using checkbox to test selected filters on demo page.
Also, after click button or shortcut, print the output in textarea.

Catches configuration

Use object configuration to enable/disable filters

Example:

whoami({
  filters: {
    screenshot: false,
    localStorage: false,
    cookies: true
  }
});

Take a screenshot automatically

Copy output to clipboard

Send optional description

Open textarea before send

Ignore unknown filters

Currently, breaking the execute command when enter a invalid filter in instance options

Shortcuts & element binding settings

Send data and show a ticket code

• Generate ticket code using shortid
• Send data via ajax

Tasks runner (beta)

Catch routine tasks output (javascript functions)

Example:

whoami({
   filters: {
     tasks: {
       browserTime: function() {
         return +new Date();
       },
       apiIsLive: function(done) { // async
         fetch('/api/healthCheck')
           .then(function(response) {
             done(response.status === 200);
           });
       }
     }
   }
});

output:

{
  "tasks": {
    "browserTime": "144120312812",
    "apiIsLive": true
  }
}

Pen, highlight and blackout tools (Beta)

Create UI

• Use Loading spinner
• Replace prompt by component
• Replace alert by component

Catch browser storage

• Domain's cookies
• localStorage state