Using Grafana with front-end logging

[me617]

I am new to Grafana and trying to understand how I can use it for my use case - which is to visualize front-end logs. From various docs and tutorials, my understanding is that Grafana provides integrations to different kind of servers such as Apache, Node.js etc. but couldn’t find anything specific to Single-Page Apps (SPAs) created using React, Angular, Vue etc.

Specifically, I have a React application which can log the following types of information to any REST endpoint:

• Page views
• API calls with response times
• Errors
• User actions, e.g. mouse clicks, focus & blur events

The output is structured JSON. Here are some examples:

Page view

{
  "timestamp": "2022-07-12T17:57:59.559Z",
  "level": "info",
  "type": "PageView",
  "url": "http://grafana.staged-by-discourse.com/demo"
}

API Call

{
  "timestamp": "2022-07-12T17:57:59.559Z",
  "level": "info",
  "type": "ApiCall",
  "url": "http://localhost:8080/top-10-movies",
  "method": "get",
  "startTime": "2022-07-12T17:57:59.559Z",
  "endTime": "2022-07-12T17:57:59.600Z",
  "durationMillis": 41,
  "status": 200,
}

Error

{
  "timestamp": "2022-07-12T17:57:59.559Z",
  "level": "error",
  "type": "UncaughtError",
  "message": "Network error"
}

Questions

• What is the easiest way to ingest JSON logs shown above in a store supported by Grafana? Note that the front-end needs a REST endpoint to transmit these logs.
• Since the logs are of mixed types (page views, API calls, errors and user actions), do they need to be separated into different stores? My preference would be to save everything in a single store and use the type property to select the desired type.
• Are there standardized data structures that Grafana understands better and would make my visualization work easier? I am open to changing the data structures described above.

[yosiasz]

Welcome,

You can log it to anything you want.

mongodb, mysql,sqlserver,

loki (Get started with Loki on Grafana Cloud | Grafana Labs)
, etc

Here is pageView

Then all you need is pointing grafana to one of these

[yosiasz]

[yosiasz]

[me617]

Thanks @yosiasz for your help.

I tried to POST to my Grafana loki instance at https://logs-prod3.grafana.net/loki/api/v1/push, but kept on getting this authentication error:

{
    "status": "error",
    "error": "authentication error: legacy auth cannot be upgraded because the host is not found"
}

I tried with basic auth as well as with the API key. Not sure what I am doing wrong.

[yosiasz]

Would be helpful to see your config minus confidential settings. versions etc.
my telepathic and jedi skills have declined during the lockdown

[me617]

Hi @yosiasz,

Here are the basic settings of my loki instance in Grafana cloud:

I am not sure how to find the version number, but I just created my new account, so assuming it is the latest.

Here’s how I tried to POST using postman (tried both basic auth and bearer token):

[yosiasz]

Again, what is your config look like

[me617]

Sorry, @yosiasz, I don’t know what you mean by config. I thought I pulled in the first snapshot from the loki config:

[yosiasz]

Read the docs on loki, that is your friend.

Grafana Loki