Unable to initialize graph

Question

Unable to initialize graph

Vollbrecht opened this issue 2 years ago · comments

Frederick Vollbrecht commented 2 years ago

Thank you for your great tool. Unfortunately i encounter a bug where i cant get any graph to show up. Here is a short clip what happens.

flowchart-chrome-bugreport.mp4

This was recorded in Debian 11 using Chrome Version 101.0.4951.41 (Official Build) (64-bit)
A similar error occurs in Firefox stating "XML processing error: ..... not well-formed row no. 1, column 53:"

Plugin Version:

Grafana Version:
v8.5.2 (official docker container)

The problem is i cant reproduce this error on a freshly local docker container with your plugin, only on my "production" system. The production system is behind a nginx reverse proxy. But even skipping it and directly connecting localy to that container creates that error.
I didn't see anything special inside the grafana logs, but i didn't change any log levels. Any ideas how i can get more information to debug the issue?

Frederick Vollbrecht · Answer 1 · Thu May 26 2022 23:17:04 GMT+0800 (China Standard Time)

Here are the error console logs from firefox:

Jerry Shea · Answer 2 · Tue May 31 2022 11:03:44 GMT+0800 (China Standard Time)

@Vollbrecht I saw the same problem. Downgrading grafana from 8.5.3 to 8.5.2 made it go away

Frederick Vollbrecht · Answer 3 · Tue May 31 2022 20:52:37 GMT+0800 (China Standard Time)

Thanks for the reply,
unfortunately that didn't work for me. I was initial using 8.5.2 were i encounter the bug. i upgraded to 8.5.3 to hope it would work there. So neither 8.5.2 or 8.5.3 works for me right now. I suspect the problem lies elsewhere, but i cant pinpoint it down.

Jan David Mol · Answer 4 · Thu Jun 30 2022 21:09:16 GMT+0800 (China Standard Time)

For me, the problem was there with 8.5.3 but went away by using the grafana/grafana:latest docker image (9.0.2). I have not tried versions in between.

leonsery · Answer 5 · Wed Aug 17 2022 18:24:28 GMT+0800 (China Standard Time)

I have the same issue. Exact message in chrome console is:

GF ERROR : Unable to initialize graph ReferenceError: Graph is not defined
    at t.value (module.js:2:199167)
    at new t (module.js:2:195973)
    at t.value (module.js:2:258068)
    at t.value (module.js:2:266804)
    at e.value (module.js:2:286278)
    at Object.link (plugin_component.ts:51:18)
    at angular.js:1391:18
    at angular.js:11370:44
    at Ut (angular.js:11376:9)
    at ot (angular.js:10695:11)

This is reproduces on Grafana 8.5.1 on RedHat8.0, but doesn't reproduce on the same Grafana version om Windows 10.
It's sounds that some reference 'Graph' is absent on Linux.
Please help!

pmeffre · Answer 6 · Wed Sep 14 2022 15:46:17 GMT+0800 (China Standard Time)

I have the same problem : Not rendering any diagram on Grafana.

Grafana v 9.1.1 running in docker container
Flowcharting 1.0.0d (installed by putting code in plugins/agenty-flowcharting-panel/)

XML Parsing Error: not well-formed
Location: http://example.com/grafana/d/P8jEssr7k/trash?orgId=1&editPanel=6
Line Number 1, Column 54: trash:1:54
XML Parsing Error: not well-formed
Location: http://example.com/grafana/d/P8jEssr7k/trash?orgId=1&editPanel=6
Line Number 1, Column 54: trash:1:54
XML Parsing Error: not well-formed
Location: http://example.com/grafana/d/P8jEssr7k/trash?orgId=1&editPanel=6
Line Number 1, Column 54: 2 trash:1:54
Expected declaration but found ‘.’.  Skipped to next declaration. grafana:586:50
Error in parsing value for ‘width’.  Declaration dropped. grafana
[Deprecation warning] $location: hash is deprecated. Use locationService instead deprecationWarning.ts:14:12
Expected color but found ‘none’.  Error in parsing value for ‘border-color’.  Declaration dropped. grafana
Uncaught (in promise) Error: Can only have one anonymous define call per script file
    enqueueDefineAnonymousModule loader.js:2
    n loader.js:2
    <anonymous> 6354.1768cf67d93e3edb7654.js line 2 > eval line 2 > eval:4
    <anonymous> 6354.1768cf67d93e3edb7654.js line 2 > eval line 2 > eval:4
    n drawio_base.ts:162
    c module.js:2
    _invoke module.js:2
    _ module.js:2
    r tslib.es6.js:76
    r tslib.es6.js:72
    value module.js:2
    n drawio_base.ts:81
    c module.js:2
    _invoke module.js:2
    _ module.js:2
    o tslib.es6.js:73
    promise callback*l tslib.es6.js:75
    r tslib.es6.js:76
    r tslib.es6.js:72
    t drawio_base.ts:78
    promise callback*t/< drawio_base.ts:78
    c module.js:2
    _invoke module.js:2
    _ module.js:2
    r tslib.es6.js:76
    r tslib.es6.js:72
    value module.js:2
    n drawio_base.ts:45
    c module.js:2
    _invoke module.js:2
    _ module.js:2
    r tslib.es6.js:76
    r tslib.es6.js:72
    value module.js:2
    value flowchart_ctrl.ts:239
    Angular 15
loader.js:2:22898
[Deprecation warning] $location: hash is deprecated. Use locationService instead 2 deprecationWarning.ts:14:12
XML Parsing Error: no root element found
Location: http://example.com/grafana/d/P8jEssr7k/trash?orgId=1
Line Number 1, Column 1: 2 trash:1:1
XML Parsing Error: not well-formed
Location: http://example.com/grafana/d/P8jEssr7k/trash?orgId=1
Line Number 1, Column 54: 2 trash:1:54
Error in parsing value for ‘min-height’.  Declaration dropped. 3 grafana
Uncaught (in promise) Error: Can only have one anonymous define call per script file
    enqueueDefineAnonymousModule loader.js:2
    n loader.js:2
    <anonymous> 6354.1768cf67d93e3edb7654.js line 2 > eval line 2 > eval:4
    <anonymous> 6354.1768cf67d93e3edb7654.js line 2 > eval line 2 > eval:4
    n drawio_base.ts:162
    c module.js:2
    _invoke module.js:2
    _ module.js:2
    r tslib.es6.js:76
    r tslib.es6.js:72
    value module.js:2
    n drawio_base.ts:81
    c module.js:2
    _invoke module.js:2
    _ module.js:2
    o tslib.es6.js:73
    promise callback*l tslib.es6.js:75
    r tslib.es6.js:76
    r tslib.es6.js:72
    t drawio_base.ts:78
    promise callback*t/< drawio_base.ts:78
    c module.js:2
    _invoke module.js:2
    _ module.js:2
    r tslib.es6.js:76
    r tslib.es6.js:72
    value module.js:2
    n drawio_base.ts:45
    c module.js:2
    _invoke module.js:2
    _ module.js:2
    r tslib.es6.js:76
    r tslib.es6.js:72
    value module.js:2
    value flowchart_ctrl.ts:239
    Angular 19
    React 2
    unstable_runWithPriority scheduler.production.min.js:18
    React 4
    unstable_runWithPriority scheduler.production.min.js:18
    React 5
    c LazyLoader.tsx:23
    observer LazyLoader.tsx:58
loader.js:2:22898
Error in parsing value for ‘min-height’.  Declaration dropped. grafana
[Deprecation warning] $location: hash is deprecated. Use locationService instead deprecationWarning.ts:14:12
Error in parsing value for ‘min-height’.  Declaration dropped. 2 grafana
Error in parsing value for ‘min-height’.  Declaration dropped. grafana
[Deprecation warning] $location: hash is deprecated. Use locationService instead deprecationWarning.ts:14:12
Some cookies are misusing the recommended “SameSite“ attribute 6
Cookie “_gh_sess” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”. banner_large.png
Cookie “_octo” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”. banner_large.png
Cookie “logged_in” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”. banner_large.png
Cookie “_gh_sess” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”. fc_archi_example.png
Cookie “_octo” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”. fc_archi_example.png
Cookie “logged_in” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”. fc_archi_example.png

Alex Villacís Lasso · Answer 7 · Sat Nov 19 2022 05:27:46 GMT+0800 (China Standard Time)

I have this exact same problem when using Grafana 8.4.4 (both the official container and a custom-made one my team uses in production). However, I digged around trying to find what was the deeper cause, and I think I found it, or at least a workaround.

The portion of the message Error: Can only have one anonymous define call per script file tells me that something else in the web GUI is messing around and breaking an expectation that FlowCharting requires to properly initialize. I also experimented the oddity of having the plugin work "correctly" on a freshly instantiated container, yet failing in our production container. After installing every single plugin we use in production, I discarded all of them as causes. However, I realized that our Grafana organization in production had an InfluxDB source as its default data source, while my test container had no default data source, and therefore displayed "Random Walk" as data source when configuring a new panel.

I could then reproduce the bug by setting up an InfluxDB datasource as default, so that it shows as selected when configuring the new panel. And viceversa, removing the "default" checkbox from the InfluxDB datasource made the issue dissapear. As seen in the video clip posted by @Vollbrecht , the Edit mode already shows an InfluxDB datasource as default. Merely showing it breaks FlowCharting when it is selected later.

So my workaround for using FlowCharting is:

Check that there is no default datasource within the Grafana organization you want to use FlowCharting in. If required, uncheck the "default" flag on every single datasource you have configured.
On a dashboard, create a new panel and go to Edit mode.
If step 1 was done correctly, the dropdown for data source should display "Random Walk". If the InfluxDB datasource is still displayed, you must go back to step 1 before adding FlowCharting.
Select FlowCharting from the view dropdown at the right. If correctly initialized, it should display the orange flowchart background.
Once initialized, go to the datasources dropdown, select your InfluxDB (or some other) datasource, and configure as normal. Apparently explicitly selecting the datasource does not trigger additional bugs in FlowCharting.

Hope this helps in fixing the root cause.

erlfos · Answer 8 · Fri Jan 06 2023 21:58:53 GMT+0800 (China Standard Time)

I have this exact same problem when using Grafana 8.4.4 (both the official container and a custom-made one my team uses in production). However, I digged around trying to find what was the deeper cause, and I think I found it, or at least a workaround.

The portion of the message Error: Can only have one anonymous define call per script file tells me that something else in the web GUI is messing around and breaking an expectation that FlowCharting requires to properly initialize. I also experimented the oddity of having the plugin work "correctly" on a freshly instantiated container, yet failing in our production container. After installing every single plugin we use in production, I discarded all of them as causes. However, I realized that our Grafana organization in production had an InfluxDB source as its default data source, while my test container had no default data source, and therefore displayed "Random Walk" as data source when configuring a new panel.

I could then reproduce the bug by setting up an InfluxDB datasource as default, so that it shows as selected when configuring the new panel. And viceversa, removing the "default" checkbox from the InfluxDB datasource made the issue dissapear. As seen in the video clip posted by @Vollbrecht , the Edit mode already shows an InfluxDB datasource as default. Merely showing it breaks FlowCharting when it is selected later.

So my workaround for using FlowCharting is:

Check that there is no default datasource within the Grafana organization you want to use FlowCharting in. If required, uncheck the "default" flag on every single datasource you have configured.

On a dashboard, create a new panel and go to Edit mode.

If step 1 was done correctly, the dropdown for data source should display "Random Walk". If the InfluxDB datasource is still displayed, you must go back to step 1 before adding FlowCharting.

Select FlowCharting from the view dropdown at the right. If correctly initialized, it should display the orange flowchart background.

Once initialized, go to the datasources dropdown, select your InfluxDB (or some other) datasource, and configure as normal. Apparently explicitly selecting the datasource does not trigger additional bugs in FlowCharting.

Hope this helps in fixing the root cause.

Thank you! That was the issue for me as well, and your solution worked. I can now view the initial graph.

Marco Pignati · Answer 9 · Tue Apr 18 2023 16:00:19 GMT+0800 (China Standard Time)

Thanks a lot. I would have never found it myself.
This fixed it for me too with grafana 9.3.11 and flowchart plugin 0.9.1. Note that disabling the removing the default influxdb datasource is not persistent. After restart of grafana service, the default is reapplied. However, this is not a problem, because subsequent panels are initialized correctly.