krakenjs / beaver-logger Goto Github PK

const beaverLogger = require('beaver-logger/server');
const express = require('express');
// const bodyParser = require('body-parser');

const app = express();

// app.use(bodyParser.raw);
// app.use(bodyParser.json());

app.use(beaverLogger.expressEndpoint({
    // URI to recieve logs at
    uri: '/api/log',
    // Enable cross-origin requests to your logging endpoint
    enableCors: true
}));

This is my server code. The client init code is very similar to the demo code however I am passing the payload like so

$logger.error('hello_world', {
  error: "somthing happened"
});
$logger.error('hello_world');
$logger.flush();

Whenever I try to log I only get an empty out with

[meta]

[track]
// or sometimes
[meta]
    state: undefined
[track]

On further debugging I found that the request req.query object is always empty. I am also unsure as to why you are checking for req.query in your handleRequest method.

When I build my own endpoint for this logger I am able to get the data successfully like so:

{"events":[{"level":"error","event":"hello_world","payload":{"error":"somthing happened","timestamp":1500277459545,"windowID":"827a850fd2","pageID":"8d9532cb6b","client_elapsed":439078,"req_elapsed":440637}},{"level":"error","event":"hello_world","payload":{"timestamp":1500277459546,"windowID":"827a850fd2","pageID":"8d9532cb6b","client_elapsed":439079,"req_elapsed":440638}}],"meta":{"state":"ui_init"},"tracking":[]}

Since there is limited documentation on the same, I am unable to figure out why this is happening.

Note:
HTML file is locally served from the system (using file:// ....)

Hello, and thanks for open-sourcing this project.

eg here: https://github.com/krakenjs/beaver-logger/blob/master/client/logger.js#L164

Let's say I have an object:

const foo = {
   hello: 'world'
};

I want to a) use this object elsewhere (in my case call another method with it) and b) log it. My code is doing this:

this.props.doSomething(foo);
logger.log('info', 'some-event', foo);

doSomething() is making a network request and the object that is sent looks something like:

{"pageID": "ee16011be5", "hello": "world", "timestamp": 1508753799851, "windowID": "584531ba3e"}

As a workaround I can use the spread operator when calling the .log method (ie logger.log('info', 'some-event', {...foo})) but ideally the log method would take care of this itself.

I will try raise a PR to address this if it's welcome!

From local files.

I realize the log will not send to server is the protocol is File, currently my use case I need to build it as electron packaging hence the protocol will be a File so I removed this condition in order my electron package able to send the log. May I know if there is any specific concern if I removed this condition ? or do u have any better approach to handle this issues ?? @bluepnume

Hi:

I cant use this library now. It have worked until five days ago but now it throws an error like this

Uncaught TypeError: Cannot read property 'push' of undefined
at t (exceptions.js:22)
at Function.e.onPossiblyUnhandledException (promise.js:362)
at Object../src/index.js (setup.js:32)
at n (bootstrap 17df07d1c18588f01490:19)
at Object../src/load.js (load.js:26)
at n (bootstrap 17df07d1c18588f01490:19)
at ./node_modules/Base64/base64.js (bootstrap 17df07d1c18588f01490:62)
at bootstrap 17df07d1c18588f01490:62

I use it as client logger in a front application where I am using paypal integration for payments as well. And paypal button fails as well before of render.
I think both of them are loading zalgo-promise and it uses a object in global. Anyone more with this issue?

Client needs tests to check if it can run in a constrained environment (i.e. the JSC for React-Native).

I would expect payload values passed in directly to logger methods to override builder provided props.

The opposite is true. I think we should consider swapping the order on these:
https://github.com/krakenjs/beaver-logger/blob/main/src/logger.js#L222-L229

$logger.error('some_error', err) -> $logger.error('some_error', err instanceof Error ? { error: err.stack || err.toString() } : err)

It seem the default logger assumes timestamp is an int but here it is converted to a string:

On local dev environment, I do not want to send the logs to server, just want to log in the browser console. Please share your thoughts on this.

• Create a change log using the format from keep a changelog

• Update changelog with last three or four commits

• For future use, update changelog when making changes to the repository

• Changelog can also be used to keep track of unreleased files

This project isn't written in TypeScript, but many TypeScript users would like to use published typings. For this issue, create TypeScript typings that cover the exported functions, and contribute it back to DefinitelyTyped!

This issue is great for someone who wants to learn more about TypeScript!

Hi,
I've just spent a bit of time trying to work out why the logs are being sent to the remote API, but not appearing in console.

Turns out I was using logger.info(), and that's not rendered due to the logLevel in config defaulting to "warn".

Would be great to have this in the docs! :-)

Regards,
Andy

I observed an issue using beaver logger where on navigation (redirect) to a new page, the beaver logger payload is fired, but reported as "Stalled" in Chrome network tab. The request did not complete and seems to not have made it to the server.

Digging a little deeper I came across the following:

1. Beaver-logger optionally uses the sendBeacon API, but currently may be using the wrong events to detect when to send the beacon payload (unload / beforeunload).
2. MDN docs call out some discussion about sendBeacon being potentially broken Comments section has an interesting discussion about whether it's a problem with sendBeacon or a with the actual vendor implementations not actually firing sendBeacon when they're supposed to.
3. This article suggests that we should not rely on unload / beforeunload events, especially in mobile browsers, and this can cause a ton of missing logs.
4. Google's recommendation is to never use the unload event in modern browsers!
5. Google also provides a library for normalizing the page lifecycle API cross-browser

I'm still trying to digest all of these resources (and a little concerned about the dates on these articles), but wondering if it's worth considering using the page visibility API or the cross-browser Google library implementation of it anyways to detect when to automatically send the logs rather than the unload and beforeunload events.

I have been trying to get the demo set up for beaver-logger and I keep running into this error during the webpack step:

basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") ^^^^^^^ SyntaxError: missing ) after argument list

I have tried editing the package.json with no avail, this is currently what it is:

"webpack": "babel-node --config-file ./node_modules/grumbler-scripts/config/.babelrc-node --plugins=transform-es2015-modules-commonjs ./node_modules/.bin/webpack --display-optimization-bailout --progress",

Any help or guidance would be much appreciated.

Hello,

I started getting this error once upgrading in our application.

22-1-14:17:01:27 UNHANDLEDREJECTION ReferenceError: window is not defined
    at getHTTPTransport (/Users/mdurfey/Desktop/Development/ssrnodewebtemplate/node_modules/beaver-logger/dist/beaver-logger.js:907:46)
    at new Logger (/Users/mdurfey/Desktop/Development/ssrnodewebtemplate/node_modules/beaver-logger/dist/beaver-logger.js:999:232)

This commit has the change that added in window reference: d2f8a58#diff-9097bfe5ae868eccdb921b5a043bd3bc4087e8aacd257640ab51f1513baae7b4R20

Thanks for this library. It has been a while since I tried to use node etc and I struggled to understand the demo. It might help others if the amplitudeApiKey is removed, I removed the logger from the expressEndpoint so I could see output on the console, I need to add this code to app.js

const bodyParser = require('body-parser');
app.use(bodyParser.json());

a brief explanation in the README.md as to where to run a server like node http-server and what to expect on the console would help too.

When I try doing

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

In my app js file, I get the following import error on start:

(function (exports, require, module, __filename, __dirname) { export * from './server';

SyntaxError: Unexpected token import

I've tried adding Babel 7 to my project, tried various babel config settings to support babel transpilation of imported modules, no luck. My app is fairly simple, so there shouldn't be any weird left-field issues. I'm using Node 8.12 I believe, [email protected]. Any ideas?

I have two questions:

1. Can we do import instead of require server side?
2. Can we do import instead of adding JS link in the html client side?

The .metric() API feels very awkward atm.

https://github.com/krakenjs/beaver-logger/blob/main/src/logger.js#L291-L304

Currently it's:

function metric(metricPayload: Metric){}

Which requires a .name property for the metric name.

I'm torn on how low-level to make this but maybe having a rawMetric(payload) and another method makes sense.

So it'd be

.rawMetric(payload);

.metric(eventName, namespace, dimensions);

.metric("weasley.flow.started", "pp.xo.weasley.custom", {
  app: 'weasley',
  isWPS: false,
  country: 'US',
  currencyCode: 'USD',
  releaseHash: 'e1fnrnd'
})

Then in sfx this would show up under the pp.xo.weasley.custom metric, with the event_name dimension set to weasley.flow.started

Maybe something like this. Still kind of torn on this, but wanted to raise it up. @westeezy

3.x had a silent cfg option which would supress console.logs. A lot of our tests end up printing a ton of console logs that would be great to be able to easily suppress w/o having to mock or override console.log:

https://github.com/krakenjs/beaver-logger/blob/3.x/client/logger.js#L180-L182

Can we consider bringing that option back? @westeezy

When using this package in a React Native app there is an issue with window.location being undefined. This causes an issue here:
https://github.com/krakenjs/beaver-logger/blob/master/src/logger.js#L105

Hello! 👋

It looks like a recent PR/release (#31) added two window event listeners to the main thread/initialization of this package:

window.addEventListener('beforeunload', () => {
    immediateFlush();
});

window.addEventListener('unload', () => {
    immediateFlush();
});

Unfortunately, this breaks SSR with following error:

ReferenceError: window is not defined
    at Module.Logger (/Users/kweiberth/code/financeportalnodeweb/node_modules/beaver-logger/dist/beaver-logger.js:936:13)

I think possible the easiest/best solution is to wrap these initializers in a condition that checks for window, e.g.

if (typeof window === 'object') {
    // add event listeners
}

What do you think?

beaver-logger seems to make an ajax-post to send the logs to the server. This post method type is hard-coded, and is failing when kraken's lusca middleware is enabled with csrf check.

Probably, there should be a way to pass-in the csrf token to the beaver-logger which in turn will get added as ['XSRF-TOKEN'] header of the post request?

Currently, whatever beacon/data sent to the server, it's getting logged in the browser console. It would be nice to have an option to disable this

I would love the ability to encrypt my messages before sending them over the pipe. For example, I would love to be able to send some messages with data that isn't viewable to anyone in their web browser console.

Can beaver-logger module be loaded using requireJS on the client side?

I see there is a check for amd, but wanted to check if someone was successful loading this on the browser using requireJS module loader, since I'm getting $logger not defined on the client side.

Link to any repo that uses beaver-logger with requireJS would be very helpful if one exist.