kedro-org / kedro-viz

Visualise your Kedro data and machine-learning pipelines and track your experiments.
https://demo.kedro.org
Apache License 2.0
670 stars 110 forks source link

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

Open Lasica opened 1 day ago

Lasica commented 1 day ago

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

Calychas commented 1 day ago

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 commented 1 day ago

Updated description with additional findings.