Postman requests to Grafana Local work but not from Express backend server

Grafana Developers & API
1

  • What Grafana version and what operating system are you using?
    Windows 10.0.1

  • What are you trying to achieve?
    I’m trying to build an Express server that will send requests to my local Grafana instance to setup a datasource (PGDB) and then a custom dashboard that I will receive and display the charts on my frontend.

I’ve gotten the requests sent from postman to my local Grafana instance to work but they’re not working when coming from my Express backend.

  • How are you trying to achieve it?
    Express/JS and Grafana running on my localhost

  • What happened?
    The error I’m receiving: TypeError: fetch failed: error in the grafanaController.createDataSource

  • What did you expect to happen?
    Create a valid PGDB datasource on Grafana

  • Can you copy/paste the configuration(s) that you are having problems with?

createDataSource: async (req, res, next) => {
    const { graf_name, graf_pass, graf_port, db_name, db_url, db_username, db_server, db_password } =   req.body;
    const url = `http://localhost:${graf_port}/api/datasources`;

const config = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Basic ${Buffer.from(`${graf_name}:${graf_pass}`).toString('base64')}`,
        // "Connection" : "keep-alive",
        // "Access-Control-Allow-Origin": "*",
        // 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
        // "Access-Control-Allow-Credentials": "true"
      },
      body: {
        name: `${db_name}`,
        type: 'postgres',
        url: `${db_url}`,
        user: `${db_username}`,
        access: 'proxy',
        database: `${db_server}`,
        secureJsonData: {
          password: `${db_password}`
          },
        basicAuth: false
      }
    };

  try {
    const response = await fetch(url, config);
    const data = await response.json();
  catch (error) {
    return next({
       log: `${error}: error in the grafanaController.createDataSource`,
       status: 400,
       message: `${error}: error with the data source`
     })
   }

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.
    The error I’m receiving: TypeError: fetch failed: error in the grafanaController.createDataSource

  • Did you follow any online instructions? If so, what is the URL?

I tried adding all the additional headers that are commented out in the code. I added settings to the custom.ini file to allow any origins. I’ve console logged every variable, all the information is correct.

1 Like
2

Welcome

Why are you using express.js an api framework to create data source

Is this for a continuous deployment?

1 Like
3

I’m working in a small group and we’re designing an application where users can access our application, put in their grafana information and PGDB information and receive graphs/metrics from their DB about overall performance as well as a component that would return the performance on individual queries to that PGDB. I guess the idea would be for us to handle the majority of setup for them. It’s a project for a class and we’re new to Grafana so we’re hitting a lot of roadblocks. But we have to build a React/JS/Express application.

I’m having trouble finding resources on making API requests from an application to a local Grafana instance. Let me know if you have any information that could help or advice on how to handle the project/Grafana differently.

Thank you

1 Like
4

Do you have a github repo? Also please post your postman payload?

1 Like
5

Postman:
method: “POST”
http://localhost:[port]/api/datasources
{
“name”: “Test_PG_DB1”,
“type”: “postgres”,
“url”: “[pg_url]”,
“user”: “[pg_username]”,
“access”: “proxy”,
“database”: “[pg_name]”,
“secureJsonData”: {
“password”: “[pg_password]”
},
“basicAuth”: false
}

Under the Auth section in postman, set basic auth to your Grafana username and password. That should successfully create a datasource in Grafana. We have also been able to successfully create a dashboard via postman.

GitHub:
Our current github doesn’t have our latest work posted yet, I may be able to get it updated and provide that tomorrow.

Let me know if you need anything else.

Thank You

1 Like
7

Awesome, so this is working for my group members now!! Thank you so much!!!
We can finally move forward with the project.

It’s currently still not working on my system but I think that narrows it down to something specific to my setup. Possibly CORs or the localhost I’m running Grafana on? They’re all on Mac and I’m on Windows is another difference.

My most recent error is:
TypeError: fetch failed
[1] at Object.fetch (node:internal/deps/undici/undici:11413:11)
[1] at processTicksAndRejections (node:internal/process/task_queues:95:5)
[1] at async createDataSource (/home/kalanbeck/dev/Projects/QueryIQ/src/server/controllers/grafanaController.ts:52:24) {
[1] cause: Error: connect ECONNREFUSED 127.0.0.1:8080
[1] at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
[1] errno: -111,
[1] code: ‘ECONNREFUSED’,
[1] syscall: ‘connect’,
[1] address: ‘127.0.0.1’,
[1] port: 8080
[1] }
[1] }
[1] TypeError: fetch failed: error in the grafanaController.createDataSource

Thanks again @yosiasz, this really helped.

1 Like
8

what’s a Mac? just kidding!! :laughing:

is everything local? you probably should start looking at non local setup

please post

node -v

what is running on 8080?

1 Like
9

Yeah, everything is local as far as I know.

Do you mean creating Grafana in the cloud?

node -v: v18.15.0

Our Express server runs on 3001, nextjs on 3333, and I’m running Grafana on 8080.

10

you probably got something else running on 8080. cause that is such a common port. I use the grafana version as my port.
another better approach is for the whole team to run things from a docker compose

1 Like
11

We are considering switching to docker/cloud version but might not have time to set up everything. I tried uninstalling and re-installing Grafana and running it on the default port: 3000 but ran into the same error. To make things more confusing, I’m running the application through VScode which is running on a WSL (windows subsystem linux). So it could be some trouble communicating between the WSL and Windows version of Grafana?

I’m going to try installing Grafana in the WSL and hopefully that works.

1 Like
12

why are you running stuff in WSL?

1 Like
13

I’m in a class that uses macos and a workaround they offered for if you don’t have a mac is to setup vscode with a WSL that way everyone in the class can communicate more seamlessly.

It’s definitely added some complications on my end though. Some things still don’t work quite right on my system unfortunately.

Another quick problem we seem to be having is that our application is successfully adding a datasource and creating a dashboard for that datasource but the dashboard doesn’t display anything unless you manually go to the datasource tab, select the datasource, and click the “test & save” button at the bottom of the page. After doing that, the dashboard loads properly.

Is it possible to add something to the headers or body of the request that would “save” the datasource when adding it?

14

communicate? not sure I understand that. what version of grafana are you using

1 Like
15

I guess having half the class on windows would cause cross platform issues? something like that. Also for help with troubleshooting technical issues.

We’re all using version 10.0.1

1 Like
16

this is why you all need to use docker. it is os agnostic.

docker postgres
docker react app
Building a docker file of the app itself with code being pulled/pushed to github.Everyone works against github via branches and not working locally.

docker grafana

1 Like
17

Looks like removing the line inside of jsonData : { database: grafana } fixes the issue of the datasource populating on grafana but not saving properly. We also changed the isDefault: true. Thanks again.

1 Like
18

Which is what you had originally. Never copy pasta :spaghetti: