Client-side fetch queries are crashing the app

[apedroferreira]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Create a fetch query (e.g.: "fetch | default")
2. Enable "Run in the browser"
3. Press the "Preview button"

Current behavior 😯

Doing the steps above crashes the app.

Expected behavior 🤔

Doing the steps above shows the query result without crashing the app.

Context 🔦

This seems like an important bug that should be fixed before fully launching the demo.

Your environment 🌎

No response

[Janpot]

Interesting, we'll need an integration test for this. Seems to not happen when I do:

--- a/packages/toolpad-app/src/toolpadDataSources/rest/runtime.tsx
+++ b/packages/toolpad-app/src/toolpadDataSources/rest/runtime.tsx
@@ -51,7 +51,6 @@ export async function clientExec(
           receive: 0,
         },
       };
-      har.log.entries.push(entry);
       return res;
     };

memory leak in chrome?

edit

Actually, it seems to be in perf-cascade:

--- a/packages/toolpad-app/src/components/HarViewer.tsx
+++ b/packages/toolpad-app/src/components/HarViewer.tsx
@@ -45,7 +45,7 @@ export default function HarViewer({ value = createHarLog(), sx }: HarViewerProps
   React.useEffect(() => {
     const root = rootRef.current;
     if (value && value.log.entries.length > 0 && root) {
-      const svg = fromHar(value);
+      const svg = document.createElement('svg');
       fixLinks(svg);
       if (theme.palette.mode === 'dark') {
         forceDarkMode(svg, theme);

[apedroferreira]

memory leak in chrome?

Not sure, I noticed that it was making the request successfully but something is crashing afterwards, didn't investigate much further yet.

[bharatkashyap]

I can reproduce as well (similar behaviour on Firefox as well)

https://user-images.githubusercontent.com/19550456/203854359-1db446c9-898a-4302-9b3a-f4bb46ed3d61.mov

[Janpot]

Fix in https://github.com/mui/mui-toolpad/pull/1383