Object too large to inspect. Open your browser console to view?

Question

This is inspired by the stackblitz example of Angular application. Im seeing error specifically telling:

Error: Object too large to inspect. Open your browser console to view.

When I open the stackblitz console and browser console it specifies the same error in chrome dev tools.

For reference I'm attaching similar reproducing stackblitz example here

Whats the root cause of it? How to avoid such a error in stackblitz examples?

Here is my HTML code:

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
</mat-form-field>
<table
  mat-table
  [dataSource]="formdataarray.controls"
  multiTemplateDataRows
  class="mat-elevation-z8" matSort
>
  <ng-container 
    matColumnDef="{{column}}"
    *ngFor="let column of columnsToDisplay"
  >
    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</th>
    <td mat-cell *matCellDef="let element"> {{ element.value[column] }}  </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td
      mat-cell
      *matCellDef="let element"
      [attr.colspan]="columnsToDisplay.length"
    >
      <div
        class="example-element-detail"
        [@detailExpand]=" element.rowEdit == true ? 'expanded':'collapsed' "
      >
        <ng-container>
          <div class="example-element-description">
            <td class="example-element-weight">
              <ng-template pTemplate="input">
                <input
                  pInputText
                  type="text"
                  [(ngModel)]="element.testhiddencol1"
                />
              </ng-template>
              <ng-template pTemplate="output">
                {{element.testhiddencol1}}
              </ng-template>
            </td>
          </div>
        </ng-container>
        <div class="example-element-description">
          <td class="example-element-weight">{{element.description}}</td>
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr
    mat-row
    *matRowDef="let element; columns: columnsToDisplay;"
    class="example-element-row"
    [class.example-expanded-row]="expandedElement === element"
    (click)="rowClicked(element)"
  ></tr>
  <tr
    mat-row
    *matRowDef="let row; columns: ['expandedDetail']"
    class="example-detail-row"
  ></tr>
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
  </tr>
</table>

And my component.ts is file :

import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";

import {
  animate,
  state,
  style,
  transition,
  trigger,
} from "@angular/animations";

import { Table, TableService } from "primeng/table";
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { ThrowStmt } from '@angular/compiler';

/**
 * @title Table with expandable rows
 */
@Component({
  selector: "table-expandable-rows-example",
  styleUrls: ["table-expandable-rows-example.css"],
  templateUrl: "table-expandable-rows-example.html",
  providers: [
    TableService,
    {
      provide: Table,
    },
  ],
  animations: [
    trigger("detailExpand", [
      state("collapsed", style({ height: "0px", minHeight: "0" })),
      state("expanded", style({ height: "*" })),
      transition(
        "expanded <=> collapsed",
        animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)")
      ),
    ]),
  ],
})
export class TableExpandableRowsExample implements AfterViewInit, OnInit {


  constructor(private fb: FormBuilder) {

  }

  formData: FormGroup = new FormGroup({});
  formdataarray: FormArray = new FormArray([]);
  dataSource = new MatTableDataSource([]);

  @ViewChild(MatSort) sort: MatSort;
  columnsToDisplay = ["rowEdit", "name", "weight", "symbol", "position", "investorName"];
  expandedElement: PeriodicElement | null;

  ngOnInit() {
    this.formData = this.fb.group({
      rowEdit: [],
      name: [],
      weight: [],
      symbol: [],
      position: [],
      investorName: []
    })

    

    for(let i =0; i<ELEMENT_DATA.length;i++){
      this.formdataarray.push(
        this.fb.group({
          rowEdit: ELEMENT_DATA[i].rowEdit,
          name: ELEMENT_DATA[i].name,
          weight: ELEMENT_DATA[i].weight,
          symbol: ELEMENT_DATA[i].symbol,
          position: ELEMENT_DATA[i].position,
          investorName: ELEMENT_DATA[i].investorName
        })
      )

    }     
  


  }

  ngAfterViewInit() {

    console.log("$$$$$$$", this.sort)

    this.dataSource.sort = this.sort;
  }
  rowClicked(row: PeriodicElement): void {
    console.log(row); 

    row.rowEdit = true;

  }
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    console.log(filterValue);
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  description: string;
  testhiddencol1: string;
  rowEdit: boolean;
  investorName: string;
}

const CO_MANAGER_DATA: string[] = [
  "Manager 1",
  "Manager 2",
  "Manager 3",
  "Manager 4",
];

const ELEMENT_DATA: PeriodicElement[] = [
  {
    position: 1,
    name: "Hydrogen",
    weight: 1.0079,
    symbol: "H",
    description: `Hydrogen is a chemical element with symbol H and atomic number 1. With a standard
        atomic weight of 1.008, hydrogen is the lightest element on the periodic table.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "abc investor"
  },
  {
    position: 2,
    name: "Helium",
    weight: 4.0026,
    symbol: "He",
    description: `Helium is a chemical element with symbol He and atomic number 2. It is a
        colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas
        group in the periodic table. Its boiling point is the lowest among all the elements.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "abc investor"

  },
  {
    position: 3,
    name: "Lithium",
    weight: 6.941,
    symbol: "Li",
    description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft,
        silvery-white alkali metal. Under standard conditions, it is the lightest metal and the
        lightest solid element.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "cde investor"

  },
  {
    position: 4,
    name: "Beryllium",
    weight: 9.0122,
    symbol: "Be",
    description: `Beryllium is a chemical element with symbol Be and atomic number 4. It is a
        relatively rare element in the universe, usually occurring as a product of the spallation of
        larger atomic nuclei that have collided with cosmic rays.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "fgh investor"

  },
  {
    position: 5,
    name: "Boron",
    weight: 10.811,
    symbol: "B",
    description: `Boron is a chemical element with symbol B and atomic number 5. Produced entirely
        by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a
        low-abundance element in the Solar system and in the Earth's crust.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "abc investor"

  },
  {
    position: 6,
    name: "Carbon",
    weight: 12.0107,
    symbol: "C",
    description: `Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic
        and tetravalent—making four electrons available to form covalent chemical bonds. It belongs
        to group 14 of the periodic table.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "ijk investor"

  },
  {
    position: 7,
    name: "Nitrogen",
    weight: 14.0067,
    symbol: "N",
    description: `Nitrogen is a chemical element with symbol N and atomic number 7. It was first
        discovered and isolated by Scottish physician Daniel Rutherford in 1772.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "lmn investor"

  },
  {
    position: 8,
    name: "Oxygen",
    weight: 15.9994,
    symbol: "O",
    description: `Oxygen is a chemical element with symbol O and atomic number 8. It is a member of
         the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing
         agent that readily forms oxides with most elements as well as with other compounds.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "lm investor"

  },
  {
    position: 9,
    name: "Fluorine",
    weight: 18.9984,
    symbol: "F",
    description: `Fluorine is a chemical element with symbol F and atomic number 9. It is the
        lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard
        conditions.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "test investor"

  },
  {
    position: 10,
    name: "Neon",
    weight: 20.1797,
    symbol: "Ne",
    description: `Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas.
        Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about
        two-thirds the density of air.`,
    testhiddencol1: "testhiddencol1",
    rowEdit: false,
    investorName: "xyz investor"

  },
];

Answer 1

Dunno what's wrong, but comment the following line

console.log("$$$$$$$", this.sort)

and the error disappears.

Answer 2

The error just states that Stackblitz cannot display your object(this.sort) in their console because it is too large, but you can find it in the browser console if you need it.

It does not actually break the execution like normal exceptions, so maybe Stackblitz should have used a console.warn() instead of a console.error().