Chrome SIGILL crash on large amounts of blocks

[dlohvinov]

Hi!

I have an issue in my Rete-based Vue app while i'm trying to render approximately 900 blocks connected to each other from JSON (36.5k lines JSON structure in human-readable formatting).

In Chrome, after ~1 min loading i'm getting crash with error code: SIGILL. In Firefox, browser loaded my JSON, but lost 3/4 of all connections.

Even after removing all my at-initialize scripts, I reached to load it fully in Firefox, but it is still lagging too much so it's not usable :(

So my question: is this problem with my own code, or it's just Rete limit and I can't go any further with that? :)

I attach my editor initialization code:

      const container = document.getElementById('editor');
      const editor = new Rete.NodeEditor('[email protected]', container);
      window._editor = editor;
      this.setEditor(editor);
      editor.use(VueRenderPlugin, {
        component: Node,
      });
      editor.use(ConnectionPlugin);
      editor.use(ContextMenuPlugin, {
        delay: 2000,
        searchBar: false,
      });
      editor.use(DockPlugin, {
        container: this.$refs['nodes-panel'].$el, // html element to which pseudo nodes will be added
        itemClass: 'node-preview-wrapper',
        plugins: [VueRenderPlugin], // list with plugins for rendering
        // или двумерный массив с опциями для плагина:
        // plugins: [[VueRenderPlugin, pluginOptions]]
      });

      const background = document.createElement('div');
      background.classList = 'editor-background';

      editor.use(AreaPlugin, { background });

      editor.use(TaskPlugin);
      editor.use(LifecyclePlugin);
      editor.use(MinimapPlugin);

      const engine = new Rete.Engine('[email protected]');

      registerReteComponents({
        editor,
        engine,
      });

      editor.on('error', (err) => {
        console.error(err.message);
      });

      editor.on(
        'process connectioncreated connectionremoved nodecreated',
        async () => {
          if (engine.silent) return;
          // console.log('process', event);
          await engine.abort();
        },
      );

      editor.on('nodecreated noderemoved connectioncreated connectionremoved', () => {
      });

      editor.on('zoom', ({ zoom }) => zoom < 1.5 && zoom > 0.1);

      editor.on('noderemoved', (node) => {
        if (this.selectedNode === node) this.selectNode(null);
      });
      /*
       atShowContextMenuRestrictor is validation script, which aborts restricted context menu
       and prevents context menu on editor space right click
       */
      editor.on('showcontextmenu', ({ node }) => atShowContextMenuRestrictor.trigger({ node }));
      // Disable zoom on dblcklick
      editor.on('zoom', ({ source }) => source !== 'dblclick');

      editor.trigger('process');

      await editor.fromJSON(this.editorJSON);

      setTimeout(() => {
        editor.view.resize();
        AreaPlugin.zoomAt(editor);
        addNodesBackgroundCSS();
        this.atInitialize();
      }, 1000);
    },

And, sample of my JSON (actually, js) file:

    '484': {
      'data': {
        'async': false,
        'extensions': {
          'break': true,
          'tag': '484-execute-custom-tag',
        },
        'name': '111',
      },
      'id': 484,
      'inputs': {
        'in': {
          'connections': [
            {
              'data': {},
              'node': 482,
              'output': '111',
            },
          ],
        },
      },
      'name': 'execute',
      'outputs': {
        'out': {
          'connections': [],
        },
      },
      'position': [
        25166.90364124364,
        -3475.936368231176,
      ],
    },
    '485': {
      'data': {
        'async': false,
        'extensions': {
          'break': true,
          'tag': '485-execute-custom-tag',
        },
        'name': 'else2',
      },
      'id': 485,
      'inputs': {
        'in': {
          'connections': [
            {
              'data': {},
              'node': 483,
              'output': 'out',
            },
          ],
        },
      },
      'name': 'execute',
      'outputs': {
        'out': {
          'connections': [],
        },
      },
      'position': [
        25392.467112464747,
        -3691.02818636017,
      ],
    },

I can also attach more code or any assets, if needed.

Thank you! 🇺🇦