How to push Reactjs logs and metrics to Grafana - javascript

Background:
I am working on a project where we have a server setup in Java and for front-end we are using ReactJs. Our server ships all logs to Loki endpoint via their push API and all metrics to a prometheus push-gateway. Grafana then pulls those logs and metrics from Loki and push-gateway for display.
Requirement:
I want to persist and place the ReactJs application logs and metrics so they are visible on grafana. This will help us see both frontend and backend application logs & metrics in the same place. Is there a free, opensource Javascript library or framework that can help me with that. The less code I need to write the better.
I was opting for sentry before but it's not completely free anymore. And we cannot use console logging as it disappears on browser refresh and not really helpful in production

So I didn't find a good library at that time but I was eventually able to ship logs to loki push endpoint.
I tried to push logs directly from frontend to loki push endpoint. This gave me a cors error. So I came up with the following steps to get around cors with Loki.
My workaround:
Setup nginx proxy server.
Nginx resolves cors.
Add reverse proxy to nginx. I send request to nginx host and then it forwards that request to loki from within same network so no cors.
I took alot of reading and hit and trys but I got the setup working. We are now using this setup to push frontend logs to grafana

Related

WebRTC: ICE failed error in browser with Mesibo Video/Audio chat

I am working on a video/audio chat application in React and Django using Mesibo Javascript SDK.
It is working locally on the same network but when trying to connect through different networks, Firefox browser gives me this error
WebRTC: ICE failed, add a TURN server and see about:webrtc for more
details.
In Chrome, this error doesn't show up but still the video/audio chat is not working and gives me
Mesibo_OnCallStatus: 50.
I noticed that Mesibo uses stun:stun.l.google.com:19302 as the STUN server and tried changing it to stun:stun.l.google.com:19305 but of no use. I even created a numb.viagenie.ca account to add a TURN server which worked for a few minutes and then gave this error
webrtc: ice failed, your turn server appears to be broken.
When checked on https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/, chrome is giving error code:701 for all the above turn/stun servers whereas firefox doesn't.
As suggested by Mesibo Documentation, my website is fully secure with https and the Rest APIs are called from Django backend. I'm invoking https://api.mesibo.com/mesibo.js as a script tag in the index.html file in react. I'm also able to successfully get
Mesibo_OnConnectionStatus=1
and the incoming call notification is also working. Upon answering the call, the call status changes from 3 to 5 and gives this webrtc error after sometime without any video/audio rendered.
Please suggest any hint/solution.
To Enable webrtc for remote calling you need your own trun server.
Google don't provide free trun server.
Free Turn Servers are will not work well in production. Well Fell Free to try Your Luck on Them. Not All Are borken
You Need to create Your Own on Cloud like DigitalOcean,AWS.
Or For Tetsing purpose I have a Trick
Soloution.
If Your Doing the testing
Probably you can try to use some Google TURN servers that they use here
https://test.webrtc.org/, I just checked for browser console and found this:
enter image description here
Not Sure About LifeTime. But you will get that.
For Production I will suggest to used DigitalOcean 5$ plan which is very chip.
And you install your own TURN server using coturn on it
If you want You can also use
Node-turn
which is great for node backend.
There is also heroku option of setup
I don't know is there any django or python option.
(tip: try your to build turn server on hosting server. Make sure the port on which server is running is open)

Using Active Directory (with LDAP) to authenticate on an angularjs/javascript fronted - what should the flow of the process be?

I'm working on a project in which we need to authenticate the user in an application by using his/hers windows credentials. Frontend is using Angularjs and backend java.
After doing a sensible amount of research, I discovered that there is no way on the the frontend to obtain directly the Windows user & pass due to security concerns.
But I'm thinking that the whole process should start here, from the frontend, by obtaining these two encrypted credentials or at least a token and sending them to the backend in order to kickstart the ntlm authentication process.
And also, not sure if the user should have to log in the app by typing his windows credentials or if it should automatically be done with ntlm passthrough.
I do not have a good grip on the concept, and that is because most of the related sources that I found are referring to backend solutions (C# 80% of them), but almost nothing for fronted. So, I humbly require some clarifications on this topic. Is there some sort of middleware or npm package that I should use in order to obtain the user & pass, or what would you advise?
Web servers expose certain server variables to code handling requests they serve.
For me, using IIS, these are described here: https://learn.microsoft.com/en-us/previous-versions/iis/6.0-sdk/ms524602%28v%3dvs.90%29
Since I am using IISNode; my node.js environment is completely embedded into IIS; I have access to these server variables. As the link described, each programming language seems to have their own way to access these variables.
So I would doubt it if Java does not have those as well. The exact code to use will depend on you back end.
But a quick search for "java server variables" already yields me the following:
https://docs.oracle.com/cd/E19534-01/820-3288/gawim/index.html for the java access manager.
http://users.polytech.unice.fr/~buffa/cours/internet/POLYS/servlets/Servlet-Tutorial-CGI-Variables.html for old school JSP.
How can I obtain server variables using apache wicket 1.54? for java wicket server.
So have a look at the documentation of your specific web server software or Java API.
There should be a list and example code of how to access these.
Once you obtain this data server side, you can do the LDAP query and then return the results client side.

Is a Spring Boot microservice with a non-Java front-end client possible?

I've implemented the shell of a microservices-based REST API application. I have simply followed the guides on Pivotal Springs' own documentation using Eureka and Ribbon for load balancing. Everything works. I have a discovery server with a handful of independent services which can register with the discovery server.
Now, my problem is that I might prefer not to write my client-side app in Java - maybe Angular or node.js, etc. However, the load balancing and connecting to the discovery server is all done in Java in the examples I've followed.
Is it possible to use JavaScript to do the same things that the Eureka client does with the Spring Boot microservices so that I don't need to be constrained in my choices of browser client technology? Does anybody have any advice for how this should be approached? I had difficulty finding any articles that cover this, to be honest.
Yes. Definitely you can choose technology of your choice for developing front end application. From your front end application, you make calls to API endpoint that you expose via your spring boot application.
You might want to expose your services via single API gateway that will help you route requests to designated micro services using your discovery server.
Actually you should not be doing load balancing/service discover etc. in the front-end. So the question about whether it is possible in JavaScript or with which libraries is irrelevant.
Typically you'll have an API gateway or a (load balancing) proxy which works with your service registry and routes requests accordingly. In the current project we use Consul for service registry and Nginx + consul-template as proxy. We plan to migrate to some API gateway.
With this setup your front-end will connect to just one central endpoint which would do load balancing/routing to individual service instances behind the scenes. Thus your front-end will not need to implement anything like Eureka/Ribbon etc.

Real-time pubsub chat with history via websockets

I'm interested in creating what Disqus have done with their commenting system: http://highscalability.com/blog/2014/5/7/update-on-disqus-its-still-about-realtime-but-go-demolishes.html
The most impressive part of infrastructure is Nginx push stream module:
Still runs on 5 machines Nginx machines.
Uses NginxPushStream, which supprts EventSource, WebSocket, Long
Polling, and Forever Iframe.
All users are connected to these machines.
On a normal day each machine sees 3200 connections/s, 1 million
connections, 150K packets/s TX and 130K packets/s RX, 150 mbits/s TX
and 80 mbits/s RC, with <15ms delay end-to-end (which is faster than
Javascript can render a comment)
Had many issues with resource exhaustion at first. The configuration
for Nginx and the OS are given that help alleviate the problems,
tuning them to handle a scenario with many connections moving little
data.
Obviously this Nginx module doesn't support data storage. Only in-memory mechanism supported by push_stream_store_messages directive, but as author said:
The main target to stored messages is to deliver the message to a
subscriber that was offline when the message was published.
It is clear that Disqus don't publish messages to Nginx directly but rather though the Go backend that manages to store messages in Redis followed by publishing via internal POST to Nginx which keeps subscribers.
Does anyone have an experience with fetching messages history through Redis on a page load before even we use push stream module for newer messages? Do you have to push old messages history in one go or render as plain HTML followed by pubsub for new messages that appear after page is loaded?
The logic needs to be decoupled as much as possible. I don't intend to introduce blocking mechanism between user and Nginx for real time message communication. Would that be a good solution below?
Client pushes the message from the web page (via websockets)
Ajax request goes straight to push stream location and on Ajax complete callback it requests backend to store message in Redis (in the other direction it gets locked with backend)
Once user refreshes the page backend fetches Redis list and display the history
User can see the history and can post new messages
It requires only 2 backend requests to be developed: accept message and store in Redis, fetch the data and display on page load. Preferably light non-blocking backend required, like Lua module or even HTTP interface to Redis called Webdis.
I'd like to know smart people opinion on that mechanism from architecture point of view, no code example expected.

How to efficiently develop client-side code for a web app without installing a local backend?

One of my team members is working only on client-side (Javascript) development for a web app with a large and complex backend.
I would like to avoid the need for him install and configure a local copy of the backend.
However, I wouldn't want him to need to push every small change to the dev server just so that he can test it.
We thought about getting the client to make the requests directly to the dev server, instead of to the same domain (the localhost) but this doesn't seem practical due to cross-domain request policies and authentication problems (cookies aren't getting sent).
What are some elegant solutions for developing clients without having a local backend?
Depending on how complicated your backend is, you might be able to create a mock backend using a lightweight web framework like Sinatra. I've had some success with this technique, but the services I've been mocking have been fairly simple. In some cases the mock backend mostly serves static JSON files.
I use Charles Proxy to map the URIs of the dev server's web services to localhost (where I run a light weight web server that serves up my static development code).

Categories

Resources