• Stars
    star
    252
  • Rank 161,312 (Top 4 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 8 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Client-side logging w/ super powers

beaver-logger

build status code coverage npm version

Front-end logger, which will:

  • Buffer your front-end logs and periodically send them to the server side
  • Automatically flush logs for any errors or warnings

This is a great tool to use if you want to do logging on the client side in the same way you do on the server, without worrying about sending off a million beacons. You can quickly get an idea of what's going on on your client, including error cases, page transitions, or anything else you care to log!

Overview

Setup

var $logger = beaver.Logger({
  url: "/my/logger/url",
});

Basic logging

$logger.info(<event>, <payload>);

Queues a log. Options are debug, info, warn, error.

For example:

$logger.error('something_went_wrong', { error: err.toString() })

$logger.track(<payload>);

Call this to attach general tracking information to the current page. This is useful if the data is not associated with a specific event, and will be sent to the server the next time the logs are flushed.

$logger.metric(<event>, <payload>);

Queues a metric

Advanced

$logger.addMetaBuilder(<function>);

Attach a method which is called and will attach general information to the logging payload whenever the logs are flushed

$logger.addMetaBuilder(function () {
  return {
    current_page: getMyCurrentPage(),
  };
});

$logger.addPayloadBuilder(<function>);

Attach a method which is called and will attach values to each individual log's payload whenever the logs are flushed

$logger.addPayloadBuilder(function () {
  return {
    performance_ts: window.performance.now(),
  };
});

$logger.addTrackingBuilder(<function>);

Attach a method which is called and will attach values to each individual log's tracking whenever the logs are flushed

$logger.addTrackingBuilder(function () {
  return {
    pageLoadTime: getPageLoadTime(),
  };
});

$logger.addHeaderBuilder(<function>);

Attach a method which is called and will attach values to each individual log requests' headers whenever the logs are flushed

$logger.addHeaderBuilder(function () {
  return {
    "x-csrf-token": getCSRFToken(),
  };
});

$logger.flush();

Flushes the logs to the server side. Recommended you don't call this manually, as it will happen automatically after a configured interval.

Installing

  • Install via npm

npm install --save beaver-logger

  • Include in your project
<script src="/js/beaver-logger.min.js"></script>

or

let $logger = require("beaver-logger");

Configuration

Full configuration options:

var $logger = beaver.Logger({
  // Url to send logs to
  url: "/my/logger/url",

  // Prefix to prepend to all events
  prefix: "myapp",

  // Log level to display in the browser console
  logLevel: beaver.LOG_LEVEL.WARN,

  // Interval to flush logs to server
  flushInterval: 60 * 1000,

  // Use sendBeacon if supported rather than XHR to send logs; defaults to false
  enableSendBeacon: true,
});

Server Side

beaver-logger includes a small node endpoint which will automatically accept the logs sent from the client side. You can mount this really easily:

let beaverLogger = require("beaver-logger/server");

myapp.use(
  beaverLogger.expressEndpoint({
    // URI to recieve logs at
    uri: "/api/log",

    // Custom logger (optional, by default logs to console)
    logger: myLogger,

    // Enable cross-origin requests to your logging endpoint
    enableCors: false,
  })
);

Or if you're using kraken, you can add this in your config.json as a middleware:

      "beaver-logger": {
          "priority": 106,
          "module": {
              "name": "beaver-logger/server",
              "method": "expressEndpoint",
              "arguments": [
                  {
                      "uri": "/api/log",
                      "logger": "require:my-custom-logger-module"
                  }
              ]
          }
      }

Custom backend logger

Setting up a custom logger is really easy, if you need to transmit these logs to some backend logging service rather than just logging them to your server console:

module.exports = {
  log: function (req, level, event, payload) {
    logSocket.send(
      JSON.stringify({
        level: level,
        event: event,
        payload: payload,
      })
    );
  },
};

Data Flow

flowchart TD
    A[Client-Side Log statement] --> B[beaver-logger/client]
    B[beaver-logger/client] --> C[beaver-logger/server]
    C[beaver-logger/server] --> D[your-custom-logger]
    D[your-customer-logger] --> E[Backend 1]
    D[your-customer-logger] --> F[Backend 2]
    G[Server-Side Log statement] --> D[your-custom-logger]

More Repositories

1

kraken-js

An express-based Node.js web application bootstrapping module.
JavaScript
4,948
star
2

zoid

Cross domain components
JavaScript
2,008
star
3

lusca

Application security for express apps.
JavaScript
1,787
star
4

post-robot

Cross domain post-messaging on the client side using a simple listener/client pattern.
JavaScript
734
star
5

kappa

A hierarchical npm-registry proxy
JavaScript
557
star
6

swaggerize-express

Design-driven apis with swagger 2.0 and express.
JavaScript
354
star
7

grumbler

A template for writing distributable front-end javascript modules.
JavaScript
292
star
8

hapi-openapi

Build design-driven apis with OpenAPI (formerly swagger) 2.0 and hapi.
JavaScript
210
star
9

jsx-pragmatic

Build JSX structures, then decide at runtime which pragma you want to use to render them.
JavaScript
188
star
10

express-enrouten

An express route initialization and configuration module.
JavaScript
172
star
11

levee

A circuit-breaker pattern implementation with fallback support.
JavaScript
171
star
12

fetch-robot

Proxy fetch through an iframe
JavaScript
157
star
13

makara

An internationalization module for kraken and express
JavaScript
135
star
14

cross-domain-utils

Cross Domain utilities
JavaScript
131
star
15

adaro

A Dust.js view renderer for express
JavaScript
127
star
16

kraken-example-with-shoppingcart

An example Kraken app showing off a shopping cart
JavaScript
116
star
17

generator-kraken

Yeoman generator for kraken.js apps
JavaScript
110
star
18

jwt-csrf

Stateless CSRF protection using jsonwebtoken (JWT)
JavaScript
108
star
19

shush

A simple module for reading JSON files that may have comments.
JavaScript
92
star
20

meddleware

Middleware configuration for express.
JavaScript
88
star
21

generator-swaggerize

Yeoman generator for design-driven apis with swagger 2.0 and krakenjs/swaggerize tools.
JavaScript
70
star
22

confit

Environment-aware configuration.
JavaScript
61
star
23

zoid-demo

A clonable demo project for xcomponent
JavaScript
61
star
24

swaggerize-routes

Swagger document driven route builder.
JavaScript
58
star
25

zalgo-promise

Release zalgo with synchronous promises
JavaScript
57
star
26

shortstop

Enables use of protocols in configuration.
JavaScript
55
star
27

kraken-example-with-passport

An example integrating kraken with passport authentication
JavaScript
53
star
28

caller

A node module for enabling a module to determine its caller.
JavaScript
47
star
29

nemo

node.js selenium-webdriver/mocha based combined testing framework
JavaScript
43
star
30

kraken-devtools

Development-time tools for kraken.js applications.
JavaScript
40
star
31

cross-domain-safe-weakmap

Cross-domain safe WeakMap shim
JavaScript
33
star
32

grabthar

Hot install and activation of npm modules
JavaScript
23
star
33

karka

A simple rule parser
JavaScript
21
star
34

belter

Miscellaneous browser utilities
JavaScript
17
star
35

good-influxdb

HapiJS good-reporter for use with InfluxDb
JavaScript
16
star
36

angular-remove-di-loaders

Webpack loaders to remove Angular DI (Dependency Injection)
JavaScript
16
star
37

freshy

An (admittedly naΓ―ve) node module (un|re)loader/refreshener.
JavaScript
15
star
38

endgame

A tiny module for ensuring uncaught exceptions are handled in Node.js
JavaScript
15
star
39

shortstop-handlers

Common protocol handlers for use with the shortstop node module.
JavaScript
15
star
40

passport-saml-encrypted

A strategy for Passport authentication that supports encrypted SAML responses
JavaScript
14
star
41

pine

A logging wrapper for winston.
JavaScript
14
star
42

react-redux-krakenjs-swaggerize-express

React client app, redux stage management, passport oauth2, paypal rest api and swagger based krakenjs node.js server
JavaScript
14
star
43

spud

A content store parser, reading a java .properties-like format
JavaScript
14
star
44

kraken-example-with-i18n

An example Kraken app showing off internationalization support
JavaScript
11
star
45

kraken-example-with-specialization

An example Kraken app showing off template specialization features.
JavaScript
11
star
46

bundalo

Manage localized sets of content files (be they property/json/etc) which may require rendering with data models
JavaScript
10
star
47

engine-munger

A helper module to insert specialization and i18n in the render workflow
JavaScript
10
star
48

memcookies

Persist cookies on the client-side, useful for supporting cookies disabled browsers
JavaScript
9
star
49

subprocess-robot

Create processes, process pools, and message between processes
JavaScript
8
star
50

grumbler-scripts

Build scripts for grumbler modules
JavaScript
6
star
51

universal-serialize

Universal serializer allowing for custom types
JavaScript
5
star
52

reverend

DEPRECATED: Merge an express-style path string with data to create a valid path.
JavaScript
5
star
53

sync-browser-mocks

Synchronous browser mocks for testing
JavaScript
4
star
54

webpack-mem-compile

Compile webpack to and from memory
TypeScript
3
star
55

hotware

JavaScript
3
star
56

localizr

A library and tool to apply localization to dust templates before rendering
JavaScript
3
star
57

neff

nconf & express based feature flags
JavaScript
3
star
58

krakenjs.github.io

Source for the kraken website
JavaScript
3
star
59

construx

Compile-on-the-fly and other development tools for use when building express applications.
JavaScript
2
star
60

spundle

command line tool and library to package localization files as json
JavaScript
2
star
61

dust-makara-helpers

Server-side configuration of helpers for makara
JavaScript
2
star
62

nodejs_deployment

Design and architecture details of node.js deployment solutions
JavaScript
2
star
63

node-benchmarker

Runs benchmarks and publishes results
JavaScript
2
star
64

grabthar-release

Release scripts for grabthar modules
JavaScript
2
star
65

express-promisified

Express with promises
JavaScript
2
star
66

webpack-promise-shim-plugin

Plugin to shim in Promise polyfill into webpack core
JavaScript
2
star
67

file-resolver

Used in kraken based projects for resolving files given the locale , file name, and the file extension.
JavaScript
2
star
68

beaver-logger-ios

Beaver Logger client for iOS
Swift
2
star
69

anemone-machina

express view engine and browser renderer for React and react-router
JavaScript
1
star
70

findatag

A specialized tokenizer for finding dust-style tags ({@tagname [attributes]})
JavaScript
1
star
71

construx-webpack

web pack dev middleware for krakenjs
JavaScript
1
star
72

express-bcp47

Locale handling middleware for Express
JavaScript
1
star
73

dustjacket

Loader middleware for dustjs
JavaScript
1
star
74

strict-merge

Strict deep merge of objects
JavaScript
1
star
75

makara-languagepackpath

Middleware for exposing the path to a language pack to templates
JavaScript
1
star