Missing required config value at 'grafana.domain'

[yamss]

Stack Trace:

Error: Missing required config value at 'grafana.domain'
    at ConfigReader.getString (webpack-internal:///../../node_modules/@backstage/config/dist/index.esm.js:183:13)
    at Object.factory (webpack-internal:///../../node_modules/@k-phoen/backstage-plugin-grafana/dist/esm/index-b703a46a.esm.js:81:27)
    at ApiResolver.load (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:215:25)
    at ApiResolver.get (webpack-internal:///../../node_modules/@backstage/core-app-api/dist/index.esm.js:200:17)
    at useApi (webpack-internal:///../../node_modules/@backstage/core-plugin-api/dist/index.esm.js:99:25)
    at Dashboards (webpack-internal:///../../node_modules/@k-phoen/backstage-plugin-grafana/dist/esm/index-b370840e.esm.js:53:88)
    at renderWithHooks (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:14804:18)
    at mountIndeterminateComponent (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:17483:13)
    at beginWork (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:18597:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///../../node_modules/@hot-loader/react-dom/cjs/react-dom.development.js:189:14)

However, in my app-config.yaml I have:

proxy:
  '/test':
    target: 'https://example.com'
    changeOrigin: true
  '/pagerduty':
    target: https://api.pagerduty.com
    headers:
      Authorization: Token token=${PAGERDUTY_TOKEN}
  '/grafana/api':
    # May be an internal DNS
    target: https://grafana.mycompany.dev
    headers:
      Authorization: Bearer ${GRAFANA_TOKEN}

grafana:
  # Publicly accessible domain
  domain: https://grafana.mycompany.dev

Do I need to set the domain somewhere else?

[santinoncs]

same from my side..don't know that could be happening

[pabloajz]

having the same error. have any of you figured out what was the issue?

[pabloajz]

I found the issue, posting here the workaround in case it helps others.

The problem is: config visibility is defined as frontend type, so passing the value in the app-config file seems to not work in this plugin for some reason. changing visibility to backend seems to solve it. It is not clear why, as according to backstage docs, when setting frontend, both frontend and backend methods should work.

This config definition can be override in your backstage setup by adding this file config.d.ts under /plugins folder and setting visibility to backend.

export interface Config {
    grafana: {
        /**
         * Domain used by users to access Grafana web UI.
         * Example: https://monitoring.eu.my-company.com/
         * @visibility backend
         */
        domain: string;

        /**
         * Path to use for requests via the proxy, defaults to /grafana/api
         * @visibility backend
         */
        proxyPath?: string;
    }
}

[K-Phoen]

I tried setting up the plugin on a fresh Backstage instance (newly generated using npx @backstage/create-app) and didn't have any issue.

Is there any chance anyone having troubles can publish a minimalist Backstage app that doesn't work as it should?

[jen13501]

In case it helps anyone else - I had this issue because I had installed the plugin as a backend dependency, not a frontend one

[K-Phoen]

Closing this since it's an old issue