{"id":13396847,"url":"https://github.com/krakenjs/beaver-logger","last_synced_at":"2025-05-16T08:06:23.035Z","repository":{"id":8918922,"uuid":"59850596","full_name":"krakenjs/beaver-logger","owner":"krakenjs","description":"Client-side logging w/ super powers","archived":false,"fork":false,"pushed_at":"2024-11-12T23:47:15.000Z","size":1638,"stargazers_count":255,"open_issues_count":0,"forks_count":55,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-05-08T21:06:19.574Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/krakenjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-27T17:05:53.000Z","updated_at":"2025-04-29T14:12:09.000Z","dependencies_parsed_at":"2024-01-15T22:42:55.619Z","dependency_job_id":"1f932896-4e5a-480c-89d1-1e28f02ccbf0","html_url":"https://github.com/krakenjs/beaver-logger","commit_stats":{"total_commits":553,"total_committers":31,"mean_commits":"17.838709677419356","dds":0.3851717902350814,"last_synced_commit":"528d080adb0056f2b8784b89b30e980ea1416f61"},"previous_names":[],"tags_count":97,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krakenjs%2Fbeaver-logger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krakenjs%2Fbeaver-logger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krakenjs%2Fbeaver-logger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krakenjs%2Fbeaver-logger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krakenjs","download_url":"https://codeload.github.com/krakenjs/beaver-logger/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493378,"owners_count":22080126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest"],"created_at":"2024-07-30T18:01:04.706Z","updated_at":"2025-05-16T08:06:18.026Z","avatar_url":"https://github.com/krakenjs.png","language":"JavaScript","funding_links":[],"categories":["Packages","JavaScript"],"sub_categories":[],"readme":"## beaver-logger\n\n[![build status][build-badge]][build]\n[![code coverage][coverage-badge]][coverage]\n[![npm version][version-badge]][package]\n\n[build-badge]: https://img.shields.io/github/actions/workflow/status/krakenjs/beaver-logger/main.yml?branch=main\u0026logo=github\u0026style=flat-square\n[build]: https://github.com/krakenjs/beaver-logger/actions?query=workflow:build\n[coverage-badge]: https://img.shields.io/codecov/c/github/krakenjs/beaver-logger.svg?style=flat-square\n[coverage]: https://codecov.io/github/krakenjs/beaver-logger/\n[version-badge]: https://img.shields.io/npm/v/@krakenjs/beaver-logger.svg?style=flat-square\n[package]: https://www.npmjs.com/package/@krakenjs/beaver-logger\n\nFront-end logger, which will:\n\n- Buffer your front-end logs and periodically send them to the server side\n- Automatically flush logs for any errors or warnings\n\nThis 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!\n\n## Overview\n\n## Setup\n\n```javascript\nvar $logger = beaver.Logger({\n  url: \"/my/logger/url\",\n});\n```\n\n## Basic logging\n\n### `$logger.info(\u003cevent\u003e, \u003cpayload\u003e);`\n\nQueues a log. Options are `debug`, `info`, `warn`, `error`.\n\nFor example:\n\n`$logger.error('something_went_wrong', { error: err.toString() })`\n\n### `$logger.track(\u003cpayload\u003e);`\n\nCall 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.\n\n### `$logger.metricCounter(\u003cevent\u003e, \u003cpayload\u003e);`\n\nQueues a counter metric, helper wrapping `logger.metric`\n\n```\nlogger.metricCounter({\n  namespace: \"pp.team.product.feature\",\n  event: \"button_click\",\n  dimensions: {\n    type: \"paypal\"\n  }\n})\n```\n\n#### Using a namespace prefix\n\n```\nconst logger = new Logger({...options, metricNamespacePrefix: \"company.team.app\"})\n\nlogger.metricCounter({\n  namespace: \"product.feature\",\n  event: \"button_click\",\n})\n\n// creates metric with namespace of\n// company.team.app.product.feature\n```\n\n### `$logger.metricGauge(\u003cevent\u003e, \u003cpayload\u003e);`\n\nQueues a gauge metric, helper wrapping `logger.metric`\n\n```\nlogger.metricGauge({\n  namespace: \"pp.team.product.feature\",\n  event: \"request_latency\",\n  value: 100,\n  dimensions: {\n    method: \"GET\"\n  }\n})\n```\n\n#### Using a namespace prefix\n\n```\nconst logger = new Logger({...options, metricNamespacePrefix: \"company.team.app\"})\n\nlogger.metricGauge({\n  namespace: \"product.feature\",\n  event: \"request_latency\",\n  value: 100\n})\n\n// creates metric with namespace of\n// company.team.app.product.feature\n```\n\n### Deprecated - `$logger.metric(\u003cevent\u003e, \u003cpayload\u003e);`\n\nQueues a metric. We suggest using the `metricCount` or `metricGauge` interface for better type safety and clearer intention in your code.\n\n## Advanced\n\n### `$logger.addMetaBuilder(\u003cfunction\u003e);`\n\nAttach a method which is called and will attach general information to the logging payload whenever the logs are flushed\n\n```javascript\n$logger.addMetaBuilder(function () {\n  return {\n    current_page: getMyCurrentPage(),\n  };\n});\n```\n\n### `$logger.addMetricDimensionBuilder(\u003cfunction\u003e);`\n\nAttach a method which is called and will attach values to **each metric's dimensions** whenever the logs are flushed\n\n```javascript\n$logger.addMetricDimensionBuilder(() =\u003e ({\n  token_used: true,\n  type: \"user_id_token\",\n}));\n```\n\n### `$logger.addPayloadBuilder(\u003cfunction\u003e);`\n\nAttach a method which is called and will attach values to **each individual log's payload** whenever the logs are flushed\n\n```javascript\n$logger.addPayloadBuilder(function () {\n  return {\n    performance_ts: window.performance.now(),\n  };\n});\n```\n\n### `$logger.addTrackingBuilder(\u003cfunction\u003e);`\n\nAttach a method which is called and will attach values to **each individual log's tracking** whenever the logs are flushed\n\n```javascript\n$logger.addTrackingBuilder(function () {\n  return {\n    pageLoadTime: getPageLoadTime(),\n  };\n});\n```\n\n### `$logger.addHeaderBuilder(\u003cfunction\u003e);`\n\nAttach a method which is called and will attach values to **each individual log requests' headers** whenever the logs are flushed\n\n```javascript\n$logger.addHeaderBuilder(function () {\n  return {\n    \"x-csrf-token\": getCSRFToken(),\n  };\n});\n```\n\n### `$logger.flush();`\n\nFlushes the logs to the server side. Recommended you don't call this manually, as it will happen automatically after a configured interval.\n\n## Installing\n\n- Install via npm\n\n`npm install --save beaver-logger`\n\n- Include in your project\n\n```html\n\u003cscript src=\"/js/beaver-logger.min.js\"\u003e\u003c/script\u003e\n```\n\nor\n\n```javascript\nlet $logger = require(\"beaver-logger\");\n```\n\n## Configuration\n\nFull configuration options:\n\n```javascript\nvar $logger = beaver.Logger({\n  // Url to send logs to\n  url: \"/my/logger/url\",\n\n  // Prefix to prepend to all events\n  prefix: \"myapp\",\n\n  // Log level to display in the browser console\n  logLevel: beaver.LOG_LEVEL.WARN,\n\n  // Interval to flush logs to server\n  flushInterval: 60 * 1000,\n\n  // Use sendBeacon if supported rather than XHR to send logs; defaults to false\n  enableSendBeacon: true,\n});\n```\n\n## Server Side\n\nbeaver-logger includes a small node endpoint which will automatically accept the logs sent from the client side. You can mount this really easily:\n\n```javascript\nlet beaverLogger = require(\"beaver-logger/server\");\n\nmyapp.use(\n  beaverLogger.expressEndpoint({\n    // URI to recieve logs at\n    uri: \"/api/log\",\n\n    // Custom logger (optional, by default logs to console)\n    logger: myLogger,\n\n    // Enable cross-origin requests to your logging endpoint\n    enableCors: false,\n  })\n);\n```\n\nOr if you're using kraken, you can add this in your `config.json` as a middleware:\n\n```json\n      \"beaver-logger\": {\n          \"priority\": 106,\n          \"module\": {\n              \"name\": \"beaver-logger/server\",\n              \"method\": \"expressEndpoint\",\n              \"arguments\": [\n                  {\n                      \"uri\": \"/api/log\",\n                      \"logger\": \"require:my-custom-logger-module\"\n                  }\n              ]\n          }\n      }\n```\n\n## Custom backend logger\n\nSetting 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:\n\n```javascript\nmodule.exports = {\n  log: function (req, level, event, payload) {\n    logSocket.send(\n      JSON.stringify({\n        level: level,\n        event: event,\n        payload: payload,\n      })\n    );\n  },\n};\n```\n\n## Data Flow\n\n```mermaid\nflowchart TD\n    A[Client-Side Log statement] --\u003e B[beaver-logger/client]\n    B[beaver-logger/client] --\u003e C[beaver-logger/server]\n    C[beaver-logger/server] --\u003e D[your-custom-logger]\n    D[your-customer-logger] --\u003e E[Backend 1]\n    D[your-customer-logger] --\u003e F[Backend 2]\n    G[Server-Side Log statement] --\u003e D[your-custom-logger]\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrakenjs%2Fbeaver-logger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrakenjs%2Fbeaver-logger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrakenjs%2Fbeaver-logger/lists"}