Augury fails displaying state for components

[geepy]

Augury version (required): canary build 1.21.0 Angular version (required): 7.2.3 Date: 2019-02-06 OS: Windows 7

Demo test application: none yet (rather complex application) Description of issue:

On a lot of angular components, augury only shows "no state to show". With the same components, I can use "$$el.componentInstance" to see all the properties of the component.

Some components can be shown, though, but these are very simple components without complex properties.

When inspecting the augury window with another inspection window, I see the following error:

Error: Code evaluation failed at String.toJSON () at Object. (localhost:4200/polyfills.js:1141) at JSON.stringify () at Object.stringify (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31) at Object.e.serialize (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31) at Object.handleImmediate (chrome-extension://leechohfifidanmkioncamdcibhmmcji/build/backend.js:31) at :1:22 (anonymous) @ frontend.js:786 t.invoke @ frontend.js:801 onInvoke @ frontend.js:137 t.invoke @ frontend.js:801 e.run @ frontend.js:801 (anonymous) @ frontend.js:809 t.invokeTask @ frontend.js:801 onInvokeTask @ frontend.js:137 t.invokeTask @ frontend.js:801 e.runTask @ frontend.js:801 y @ frontend.js:801 Promise.then (async) d @ frontend.js:801 t.scheduleTask @ frontend.js:801 onScheduleTask @ frontend.js:801 t.scheduleTask @ frontend.js:801 e.scheduleTask @ frontend.js:801 e.scheduleMicroTask @ frontend.js:801 M @ frontend.js:809 S @ frontend.js:809 (anonymous) @ frontend.js:809 (anonymous) @ frontend.js:786 callbackWrapper @ VM55:52 _onCallback @ VM55:70 _onMessage @ VM55:71

The lines around the mentioned line in the polyfills file is

// "./node_modules/core-js/modules/_ctx.js": /!!
! ./node_modules/core-js/modules/_ctx.js ! */ /! no static exports found / /*/ (function(module, exports, webpack_require) {

// optional / simple context binding var aFunction = webpack_require(/*! ./_a-function / "./node_modules/core-js/modules/_a-function.js"); module.exports = function(fn, that, length){ aFunction(fn); if(that === undefined)return fn; switch(length){ case 1: return function(a){ return fn.call(that, a); }; case 2: return function(a, b){ return fn.call(that, a, b); }; case 3: return function(a, b, c){ return fn.call(that, a, b, c); }; } return function(/ ...args */){ return fn.apply(that, arguments); }; };

where the last "return" line is line 1141.

[lzilioli]

Same issue. Here's my output:

Error: Code evaluation failed
(anonymous) @ frontend.js:786
t.invoke @ frontend.js:801
onInvoke @ frontend.js:137
t.invoke @ frontend.js:801
e.run @ frontend.js:801
(anonymous) @ frontend.js:809
t.invokeTask @ frontend.js:801
onInvokeTask @ frontend.js:137
t.invokeTask @ frontend.js:801
e.runTask @ frontend.js:801
y @ frontend.js:801
Promise.then (async)
d @ frontend.js:801
t.scheduleTask @ frontend.js:801
onScheduleTask @ frontend.js:801
t.scheduleTask @ frontend.js:801
e.scheduleTask @ frontend.js:801
e.scheduleMicroTask @ frontend.js:801
M @ frontend.js:809
S @ frontend.js:809
(anonymous) @ frontend.js:809
(anonymous) @ frontend.js:786
callbackWrapper @ VM88:52
_onCallback @ VM88:70
_onMessage @ VM88:71

[AryanJ-NYC]

Similar error here:

Chrome Version 71.0.3578.98 (Official Build) (64-bit) macOS Mojave Version 10.14.1 Angular version 7.2.4 Augury 1.22.0

[GenuineFlollie]

This plugin is mainly unusable, the larger components only show "No state to show" or Failed to load component state.

Versie 71.0.3578.98 (Official build) (64-bits) Windows 10 enterprise Angular version 7.2.2 Augury 1.22.0

[adragoset]

Im using ngrx and having an observable mounted from the state store currently causes augry to thrash while loading state and crash the browser.

[lubowiecki]

Same here. I have Simple app with ngrx, augury on Chrome chrashes browser when I try to inspect any component. Augury for Firefox works fine

[wtho]

Maybe related #1351

[AryanJ-NYC]

Is anyone working on this? Is Augury accepting PRs?

[stevenkampen]

@AryanJ-NYC I have been off the project for a while but just back on Recently. I will look at it shortly.

[vzR]

i noticed (probably some other thread mentioned this) - if you navigate to the component you want to inspect in Augury, then head back to the console tab, select 'Top' from the javascript contexts dropdown and type $$el.componentInstance you'll be able to access the component state selected in your Augury tab

win 10 64bit Version 73.0.3683.86 (Official Build) (64-bit)

[karljv]

75% of the components in a larger project show "No state to show". Pretty unusable at this point

Chrome 73.0.3683.103 Angular 6 Augury 1.23.0 OSX Mojave 10.14.4

[patrickcorrigan]

I'm using NGRX and had this problem. If I want to use Augury I must disable the dev tools for NGRX by removing this line from my imports.

StoreDevtoolsModule.instrument()

[clabough]

I'm also getting "no state to show".

Angular 7.2.15

The Augury inspect window is showing

[wtho]

@clabough check if this solution works for you https://github.com/rangle/augury/issues/1351#issuecomment-454381790

[clabough]

yes, commenting out import "core-js/es6/date"; in polyfills.ts fixed it for me.

[chriszrc]

Afaik, with Angular 8, the regular ng serve is now just building the es2015 version, which means there are no polyfills to exclude. I am still having the aforementioned issues :(

[oniice]

Also having issues on Angular 8. With StoreDevtoolsModule.instrument() enabled in root module, component inspector seems to go into an infinite loop of loading the state and crashes chrome

[wtho]

Can someone provide a minimal example? I remember you can debug a bit more by opening the augury devtools and then pressing F12 for the devtools of the augury instance itself.

[oniice]

Hi @wtho Sorry for the delay getting back to you.

Struggling to get anything of value to signal what the issue could be...but got this to happen:

Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
    at Object.t.messageJumpContext (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/content-script.js:24:9921)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/content-script.js:24:8583

and also

 Error: Uncaught (in promise): Error: Failed to read message queue: ReferenceError: inspectedApplication is not defined
    at <anonymous>:1:1
Error: Failed to read message queue: ReferenceError: inspectedApplication is not defined
    at <anonymous>:1:1
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:786:27580
    at t.invoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:801:7005)
    at Object.onInvoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:137:1932)
    at t.invoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:801:6945)
    at e.run (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:801:2169)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:809:2158
    at t.invokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:801:7689)
    at Object.onInvokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:137:1844)
    at t.invokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:801:7610)
    at e.runTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:801:2863)
    at S (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:809:1633)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:809:2189
    at t.invokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:801:7689)
    at Object.onInvokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:137:1844)
    at t.invokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:801:7610)
    at e.runTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:801:2863)
    at y (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:801:10050)

I have a bigger issue trying to help debug this, as Chrome crashes when having the Augury tab open because of what looks life infinitely reloading the component state.

Also glad to see the trashy comment from Øyvind Grimstad has been deleted, keep up the good work. Thank you 😃

[feeloor]

Hi @geepy,

We just released a new version of Augury (1.24.0). Could you please try that version to see if the issue goes away.

Thanks.

[chriszrc]

I completely uninstalled and reinstalled the extension. Some components work, but on others I still get "No state to show". I also sometimes get big error stack traces when navigating to a different in-app route:

Error: Uncaught (in promise): Error: Failed to read message queue: TypeError: Cannot read property 'attributes' of undefined
    at Object.p [as apply] (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:2949)
    at e.patch (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1356:148977)
    at e.updateTree (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:39318)
    at e.processMessage (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:38375)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:38148
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:20506
    at e.invoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:7006)
    at Object.onInvoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1026:909)
    at e.invoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:6946)
    at t.run (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:2205)
Error: Failed to read message queue: TypeError: Cannot read property 'attributes' of undefined
    at Object.p [as apply] (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:2949)
    at e.patch (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1356:148977)
    at e.updateTree (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:39318)
    at e.processMessage (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:38375)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:38148
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:20506
    at e.invoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:7006)
    at Object.onInvoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1026:909)
    at e.invoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:6946)
    at t.run (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:2205)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1493:20639
    at e.invoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:7006)
    at Object.onInvoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1026:909)
    at e.invoke (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:6946)
    at t.run (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:2205)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1508:2717
    at e.invokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:7690)
    at Object.onInvokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1026:821)
    at e.invokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:7611)
    at t.runTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:2868)
    at j (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1508:1930)
    at chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1508:2773
    at e.invokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:7690)
    at Object.onInvokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1026:821)
    at e.invokeTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:7611)
    at t.runTask (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:2868)
    at g (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/frontend.js:1500:9981)
     ``` 

[yallen011]

@chriszrc are you able to share a link to the repo that you were using when you received this error?

[chriszrc]

Not this repo, but I'll try to find one that is public and exhibits the problem. I know my anecdotal evidence is no substitution for a repo, but it does seem like the problem arises on deeply nested components; in this case, nested by several levels of routing modules-