XDebugger 📮

A very lightweight library to create a production debugger with custom errors readable for humans. Includes errors in table format, logger and search methods with dynamic filters.

This library was destinated for debug in development or production environment and obtain errors in background, with a readable format for any developer, also can disable console logs any time.

1. Demos
2. Installation
3. How to use

• Basic Initialization
• Log
• Listen global errors
• Get logs
• Search / Filter logs
  • $eq
  • $cnt
  • $lte
  • $lt
  • $gte
  • $gt
• Send logs to API
• Export and dowload logs
• View logs in console
• Clean logger
• Default data of logs
• Set max logs and size

Demos

• Simple initialization
• Custom initialization

Installation 💿

<!-- In development environment -->
<script src="xdebugger.js"></script>

<!-- In production environment -->
<script src="xdebugger.min.js" async></script>

How to use 🔥

Use XDebugger is really easy and very flexible, it's possible define debug, log, datatypes, action, default and max variables for different logs requirements.

Can use for debug development or in production website. Also if you want for example can load debug parameters via API, like { debug: true, log: false } and obtain errors or custom logs if you set.

Basic initialization 🔧

// In development environment
const debug = new XDebugger({ debug: true, log: true });

// In production environment
const debug = new XDebugger({ debug: true });

Set { log: false } disable completely console. That's mean XDebugger, clean console for not show any log, info, warn, table and error. If try log anything console show:

  Console was cleared
> console.log("Try write something like this");
"Developer mode is disabled."

How log 📥

You can log any data you want, also XDebugger add by default time as String and timestamp format as Number.

// Obviously you need initialize before!!
// Example log =>

debug.log({
  message: `${value} is not a valid data type`,
  code: 150,
  explanation: `The variable was evaluated and is not valid, typeof ${value}: ${typeof value}.`,
  response: `Change to ${this._datatypes.toString()} data type.`,
  error: `Value expect a ${this._datatypes.toString()} and recieve ${typeof value}`,
})

How to listen errors 📠

window.onerror = (message, url, line, col, err) => debug.log(debug.onerror(message, url, line, col, err));

How to get logs 📬

debug.logged

// Output =>
> [{..}]

How to search / filter logs 📪

Search was based in MongoDB queries for filter. XDebugger have 6 types of filters:

• $eq: Match value of log key with query value key
• $cnt: Contains value of log key with query value key
• $lte: Less or equal value of log key with query value key
• $gte: More or equal value of log key with query value key
• $lt: Less value of log key with query value key
• $gt: More value of log key with query value key

$eq search

// Implicit search
debug.search({
  timestamp: 1556528447311,
  code: 105
});

// Explicit search
debug.search({
  timestamp: {
    $eq: 1556528447311
  },
  code: 401
});

$cnt search

debug.search({
  error: {
    $cnt: "filter"
  },
  internalCode: 9224
});

$lte search

debug.search({
  timestamp: {
    $lte: 1556528447311
  },
  code: 105
});

$lt search

debug.search({
  timestamp: {
    $lt: 1556528447311
  },
  browser: "Google Chrome"
});

$gte search

debug.search({
  timestamp: {
    $gte: 1556528447311
  },
  version: 12.1
});

$gt search

debug.search({
  timestamp: {
    $gt: 1556528447311
  },
  name: "John Doe",
  idUser: "507f191e810c19729de860ea"
});

How set and send log per log to a API 📤

const debug = new Debugger({ debug: true, action: (log) => {
    // Here your code to POST log
  } 
});

How export and download logs 📤

You can export all logs and download in a JSON file.

debug.export();

Also can export filtered logs as follow:

debug.export(debug.search({
  code: 105,
  browser: "Brave"
}));

How console logs in readable format 📊

The view function accept Array or Object, that mean one or more logs.

debug.view(debug.logged);

How to clean debugger 📭

This clean logger and console.

debug.clean();

How set default data 📑

default key in object initialization parameter allow set default data like browser, version, internalCode, etc.

// 'library' as third party source functionality

const debug = new XDebugger({ debug: true, default: {
  browser: library.browser.name,
  version: library.browser.version,
  language: library.browser.lang,
  ...
}});

Also you can rewrite default time and timestamp:

const debug = new XDebugger({ debug: true, default: {
  time: mycustomtime.toString(),
  timestamp: mycustomtime.getTime(),
}});

How set max records and size of values log 📏

• length: set the max records logger can save
• size: set the max size value of log allowed in MB, Ex: { key: "value value value value value value value " } => 80 Bytes

const debug = new XDebugger({ debug: true, default: {
  max: {
    length: 60,
    size: 100
  }
}});

datatypes Not tested yet!! ❗

Define allowed data type of log value.

Not tested with functions or other data type.

By default it allow number, string, object.

Try not use complex schema with console.table, that lose the readable format