Table component crash with custom cell views

Ignition
1

I'm having troubles with the table component while rendering multiple "events" in a table cell.

I have a table with columns that use an embedded view. That embedded view accepts an array of objects in its `value` view param. This data is then passed to embedded views in a flex repeater.

image
image498×334 4.27 KB

Every now and then the whole Table crashes with a react error (see logs below). The most annoying part is that it does happen sporadically (1 in 20 change when opening the view).

image
image805×577 5.06 KB

My question then is, why does this happen and is there way fix this?

Ignition version: Ignition standard 8.3.3 (b2026012009)
Logs (browser):
```
10:44:44.892 [Browser Thread: 166766de-cd4d-4df4-8cf6-47aa318f2c4c] ERROR Perspective.Designer.Workspace -- level: LEVEL_ERROR
message: "Error: Minified React error #31; visit Minified React error #31 – React for the full message or use the non-minified dev environment for full errors and additional helpful warnings."
line_number: 121
source: "http://localhost/res/perspective/js/react-dom-18.2.0.js"

10:44:44.892 [Browser Thread: 166766de-cd4d-4df4-8cf6-47aa318f2c4c] ERROR Perspective.Designer.Workspace -- level: LEVEL_ERROR
message: "ui.ErrorBoundary: Component error caught in error boundary: {"componentStack":"\n at A (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:1461933)\n at div\n at t.Content (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:678640)\n at div\n at t.Cell (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:678169)\n at div\n at z (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:680562)\n at div\n at O (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:684891)\n at t (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:380824)\n at div\n at div\n at t (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:388247)\n at A (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:700513)\n at div\n at g (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:687954)\n at div\n at g (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:656548)\n at div\n at div\n at j (http://localhost/res/perspective/js/PerspectiveComponents.7504e0469ae1584669f1.js:2:1475572)\n at l (http://localhost/res/perspective/js/PerspectiveClient.5ad6074170c920d80c72.js:2:738350)\n at n (http://localhost/res/perspective/js/PerspectiveClient.5ad6074170c920d80c72.js:2:508988)\n at x (http://localhost/res/perspective/js/PerspectiveDesigner.04cf813f93fcbd579e01.js:2:157174)\n at (http://localhost/res/perspective/js/PerspectiveDesigner.04cf813f93fcbd579e01.js:2:131665)\n at div\n at h (http://localhost/res/perspective/js/PerspectiveDesignerComponents.c651d1ad9e4596f1ef6c.js:2:160425)\n at l (http://localhost/res/perspective/js/PerspectiveClient.5ad6074170c920d80c72.js:2:738350)\n at n (http://localhost/res/perspective/js/PerspectiveClient.5ad6074170c920d80c72.js:2:508988)\n at x (http://localhost/res/perspective/js/PerspectiveDesigner.04cf813f93fcbd579e01.js:2:157174)\n at (http://localhost/res/perspective/js/PerspectiveDesigner.04cf813f93fcbd579e01.js:2:131665)\n at L (http://localhost/res/perspective/js/PerspectiveClient.5ad6074170c920d80c72.js:2:352958)\n at div\n at t (http://localhost/res/perspective/js/PerspectiveDesigner.04cf813f93fcbd579e01.js:2:31627)\n at div\n at P (http://localhost/res/perspective/js/PerspectiveDesigner.04cf813f93fcbd579e01.js:2:298640)\n at div\n at o (http://localhost/res/perspective/js/PerspectiveDesigner.04cf813f93fcbd579e01.js:2:60161)"}"
line_number: 2
source: "http://localhost/res/perspective/js/PerspectiveClient.5ad6074170c920d80c72.js"
```

2

log the data passed to your subview/cell, so you can check what it looks like when you encounter the error.

The expanded react error is:

Objects are not valid as a React child (found: object with keys {completedAt, updatedBy, dueDate, leanWiki, description, scheduleGroupName, type, equipmentId, dueDateWithTolerance, responsible, name, dutyId, id, scheduleGroupId, completedBy, startDate, updatedAt}). If you meant to render a collection of children, use an array instead.

I'm guessing there's a branch in the code that generates the data that produces a dict instead of a list of dicts in some cases.

3

I also thought that this is the problem, and tried to explicitly set such malformed data in the table.data property. Sadly however this does not crash the table.

I noticed that there are multiple concurrent updates happening to the property. This may cause the issue, especially since i saw a different error related to building the property tree in the javascript component. I debounced these updates so they don't happen as frequently anymore and the problem seems to be resolved with that.