Skip to content

DevTools crashes on null-prototype objects (e.g. Object.groupBy results) #68798

@TimUnderhay

Description

@TimUnderhay

Is this a bug report or a feature request?

  • Bug Report
  • Feature Request

Please provide the steps to reproduce the issue [Bug Report only]

  1. Create a minimal Angular 21 app with a component that exposes a public field returning a null-prototype object. The simplest trigger is Object.groupBy, which always returns a null-prototype object by spec:
import { Component, computed } from '@angular/core';

   @Component({
     selector: 'app-root',
     template: '<p>hi</p>',
   })
   export class AppComponent {
     readonly groupedEmpty = computed(() => Object.groupBy([], () => ''));
   }
  1. Run the app in development mode (ng serve).
  2. Open Chrome DevTools and switch to the Angular tab.

The field must be public for the DevTools property walker to descend into it. The same crash occurs with Map.groupBy() or any value created via Object.create(null).

Please provide the expected behavior vs the actual behavior you encountered [Bug Report only]

Expected: The Angular DevTools panel loads and displays the component tree, allowing the component's properties to be inspected. Null-prototype objects should be formatted as plain objects (e.g. {...} or {}), the same as any other object.

Actual: The DevTools backend throws an uncaught TypeError and the Angular panel fails to load. The entire inspector becomes unusable for the affected app until the offending field is removed or wrapped to attach Object.prototype.

The root cause is in the property-value formatter in backend_bundle.js. The b.Object handler reads e.constructor.name unconditionally:

[b.Object]: e => (e.constructor.name !== "Object" ? `${e.constructor.name} ` : "") + (Kn(e).length > 0 ? "{...}" : "{}")

Null-prototype objects have no constructor, so e.constructor is undefined and .name throws. A guard like e.constructor?.name ?? "Object" resolves it. The neighbouring b.HTMLNode handler has the same shape (e.constructor.name) and is worth auditing at the same time.

Please provide a screenshot if possible [Bug Report only]

(N/A — the failure is in the extension backend rather than the UI; the panel simply fails to populate. The exception is captured in the next field.)

Please provide the exception or error you saw [Bug Report only]

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at 9 (backend_bundle.js:77:35147)
    at Zm (backend_bundle.js:77:36375)
    at rA (backend_bundle.js:77:36971)
    at Hs (backend_bundle.js:77:38498)
    at backend_bundle.js:77:38665
    at Array.forEach (<anonymous>)
    at Bs (backend_bundle.js:77:38616)
    at a (backend_bundle.js:77:44792)
    at hA (backend_bundle.js:77:44966)
    at FU (backend_bundle.js:77:71020)


Debugging confirmed the throw site is the b.Object formatter, called on an object returned by Object.groupBy. The descriptor passed in had containerType: "ReadonlySignal" (the value was reached via a computed signal getter).

Is this a browser-specific issue? If so, please specify the device, browser, and version. [Bug Report only]

Not browser-specific in nature — the bug is in the extension's bundled JavaScript and would manifest in any browser running Angular DevTools. Observed in:

Angular DevTools extension: 1.15.0
Angular: 21.2.11
Chrome (latest stable) on macOS

Description [Feature Request only]

No response

Proposed solution [Feature Request only]

No response

Alternatives considered [Feature Request only]

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions