Gitea: gitgraph.js: Cannot read property 'color' of undefined

Created on 16 Jan 2018 · 13Comments · Source: go-gitea/gitea

Gitea version (or commit ref): 1.3.2
Git version: 1.8.3.1
Operating system: CentOS 7
Database (use [x]):
- [x] PostgreSQL
- [ ] MySQL
- [ ] MSSQL
- [ ] SQLite
Can you reproduce the bug at https://try.gitea.io:
- [ ] Yes (provide example URL)
- [x] No (because it's a commercial product)
- [ ] Not relevant

Description

There're not so many branches that a currently simultaneously used (around 6-7), however the overall number of branches is 28. Something started to go wrong today then the git graph stopped to display correctly—there're no more colors at all. Below are the screenshots of the problem.

Unfortunately I really cannot give more info about the problem because our development process haven't changed for a long time: We just commit and push and very often review this git graph on out instance of Gitea. And out of the blue it gets white with an error in JS console.

My first assumption was that it may be connected with the fact than each new branch gets it own color, and maybe there's a finite number of colors to display, however 28 branches isn't a limit at all for a bit project... So I do believe the assumption is wrong.

We don't have any plugins or instandard stuff, just a Gitea's binary, the DB, and repos.

Screenshots

The result of something goes wrong with git graph:

What the developer tools in Chrome outputs regarding the error:

The direct place in the JS file where the error occurs:

kinbug

Source

denpatin

Most helpful comment

I fixed this bug https://github.com/bluef/gitgraph.js/pull/5

axifive on 31 May 2018

🎉2 👍2

All 13 comments

Could be worth to report it also upstream to (gitgraph.js) authors

lafriks on 16 Jan 2018

👍1

This is blocked by upstream repository.

lunny on 16 Jan 2018

So I'll duplicate the problem in the upstream Issues.

denpatin on 16 Jan 2018

👍1

@denpatin I think you opened this issue on another project named gitgraph. Upstream for gitea is https://github.com/bluef/gitgraph.js

kjellkvinge on 17 Jan 2018

@kjellkvinge OK, thanks for this tip!

denpatin on 17 Jan 2018

@denpatin I tried to reproduce the error without any luck. The error you get is probably because the element is missing from an array, which is build from the output from gitea

          $("#graph-raw-list li span.node-relation").each(function () {                                  
                  graphList.push($(this).text());                                                        
          })

The graph is build from the output of the git log command. Could you provide the output from this for debugging?

#master
git log --graph --date-order --all -C -M -n 100 --date=iso --pretty=format:"" --no-color

#should return something like this:
* 
| *   
| |\  
| | | * 
| | | | * 
| * | | | 
| * | | | 
| | | | | * 
| | | | | * 
| * | | | |   
| |\ \ \ \ \  
| | | |_|_|/

Also, you could use your browser and look at the content of <ul id="graph-raw-list">

which could look like this:

<li><span class="node-relation">* </span></li>
<li><span class="node-relation">\| *   </span></li>
<li><span class="node-relation">\| \|\  </span></li>
<li><span class="node-relation">\| \| \| * </span></li>
<li><span class="node-relation">\| \| \| \| * </span></li>
<li><span class="node-relation">\| * \| \| \| </span></li>

kjellkvinge on 17 Jan 2018

Since github.com/nicoespeon/gitgraph.js has more stars, maybe we should convert to that repository.

lunny on 18 Jan 2018

@kjellkvinge,
here's the excerpt from the output of the command stated by you:

*
*
| *
| | *
* | |
|\ \ \
| | |/
| |/|
| * |
| * |
* | |
| | | *
| | | *
| |_|/

Plus the excerpt from the output from the browser:

<li><span class="node-relation">* </span></li>
<li><span class="node-relation">* </span></li>
<li><span class="node-relation">| * </span></li>
<li><span class="node-relation">| | * </span></li>
<li><span class="node-relation">* | |   </span></li>
<li><span class="node-relation">|\ \ \  </span></li>
<li><span class="node-relation">| | |/  </span></li>
<li><span class="node-relation">| |/|   </span></li>
<li><span class="node-relation">| * | </span></li>
<li><span class="node-relation">| * | </span></li>
<li><span class="node-relation">* | | </span></li>
<li><span class="node-relation">| | | * </span></li>
<li><span class="node-relation">| | | * </span></li>
<li><span class="node-relation">| |_|/  </span></li>

UPD: in the, say, SourceTree the situation is displayed normally, too.

denpatin on 18 Jan 2018

@lunny http://github.com/nicoespeon/gitgraph.js and https://github.com/bluef/gitgraph.js is two very different projects which has nothing in common except the name :). I dont think this the first provide any easy way to illustrate a repository. Its more for illustrating workflows and explain how git and branching might work.

@denpatin I stil cant reproduce the error with your output. Could you please provide all the lines from the output of the git command, and all the contents in the graph-raw-list-element?

I manage to reproduce the error when i manually change the li elements, for instance:

<li><span class="node-relation">* </span></li>
<li><span class="node-relation">| * </span></li>
<li><span class="node-relation">| | * </span></li>
<li><span class="node-relation">* | |   </span></li>
<li><span class="node-relation">|\ \ \  </span></li>
<li><span class="node-relation">| | |/ | </span></li><!-- there I added another pipe -->
<li><span class="node-relation">| |/|   </span></li>
<li><span class="node-relation">| * | </span></li>
<li><span class="node-relation">| * | </span></li>
<li><span class="node-relation">* | | </span></li>
<li><span class="node-relation">| | | * </span></li>
<li><span class="node-relation">| | | * </span></li>
<li><span class="node-relation">| |_|/  </span></li>

kjellkvinge on 18 Jan 2018

👍1

@kjellkvinge I intentionally reduce the output so as not to gorge a lot of visible space here :)

Ok, here's the full output.

* 
* 
| * 
| | * 
* | |   
|\ \ \  
| | |/  
| |/|   
| * | 
| * | 
* | | 
| | | * 
| | | * 
| |_|/  
|/| |   
* | |   
|\ \ \  
| |_|/  
|/| |   
| * | 
| | * 
| * | 
* | | 
* | | 
|/ /  
* | 
* | 
* |   
|\ \  
* | | 
* | | 
* | |   
|\ \ \  
* | | | 
| | | * 
| | | *   
| | | |\  
| | | * | 
| | * | | 
| * | | |   
| |\ \ \ \  
| | * | | | 
| * | | | |   
| |\ \ \ \ \  
| | |/ / / /  
| |/| | | |   
| | | | | *   
| | | | | |\  
| | | | |/ /  
| | | |_| /   
| | |/| |     
| | * | | 
| | | | * 
| * | | | 
| * | | | 
| | | | * 
| | | | * 
| | | | * 
| | * | |   
| | |\ \ \  
| | | | |/  
| | | |/|   
| | | * |   
| | | |\ \  
| | * | | | 
| |/ / / /  
| | * | | 
| | * | |   
| | |\ \ \  
| | * | | | 
| | | * | | 
| * | | | | 
| * | | | |   
| |\ \ \ \ \  
| | | |_|_|/  
| | |/| | |   
| | * | | | 
| | * | | | 
| * | | | | 
| * | | | |   
| |\ \ \ \ \  
| | |/ / / /  
| | | | * | 
| | | | * | 
| | | | * | 
| | * | | | 
| | * | | | 
| | * | | | 
| * | | | | 
| | * | | | 
| * | | | |   
| |\ \ \ \ \  
| | * | | | | 
| * | | | | | 
| | | | | | *   
| | | | | | |\  
| | | | | | * | 
| * | | | | | |   
| |\ \ \ \ \ \ \  
| | | | | | * | | 
| | | | | | * | | 
| | | | | |/ / /  
| | * | | | | | 
| | | |/ / / /  
| | |/| | | |   
| * | | | | | 
| |/ / / / /  
| * | | | |   
| |\ \ \ \ \  
| | |/ / / /  
| | * | | | 
| | * | | | 
| * | | | |   
| |\ \ \ \ \  
| * \ \ \ \ \   
| |\ \ \ \ \ \  
| | | | | * | | 
| | | | | * | | 
| | | | | * | | 
| | | | | * | | 
| | | | | * | | 
| | | | | * | | 
| | | | | * | | 
| | | | | * | | 
| | | | | * | | 
| | | | | * | | 
| | | | | * | | 
| | | | | * | | 
| | | | | | |/  
| | | | | |/|   
| * | | | | |   
| |\ \ \ \ \ \  
| | |_|_|_|/ /  
| |/| | | | |   
| | * | | | | 
| * | | | | | 
| * | | | | |   
| |\ \ \ \ \ \  
| | |_|_|_|_|/  
| |/| | | | |   
| * | | | | | 
| * | | | | | 
| | | * | | | 
| | | * | | | 
| | | * | | |   
| | | |\ \ \ \  
| | |/ / / / /  
| * | | | | | 
| * | | | | | 
| | * | | | | 
| * | | | | | 
| | |_|_|_|/  
| |/| | | |   
| | * | | | 
| |/ / / /

And the full output from the browser:

<li><span class="node-relation">* </span></li>
<li><span class="node-relation">* </span></li>
<li><span class="node-relation">| * </span></li>
<li><span class="node-relation">| | * </span></li>
<li><span class="node-relation">* | |   </span></li>
<li><span class="node-relation">|\ \ \  </span></li>
<li><span class="node-relation">| | |/  </span></li>
<li><span class="node-relation">| |/|   </span></li>
<li><span class="node-relation">| * | </span></li>
<li><span class="node-relation">| * | </span></li>
<li><span class="node-relation">* | | </span></li>
<li><span class="node-relation">| | | * </span></li>
<li><span class="node-relation">| | | * </span></li>
<li><span class="node-relation">| |_|/  </span></li>
<li><span class="node-relation">|/| |   </span></li>
<li><span class="node-relation">* | |   </span></li>
<li><span class="node-relation">|\ \ \  </span></li>
<li><span class="node-relation">| |_|/  </span></li>
<li><span class="node-relation">|/| |   </span></li>
<li><span class="node-relation">| * | </span></li>
<li><span class="node-relation">| | * </span></li>
<li><span class="node-relation">| * | </span></li>
<li><span class="node-relation">* | | </span></li>
<li><span class="node-relation">* | | </span></li>
<li><span class="node-relation">|/ /  </span></li>
<li><span class="node-relation">* | </span></li>
<li><span class="node-relation">* | </span></li>
<li><span class="node-relation">* |   </span></li>
<li><span class="node-relation">|\ \  </span></li>
<li><span class="node-relation">* | | </span></li>
<li><span class="node-relation">* | | </span></li>
<li><span class="node-relation">* | |   </span></li>
<li><span class="node-relation">|\ \ \  </span></li>
<li><span class="node-relation">* | | | </span></li>
<li><span class="node-relation">| | | * </span></li>
<li><span class="node-relation">| | | *   </span></li>
<li><span class="node-relation">| | | |\  </span></li>
<li><span class="node-relation">| | | * | </span></li>
<li><span class="node-relation">| | * | | </span></li>
<li><span class="node-relation">| * | | |   </span></li>
<li><span class="node-relation">| |\ \ \ \  </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| * | | | |   </span></li>
<li><span class="node-relation">| |\ \ \ \ \  </span></li>
<li><span class="node-relation">| | |/ / / /  </span></li>
<li><span class="node-relation">| |/| | | |   </span></li>
<li><span class="node-relation">| | | | | *   </span></li>
<li><span class="node-relation">| | | | | |\  </span></li>
<li><span class="node-relation">| | | | |/ /  </span></li>
<li><span class="node-relation">| | | |_| /   </span></li>
<li><span class="node-relation">| | |/| |     </span></li>
<li><span class="node-relation">| | * | | </span></li>
<li><span class="node-relation">| | | | * </span></li>
<li><span class="node-relation">| * | | | </span></li>
<li><span class="node-relation">| * | | | </span></li>
<li><span class="node-relation">| | | | * </span></li>
<li><span class="node-relation">| | | | * </span></li>
<li><span class="node-relation">| | | | * </span></li>
<li><span class="node-relation">| | * | |   </span></li>
<li><span class="node-relation">| | |\ \ \  </span></li>
<li><span class="node-relation">| | | | |/  </span></li>
<li><span class="node-relation">| | | |/|   </span></li>
<li><span class="node-relation">| | | * |   </span></li>
<li><span class="node-relation">| | | |\ \  </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| |/ / / /  </span></li>
<li><span class="node-relation">| | * | | </span></li>
<li><span class="node-relation">| | * | |   </span></li>
<li><span class="node-relation">| | |\ \ \  </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| | | * | | </span></li>
<li><span class="node-relation">| * | | | | </span></li>
<li><span class="node-relation">| * | | | |   </span></li>
<li><span class="node-relation">| |\ \ \ \ \  </span></li>
<li><span class="node-relation">| | | |_|_|/  </span></li>
<li><span class="node-relation">| | |/| | |   </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| * | | | | </span></li>
<li><span class="node-relation">| * | | | |   </span></li>
<li><span class="node-relation">| |\ \ \ \ \  </span></li>
<li><span class="node-relation">| | |/ / / /  </span></li>
<li><span class="node-relation">| | | | * | </span></li>
<li><span class="node-relation">| | | | * | </span></li>
<li><span class="node-relation">| | | | * | </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| * | | | | </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| * | | | |   </span></li>
<li><span class="node-relation">| |\ \ \ \ \  </span></li>
<li><span class="node-relation">| | * | | | | </span></li>
<li><span class="node-relation">| * | | | | | </span></li>
<li><span class="node-relation">| | | | | | *   </span></li>
<li><span class="node-relation">| | | | | | |\  </span></li>
<li><span class="node-relation">| | | | | | * | </span></li>
<li><span class="node-relation">| * | | | | | |   </span></li>
<li><span class="node-relation">| |\ \ \ \ \ \ \  </span></li>
<li><span class="node-relation">| | | | | | * | | </span></li>
<li><span class="node-relation">| | | | | | * | | </span></li>
<li><span class="node-relation">| | | | | |/ / /  </span></li>
<li><span class="node-relation">| | * | | | | | </span></li>
<li><span class="node-relation">| | | |/ / / /  </span></li>
<li><span class="node-relation">| | |/| | | |   </span></li>
<li><span class="node-relation">| * | | | | | </span></li>
<li><span class="node-relation">| |/ / / / /  </span></li>
<li><span class="node-relation">| * | | | |   </span></li>
<li><span class="node-relation">| |\ \ \ \ \  </span></li>
<li><span class="node-relation">| | |/ / / /  </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| * | | | |   </span></li>
<li><span class="node-relation">| |\ \ \ \ \  </span></li>
<li><span class="node-relation">| * \ \ \ \ \   </span></li>
<li><span class="node-relation">| |\ \ \ \ \ \  </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | * | | </span></li>
<li><span class="node-relation">| | | | | | |/  </span></li>
<li><span class="node-relation">| | | | | |/|   </span></li>
<li><span class="node-relation">| * | | | | |   </span></li>
<li><span class="node-relation">| |\ \ \ \ \ \  </span></li>
<li><span class="node-relation">| | |_|_|_|/ /  </span></li>
<li><span class="node-relation">| |/| | | | |   </span></li>
<li><span class="node-relation">| | * | | | | </span></li>
<li><span class="node-relation">| * | | | | | </span></li>
<li><span class="node-relation">| * | | | | |   </span></li>
<li><span class="node-relation">| |\ \ \ \ \ \  </span></li>
<li><span class="node-relation">| | |_|_|_|_|/  </span></li>
<li><span class="node-relation">| |/| | | | |   </span></li>
<li><span class="node-relation">| * | | | | | </span></li>
<li><span class="node-relation">| * | | | | | </span></li>
<li><span class="node-relation">| | | * | | | </span></li>
<li><span class="node-relation">| | | * | | | </span></li>
<li><span class="node-relation">| | | * | | |   </span></li>
<li><span class="node-relation">| | | |\ \ \ \  </span></li>
<li><span class="node-relation">| | |/ / / / /  </span></li>
<li><span class="node-relation">| * | | | | | </span></li>
<li><span class="node-relation">| * | | | | | </span></li>
<li><span class="node-relation">| | * | | | | </span></li>
<li><span class="node-relation">| * | | | | | </span></li>
<li><span class="node-relation">| | |_|_|_|/  </span></li>
<li><span class="node-relation">| |/| | | |   </span></li>
<li><span class="node-relation">| | * | | | </span></li>
<li><span class="node-relation">| |/ / / /  </span></li>

I've cut the tags and compared the two outputs. My diff viewer said "The two files are identical".

denpatin on 18 Jan 2018

@denpatin that is a nice graph :) The problem is reproducable. not sure how to fix it though.

A workaround might be the following. Its not perfect, but it will fix the uncaught error.

@@ -371,7 +371,16 @@ var gitGraph = function (canvas, rawGraphList, config) {
                                        inlineIntersect = false;
                                }

-                               color = flows[colomnIndex].color;
+                               if (colomnIndex >= flows.length){
+                               console.log("we have a problem");
+                               console.log(colomnIndex);
+                               console.log(flows);
+                               console.log(currentRow);
+                               color = "#000000";
+                               }else{
+                                       color = flows[colomnIndex].color;
+                               }
+                               //color = flows[colomnIndex].color;

but that is probably a discusion for bluef/gitgraph.js#4

kjellkvinge on 18 Jan 2018

👍1

@kjellkvinge You already have got a patch, cool 👍 Maybe you create a PR for the gitgraph.js project that will close the https://github.com/bluef/gitgraph.js/issues/4 issue? When it's reviewed on that side and accepted then we need to have these changes here updated from the upstream. Maybe we can be in time for releasing v1.3.3, for example 😺

denpatin on 18 Jan 2018

I fixed this bug https://github.com/bluef/gitgraph.js/pull/5

axifive on 31 May 2018

🎉2 👍2

Was this page helpful?

0 / 5 - 0 ratings