Pipelines rendering breaks with exception, ver. 9.2.0, 10.0, yet works on 9.1.0

[Lasica]

Description

Slack discussion: https://kedro.hall.community/support-lY6wDVhxGXNY/kedroviz-crashes-randomly-with-javascript-type-error-after-adding-changes-to-pipeline-registry-yzcmqg0kbQqS

What first triggered this issue was a beningn attempt to reorder the pipelines (whole diff between commits that broke the kedro-viz in our project):

@@ -79,7 +79,16 @@ def register_pipelines() -> dict[str, Pipeline]:
             group_class, input_schema, pipelines[f"training_{group_class}"], pipelines[f"inference_{group_class}"]
         )
 
-    pipelines = {k: pipelines[k] for k in sorted(pipelines.keys())}  # sorting for kedro-viz selection box
-    pipelines["__default__"] = sum(pipelines[f"training_and_inference_{gc}"] for gc in GROUP_CLASSES)  # type: ignore

+    # pipelines = {k: pipelines[k] for k in sorted(pipelines.keys())}  # sorting for kedro-viz selection box
+    order = ["input", "data", "feature", "fgu", "layer", "pricing", "inference", "training"]
+    pipelines = {
+        k: pipelines[k]
+        for k in sorted(
+            pipelines.keys(),
+            key=lambda x: str(order.index(x.split("_")[0]) if x.split("_")[0] in order else len(order)) + x,
+        )
+    } # reordering pipelines in kedro-viz based on order list
+    pipelines["__default__"] = pipelines["input_na"]

^ this was in version 9.2.0

Currently we reversed to version 9.1.0 to keep working and then tried to updating to 10.0. It was working for a few minutes and without any further changes it started consistently crashing on start with the error posted at the very end of this report.

@ edit: after further investigation with dev kedro-viz, we found out that it's a separate issue at 10.0 and it's related to one tag not getting registered/having undefined "name" in js code. The kedro-viz breaks at the pipeline tagged with it and after refreshes/restarts automatically remembers the path to broken page and reloads that one, that's why it seemed to be okay and broke at some point. When manually editing the address bar we can make restore it from crash loop or when we comment out the offending tag from pipeline. We're not sure what separates this tag from others that it behaves differently - it's notable that it does not list in main.tags list of registered tags in generated page's JS.

Context

Makes it unable to work with kedro-viz in newer versions.

Steps to Reproduce

Not well known. In bigger project the kedro-viz just breaks at some random pipelines or at start with exceptions - difficult to track what was the origin/tipping point for the error to occur.

Expected Result

Kedro viz working, stable as in 9.1.0.

Actual Result

Kedro viz unusable.

In 9.2.0 the error of javascript when browsing was typerror exception

Uncaught TypeError: e is undefined
    Ri http://127.0.0.1:4141/static/js/main.f9e37320.js:2
    aA/r[n]< http://127.0.0.1:4141/static/js/main.f9e37320.js:2
    aA http://127.0.0.1:4141/static/js/main.f9e37320.js:2
    uA http://127.0.0.1:4141/static/js/main.f9e37320.js:2
    p http://127.0.0.1:4141/static/js/main.f9e37320.js:2

in 10.0, the error seems different, may be a different cause

main.a2a59735.js:2 
 TypeError: Cannot read properties of undefined (reading 'match')
    at Hi (main.a2a59735.js:2:4364976)
    at main.a2a59735.js:2:4848942
    at Array.map (<anonymous>)
    at LI (main.a2a59735.js:2:4848910)
    at main.a2a59735.js:2:4849263
    at main.a2a59735.js:2:4351469
    at c (main.a2a59735.js:2:4350427)
    at main.a2a59735.js:2:4351602
    at c (main.a2a59735.js:2:4350427)
    at main.a2a59735.js:2:4351568
ds	@	main.a2a59735.js:2
r.callback	@	main.a2a59735.js:2

Your Environment

python 3.10, kedro 0.19.8, kedro viz tested 9.1-10.0, hooks enabled on kedro-viz loading (tried with and without),
OS: macos / should not be relevant
browser: firefox 130.0, edge 1.2.9

Checklist

• Include labels so that we can categorise your issue

[Calychas]

More detailed error log coming from kedro-viz in dev mode:

search-utils.js:28  Uncaught TypeError: Cannot read properties of undefined (reading 'match')
    at getHighlightedText (search-utils.js:28:1)
    at node-list-items.js:34:1
    at Array.map (<anonymous>)
    at highlightMatch (node-list-items.js:32:1)
    at node-list-items.js:96:1
    at recomputationWrapper (index.js:67:1)
    at memoized (defaultMemoize.js:123:1)
    at dependenciesChecker (index.js:81:1)
    at memoized (defaultMemoize.js:123:1)
    at dependenciesChecker (index.js:77:1)

console.js:288  The above error occurred in the <NodeListProvider> component:

   at NodeListProvider (http://localhost:4141/static/js/bundle.js:19467:5)
   at ConnectFunction (http://localhost:4141/static/js/bundle.js:275443:103)
   at div
   at div
   at Sidebar (http://localhost:4141/static/js/bundle.js:25109:5)
   at ConnectFunction (http://localhost:4141/static/js/bundle.js:275443:103)
   at div
   at FlowChartWrapper (http://localhost:4141/static/js/bundle.js:10030:5)
   at ConnectFunction (http://localhost:4141/static/js/bundle.js:275443:103)
   at Route (http://localhost:4141/static/js/bundle.js:278265:29)
   at Switch (http://localhost:4141/static/js/bundle.js:278434:29)
   at ApolloProvider (http://localhost:4141/static/js/bundle.js:318559:19)
   at GraphQLProvider (http://localhost:4141/static/js/bundle.js:22600:5)
   at Router (http://localhost:4141/static/js/bundle.js:277937:30)
   at BrowserRouter (http://localhost:4141/static/js/bundle.js:277451:35)
   at div
   at Wrapper (http://localhost:4141/static/js/bundle.js:30203:5)
   at ConnectFunction (http://localhost:4141/static/js/bundle.js:275443:103)
   at Provider (http://localhost:4141/static/js/bundle.js:275169:5)
   at App (http://localhost:4141/static/js/bundle.js:1590:5)
   at Container

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Somehow a tag has no name which results in node.text becoming undefined and breaking in match function

Kedro-viz v10

[Lasica]

Updated description with additional findings.

[ravi-kumar-pilla]

As React suggests we should also do - #1902 (ErrorBoundary) @jitu5 , @Huongg

The ErrorBoundary should have a fallbackUI (which can also log errors to console for debugging or user reporting)

[ravi-kumar-pilla]

Hi Team,

The FE fix is a good fallback. I was testing the error scenario and I could reproduce the error with the below pipeline_resgistry configuration in the demo-project -

def register_pipelines() -> Dict[str, Pipeline]:
    """Register the project's pipelines.

    Returns:
        A mapping from a pipeline name to a ``Pipeline`` object.

    """
    ingestion_pipeline = di.create_pipeline()

    feature_pipeline = fe.create_pipeline()

    modelling_pipeline = mod.create_pipeline(
        model_types=["linear_regression", "random_forest"]
    )

    reporting_pipeline = rep.create_pipeline()

    error_pipelines = {
        "ingestion_pipeline": ingestion_pipeline,
        "feature_pipeline": feature_pipeline,
        "modelling_pipeline": modelling_pipeline,
        "reporting_pipeline": reporting_pipeline
    }
     
    error_pipelines["__default__"] = pipeline(sum(pipeline for pipeline in error_pipelines.values()), tags=["default_tag1", "default_tag2"])
    
    return error_pipelines

# The above error pipelines will break kedro-viz while a similar setup below does not have any issue.

    working_pipes = {
        "__default__": pipeline(
            ingestion_pipeline
            + feature_pipeline
            + modelling_pipeline
            + reporting_pipeline
        , tags=["default_tag1", "default_tag2"]),
        "Data ingestion": ingestion_pipeline,
        "Modelling stage": modelling_pipeline,
        "Feature engineering": feature_pipeline,
        "Reporting stage": reporting_pipeline,
        "Pre-modelling": ingestion_pipeline + feature_pipeline,
    }

    return working_pipes

• I observed the backend does not return the tags mentioned in default pipeline for some reason
• There might be other scenarios but this would be a good starting point to investigate the issue

cc: @rashidakanchwala @jitu5 Can you please confirm, if the setup breaks Viz.

Thank you

[rashidakanchwala]

Yes, this is it!! super @ravi-kumar-pilla !!!