Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-46436

Blue Ocean: Error rendering PipelineRunGraph

    Details

    • Type: Bug
    • Status: Closed (View Workflow)
    • Priority: Critical
    • Resolution: Fixed
    • Component/s: blueocean-plugin
    • Labels:
      None
    • Environment:
      Jenkins:2.74
      Blue Ocean: 1.2.0
    • Similar Issues:
    • Epic Link:
    • Sprint:
      Blue Ocean 1.2, Blue Ocean 1.3

      Description

      After recent upgrade to 1.2.0 the existing views are broken with the following error. Not sure if it is going to be the same problem for the new runs, yet to try out. Appreciate some inputs?

      Error rendering PipelineRunGraph: TypeError: Cannot read property 'name' of undefined
      

        Attachments

          Issue Links

            Activity

            Hide
            michaelneale Michael Neale added a comment -

            Naresh Rayapati unfortunately not enough information. Are all your plugins up to date? Can you share a Jenkinsfile that makes this happen (possibly a reduced down one?) - that would be ideal. Ie create a new job, get it to fail in this way - then should be easy to find/fix. 

             

            Also some more errors from the browser console. 

            Show
            michaelneale Michael Neale added a comment - Naresh Rayapati unfortunately not enough information. Are all your plugins up to date? Can you share a Jenkinsfile that makes this happen (possibly a reduced down one?) - that would be ideal. Ie create a new job, get it to fail in this way - then should be easy to find/fix.    Also some more errors from the browser console. 
            Hide
            nrayapati Naresh Rayapati added a comment -

            Sorry for not providing much information above, I was trying to reproduce with some simple example as I can't share the original pipeline code earlier. 

            • Yes all the plugins are up to date. 
            • Here is the basic example, Looks like it is the problem when we have more stages, looks like the hard limit of 100 is causing some issues.
            • And also attaching the browser console log for reference. I tried on safari, firefox and chrome, same error.

            Pipeline:

            def stepsForParallel = [:]
            
            for(int i =0; i < 10; i++) {
                stepsForParallel[i] = { echo i.toString() }
            }
            
            parallel stepsForParallel
            
            stepsForParallel = [:]
            for(int i =0; i < 20; i++) {
                stepsForParallel[i] = { echo i.toString() }
            }
            
            parallel stepsForParallel
            
            stepsForParallel = [:]
            for(int i =0; i < 20; i++) {
                stepsForParallel[i] = { echo i.toString() }
            }
            
            parallel stepsForParallel
            stepsForParallel = [:]
            for(int i =0; i < 20; i++) {
                stepsForParallel[i] = { echo i.toString() }
            }
            
            parallel stepsForParallel
            stepsForParallel = [:]
            for(int i =0; i < 50; i++) {
                stepsForParallel[i] = { echo i.toString() }
            }
            
            parallel stepsForParallel
            
            

            Console Error: (Chrome)

            Browser configuration of @jenkins-cd/logging is explained at https://tfennelly.github.io/jenkins-js-logging/index.html#browser-config
            jenkins-js-extension.js:48152 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.
            componentDidMount @ jenkins-js-extension.js:48152
            target.(anonymous function) @ jenkins-js-extension.js:8385
            notifyAll @ blueocean.js:112436
            close @ blueocean.js:124530
            closeAll @ blueocean.js:127928
            perform @ blueocean.js:127875
            perform @ blueocean.js:127862
            perform @ blueocean.js:125753
            flushBatchedUpdates @ blueocean.js:125836
            closeAll @ blueocean.js:127928
            perform @ blueocean.js:127875
            batchedUpdates @ blueocean.js:121545
            enqueueUpdate @ blueocean.js:125864
            enqueueUpdate @ blueocean.js:125472
            enqueueForceUpdate @ blueocean.js:125605
            ReactComponent.forceUpdate @ blueocean.js:116984
            (anonymous) @ jenkins-js-extension.js:8417
            Reaction.runReaction @ jenkins-js-extension.js:10989
            runReactions @ blueocean.js:97771
            transactionEnd @ blueocean.js:97843
            executeAction @ blueocean.js:97094
            res @ blueocean.js:97062
            (anonymous) @ blueocean.js:6679
            tryCatch @ blueocean.js:72595
            invokeCallback @ blueocean.js:72610
            publish @ blueocean.js:72578
            flush @ blueocean.js:72306
            blueocean.js:49307 error rendering PipelineRunGraph TypeError: Cannot read property 'name' of undefined
                at blueocean.js:10137
                at Array.map (<anonymous>)
                at PipelineGraph.createNodeColumns (blueocean.js:10133)
                at PipelineGraph.stagesUpdated (blueocean.js:10014)
                at PipelineGraph.componentWillMount (blueocean.js:9966)
                at ReactCompositeComponentWrapper.performInitialMount (blueocean.js:117744)
                at ReactCompositeComponentWrapper.mountComponent (blueocean.js:117651)
                at Object.mountComponent (blueocean.js:124664)
                at ReactDOMComponent.mountChildren (blueocean.js:123542)
                at ReactDOMComponent._createInitialChildren (blueocean.js:119118)
            blueocean.js:49307 error rendering PipelineRunGraph TypeError: Cannot read property 'name' of undefined
                at blueocean.js:10137
                at Array.map (<anonymous>)
                at PipelineGraph.createNodeColumns (blueocean.js:10133)
                at PipelineGraph.stagesUpdated (blueocean.js:10014)
                at PipelineGraph.componentWillMount (blueocean.js:9966)
                at ReactCompositeComponentWrapper.performInitialMount (blueocean.js:117744)
                at ReactCompositeComponentWrapper.mountComponent (blueocean.js:117651)
                at Object.mountComponent (blueocean.js:124664)
                at ReactDOMComponent.mountChildren (blueocean.js:123542)
                at ReactDOMComponent._createInitialChildren (blueocean.js:119118)
            

            Let me know if you need more information please. Thanks for looking into this.

            Show
            nrayapati Naresh Rayapati added a comment - Sorry for not providing much information above, I was trying to reproduce with some simple example as I can't share the original pipeline code earlier.  Yes all the plugins are up to date.  Here is the basic example, Looks like it is the problem when we have more stages, looks like the hard limit of 100 is causing some issues. And also attaching the browser console log for reference. I tried on safari, firefox and chrome, same error. Pipeline: def stepsForParallel = [:] for ( int i =0; i < 10; i++) { stepsForParallel[i] = { echo i.toString() } } parallel stepsForParallel stepsForParallel = [:] for ( int i =0; i < 20; i++) { stepsForParallel[i] = { echo i.toString() } } parallel stepsForParallel stepsForParallel = [:] for ( int i =0; i < 20; i++) { stepsForParallel[i] = { echo i.toString() } } parallel stepsForParallel stepsForParallel = [:] for ( int i =0; i < 20; i++) { stepsForParallel[i] = { echo i.toString() } } parallel stepsForParallel stepsForParallel = [:] for ( int i =0; i < 50; i++) { stepsForParallel[i] = { echo i.toString() } } parallel stepsForParallel Console Error: (Chrome) Browser configuration of @jenkins-cd/logging is explained at https: //tfennelly.github.io/jenkins-js-logging/index.html#browser-config jenkins-js-extension.js:48152 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. componentDidMount @ jenkins-js-extension.js:48152 target.(anonymous function) @ jenkins-js-extension.js:8385 notifyAll @ blueocean.js:112436 close @ blueocean.js:124530 closeAll @ blueocean.js:127928 perform @ blueocean.js:127875 perform @ blueocean.js:127862 perform @ blueocean.js:125753 flushBatchedUpdates @ blueocean.js:125836 closeAll @ blueocean.js:127928 perform @ blueocean.js:127875 batchedUpdates @ blueocean.js:121545 enqueueUpdate @ blueocean.js:125864 enqueueUpdate @ blueocean.js:125472 enqueueForceUpdate @ blueocean.js:125605 ReactComponent.forceUpdate @ blueocean.js:116984 (anonymous) @ jenkins-js-extension.js:8417 Reaction.runReaction @ jenkins-js-extension.js:10989 runReactions @ blueocean.js:97771 transactionEnd @ blueocean.js:97843 executeAction @ blueocean.js:97094 res @ blueocean.js:97062 (anonymous) @ blueocean.js:6679 tryCatch @ blueocean.js:72595 invokeCallback @ blueocean.js:72610 publish @ blueocean.js:72578 flush @ blueocean.js:72306 blueocean.js:49307 error rendering PipelineRunGraph TypeError: Cannot read property 'name' of undefined at blueocean.js:10137 at Array.map (<anonymous>) at PipelineGraph.createNodeColumns (blueocean.js:10133) at PipelineGraph.stagesUpdated (blueocean.js:10014) at PipelineGraph.componentWillMount (blueocean.js:9966) at ReactCompositeComponentWrapper.performInitialMount (blueocean.js:117744) at ReactCompositeComponentWrapper.mountComponent (blueocean.js:117651) at Object .mountComponent (blueocean.js:124664) at ReactDOMComponent.mountChildren (blueocean.js:123542) at ReactDOMComponent._createInitialChildren (blueocean.js:119118) blueocean.js:49307 error rendering PipelineRunGraph TypeError: Cannot read property 'name' of undefined at blueocean.js:10137 at Array.map (<anonymous>) at PipelineGraph.createNodeColumns (blueocean.js:10133) at PipelineGraph.stagesUpdated (blueocean.js:10014) at PipelineGraph.componentWillMount (blueocean.js:9966) at ReactCompositeComponentWrapper.performInitialMount (blueocean.js:117744) at ReactCompositeComponentWrapper.mountComponent (blueocean.js:117651) at Object .mountComponent (blueocean.js:124664) at ReactDOMComponent.mountChildren (blueocean.js:123542) at ReactDOMComponent._createInitialChildren (blueocean.js:119118) Let me know if you need more information please. Thanks for looking into this.
            Hide
            michaelneale Michael Neale added a comment -

            Hey Josh McDonald do you mind taking a look at this one possibly with Cliff Meyers next week? 

            Show
            michaelneale Michael Neale added a comment - Hey Josh McDonald do you mind taking a look at this one possibly with Cliff Meyers next week? 
            Hide
            michaelneale Michael Neale added a comment -

            actually Cliff Meyers do you mind having a look at this on friday? sample pipeline should reproduce it. 

            Show
            michaelneale Michael Neale added a comment - actually Cliff Meyers do you mind having a look at this on friday? sample pipeline should reproduce it. 
            Hide
            michaelneale Michael Neale added a comment -

            and thanks Naresh Rayapati for the sample pipeline, most helpful

            Show
            michaelneale Michael Neale added a comment - and thanks Naresh Rayapati for the sample pipeline, most helpful
            Hide
            cliffmeyers Cliff Meyers added a comment -

            Michael Neale James Dumay the "limit" of 100 we're running into is due to the default pagination applied to the "nodes" endpoint. I'm not sure how important it is that we handle nodes > 100 in an elegant fashion. We can fix this a few different ways on the UI:

            1. Make sure that pipeline graph renders but only show first 100 nodes.
            2. Bump the limit up to something higher like 500 or 1000 nodes.
            3. Add some logic to the UI so it traverses the paginated data until there are no more pages left.

            I was chatting with Vivek Pandey about this and he had some thoughts about the performance implications on the backend of fetching this much data. I believe he'll post a comment with some thoughts below.

            Show
            cliffmeyers Cliff Meyers added a comment - Michael Neale James Dumay the "limit" of 100 we're running into is due to the default pagination applied to the "nodes" endpoint. I'm not sure how important it is that we handle nodes > 100 in an elegant fashion. We can fix this a few different ways on the UI: Make sure that pipeline graph renders but only show first 100 nodes. Bump the limit up to something higher like 500 or 1000 nodes. Add some logic to the UI so it traverses the paginated data until there are no more pages left. I was chatting with Vivek Pandey about this and he had some thoughts about the performance implications on the backend of fetching this much data. I believe he'll post a comment with some thoughts below.
            Hide
            cliffmeyers Cliff Meyers added a comment -

            Michael Neale James Dumay I've hardened some of the UI code so it's resistant to when we fetch 100 nodes but there are actually more - it just renders the first 100 in the graph. It's probably good to have that in place regardless, I just wanted you guys to make the call as to how much further we should go to support the n > 100 use case.

            Show
            cliffmeyers Cliff Meyers added a comment - Michael Neale James Dumay I've hardened some of the UI code so it's resistant to when we fetch 100 nodes but there are actually more - it just renders the first 100 in the graph. It's probably good to have that in place regardless, I just wanted you guys to make the call as to how much further we should go to support the n > 100 use case.
            Hide
            nrayapati Naresh Rayapati added a comment - - edited

            Thanks Cliff Meyers Agree with you, to maintain the passivity the first option would be to show first 100 when the actual number is more than the limit.

            And also it would be awesome if we can bump the limit slightly, 100 seems little low for me, may be just to 150 or 200 as we have most of our pipelines has just little over 100 stages. Just my 1¢.

            Show
            nrayapati Naresh Rayapati added a comment - - edited Thanks Cliff Meyers  Agree with you, to maintain the passivity the first option would be to show first 100 when the actual number is more than the limit. And also it would be awesome if we can bump the limit slightly, 100 seems little low for me, may be just to 150 or 200 as we have most of our pipelines has just little over 100 stages. Just my 1¢.
            Hide
            cliffmeyers Cliff Meyers added a comment -

            Added a link to WIP PR.

            Show
            cliffmeyers Cliff Meyers added a comment - Added a link to WIP PR.
            Hide
            cliffmeyers Cliff Meyers added a comment -

            Pipeline graph will no longer error out but the render but limited to 100 nodes. Josh McDonald is doing some more involved improvements to pipeline graph and if we raise the limit, that work will be done there. I'll try to post an update to this ticket if that happens as a FYI.

            Show
            cliffmeyers Cliff Meyers added a comment - Pipeline graph will no longer error out but the render but limited to 100 nodes. Josh McDonald is doing some more involved improvements to pipeline graph and if we raise the limit, that work will be done there. I'll try to post an update to this ticket if that happens as a FYI.
            Hide
            nrayapati Naresh Rayapati added a comment -

            Thanks a bunch Cliff Meyers, is there any date that we can expect this code to be released? Thanks again.  

            Show
            nrayapati Naresh Rayapati added a comment - Thanks a bunch Cliff Meyers , is there any date that we can expect this code to be released? Thanks again.  
            Hide
            cliffmeyers Cliff Meyers added a comment -

            Naresh Rayapati sorry for the much-delayed reply here... it will be available in Blue Ocean 1.3. That should ship hopefully in the next week or so, or you can grab the 1.3 beta off experimental Jenkins update center.

            Show
            cliffmeyers Cliff Meyers added a comment - Naresh Rayapati sorry for the much-delayed reply here... it will be available in Blue Ocean 1.3. That should ship hopefully in the next week or so, or you can grab the 1.3 beta off experimental Jenkins update center.
            Hide
            nrayapati Naresh Rayapati added a comment -

            Cliff Meyers No thats fine, Thanks for an update.

            Show
            nrayapati Naresh Rayapati added a comment - Cliff Meyers No thats fine, Thanks for an update.
            Hide
            nrayapati Naresh Rayapati added a comment -

            Cliff Meyers I have updated the plugin to 1.3.0 yesterday and it was working correctly for the existing jobs, how ever it is still a problem for the new jobs, this time it is a slight different error Error rendering PipelineRunGraph: TypeError: Cannot read property 'id' of undefined. Appreciate your help. Thank you. 

            Also attaching the screenshot which has the js stack-trace too. 

            Show
            nrayapati Naresh Rayapati added a comment - Cliff Meyers I have updated the plugin to 1.3.0 yesterday and it was working correctly for the existing jobs, how ever it is still a problem for the new jobs, this time it is a slight different error  Error rendering PipelineRunGraph: TypeError: Cannot read property 'id' of undefined.  Appreciate your help. Thank you.  Also attaching the screenshot which has the js stack-trace too. 

              People

              • Assignee:
                cliffmeyers Cliff Meyers
                Reporter:
                nrayapati Naresh Rayapati
              • Votes:
                0 Vote for this issue
                Watchers:
                7 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: