title: Angular 11 - Data volumetry issues
body: <p>My application works fine, except when the response from the service brings back a high amount of data.</p>
  <p>This would be the response of the service: (the problem comes when the &quot;errors&quot; array has more than 10000 elements)</p>
  <pre><code>{
     &quot;output&quot;:[
        {
           &quot;id&quot;:1,
           &quot;status&quot;:&quot;OK&quot;,
           &quot;errors&quot;:[
              
           ]
        },
        {
           &quot;id&quot;:2,
           &quot;status&quot;:&quot;OK&quot;,
           &quot;errors&quot;:[
              
           ]
        },
        {
           &quot;id&quot;:3,
           &quot;status&quot;:&quot;ERROR&quot;,
           &quot;errors&quot;:[
              {
                 &quot;id&quot;:1,
                 &quot;name&quot;:&quot;Name1&quot;
              },
              {
                 &quot;id&quot;:2,
                 &quot;name&quot;:&quot;Name2&quot;
              }
           ]
        }
     ]
  }
  </code></pre>
  <p>When this happens the browser crashes and I get a message to close the tab. (I'm working on Chrome, but the App is for all browsers). When the service responds 200, but brings a high volume of data, the loading icon stays for a while and the browser ends up giving an error (The connection to the Chrome debugger is also closed):</p>
  <p><a href="https://i.stack.imgur.com/FujBt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FujBt.png" alt="enter image description here" /></a></p>
  <p>I am trying with chunk method (slice function), but I lose information and I am currently investigating &quot;Web Workers&quot; that I have never used</p>
  <pre><code>  private chunkArray(arr, size: number) {
      return arr.length &gt; size
      ? [arr.slice(0, size), ...this.chunkArray(arr.slice(size), size)]
      : [arr];
    }
  </code></pre>
  <p>This is the service call from component:</p>
  <pre><code>this.processesService.getData(id).subscribe(response =&gt; {
      console.log(response)
  }, _  =&gt; {this.router.navigate([&quot;home/&quot; + id])});
  </code></pre>
  <p>This is the service:</p>
  <pre><code>public getData(id: number): Observable&lt;RestResponse&lt;DataOutput[]&gt;&gt; {
        let serviceName = &quot;/processes/data&quot;;
        if (id) {
          serviceName = serviceName + '?iddata=' + id;
        }
        return this.service.get&lt;any&gt;(serviceName)
        .pipe(
          tap(_ =&gt; this.log('fetched data')),
          catchError(this.handleError&lt;DataOutput[]&gt;('getData', []))
        );
    }
  </code></pre>
  <p>NOTE: Sometimes it randomly loads everything correctly</p>
  <p>Any suggestion? Perhaps it would be more convenient to solve the problem from the back-end? or better front end? Thanks,</p>