Augury not showing state for many components #1340

tkstang · 2018-09-10T22:31:02Z

Augury version (required): Canary build 1.19.3
Angular version (required): 6.0.7
Date: 9/10/18
OS: Mac OS High Sierra

I know this has been an on going issue that seems to have been a problem for many people, all previously opened issues were marked as resolved so I'm opening a new one. I'm using the most current canary build and many of my components still load and then indicate "no state to show" in the properties tab. Unfortunately I can't share a repository as the issue is with a private repo at my place of work. The application is rather complex, it seems that simpler smaller components will show state but most larger components do not. I have previously seen in other issues where there were mentions of things like components with router as a dependency working, components loaded with resolvers, etc. All of these issues are currently marked as resolved, however, and I am still experiencing the issue.

santiago-elustondo · 2018-09-10T23:57:43Z

Hey, @tkstang
Thank you for reporting.

Does the state tab show "no state to show", "loading state..." or any other message?

Could you open a second inspector window, and tell me if you see any errors in the console? (hit option+command+i while looking at Augury's devtools panel)

tkstang · 2018-09-11T00:12:59Z

It shows "loading state..." for a few seconds and then switches to "no state to show." I'm not sure if I'm not quite understanding you correctly but hitting option+cmd+i while looking at augury is just going to close the inspector window. If you mean errors with the application there are no errors aside from a server error from a network request our back end that is down. Nothing with the application itself. If there is some way I'm missing to actually see any errors with augury itself perhaps I'm not quite following you.

Also just to clarify I have had this issue for months, I was hoping it would be resolved by fixes that were presented as solutions for other open issues of the same problem.

santiago-elustondo · 2018-09-11T00:23:46Z

option+cmd+i while looking at augury should open a second inspector window, which inspects the first inspector window.

tkstang · 2018-09-11T01:09:07Z

I'm getting a bunch of this error

frontend.js:788 SyntaxError: Unexpected token default
    at new Function (<anonymous>)
    at Object.e.deserialize (frontend.js:599)
    at frontend.js:788
    at t.invoke (frontend.js:795)
    at Object.onInvoke (frontend.js:138)
    at t.invoke (frontend.js:795)
    at e.run (frontend.js:795)
    at frontend.js:803
    at t.invokeTask (frontend.js:795)
    at Object.onInvokeTask (frontend.js:138)
(anonymous) @ frontend.js:788
t.invoke @ frontend.js:795
onInvoke @ frontend.js:138
t.invoke @ frontend.js:795
e.run @ frontend.js:795
(anonymous) @ frontend.js:803
t.invokeTask @ frontend.js:795
onInvokeTask @ frontend.js:138
t.invokeTask @ frontend.js:795
e.runTask @ frontend.js:795
y @ frontend.js:795
Promise.then (async)
d @ frontend.js:795
t.scheduleTask @ frontend.js:795
onScheduleTask @ frontend.js:795
t.scheduleTask @ frontend.js:795
e.scheduleTask @ frontend.js:795
e.scheduleMicroTask @ frontend.js:795
M @ frontend.js:803
S @ frontend.js:803
(anonymous) @ frontend.js:803
(anonymous) @ frontend.js:788
callbackWrapper @ VM38:53
_onCallback @ VM38:66
_onMessage @ VM38:67

santiago-elustondo · 2018-09-11T11:51:32Z

Ok, so we have another edge case affecting the serializer. We need to figure out why there is a syntax error in the generated serialized message.

MattMattV · 2018-09-19T14:16:26Z

On Manjaro with :

Angular version 6.1.7
Augury version 1.19.1 AND 1.19.3
Chrome 70.0.3534.4 version

I face a very similar issue, the message "No state to show" appear on some components but with a different error in the inspector :

Error: Code evaluation failed
    at Array.<anonymous> (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31)
    at i (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31)
    at Object.e.serialize (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31)
    at Object.handleImmediate (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31)
    at <anonymous>:1:22

edmundo096 · 2018-10-21T04:22:04Z

Getting same issue, state not showing for many components on Angular 6.1.9, Augury 1.19.1

VM458 frontend.js:788 SyntaxError: Unexpected token delete
    at new Function (<anonymous>)
    at Object.e.deserialize (VM458 frontend.js:599)
    at VM458 frontend.js:788
    at t.invoke (VM458 frontend.js:795)
    at Object.onInvoke (VM458 frontend.js:138)
    at t.invoke (VM458 frontend.js:795)
    at e.run (VM458 frontend.js:795)
    at VM458 frontend.js:803
    at t.invokeTask (VM458 frontend.js:795)
    at Object.onInvokeTask (VM458 frontend.js:138)

I see that the string passed to Function(str) is big enough, as if it contained all the Angular project transpiled code.

Some time later, I managed to get WebStorm to reformat that string to find that "delete" token.
Here is my result:

No idea where it comes from but looks like if it was from AngularFirestore or RxJS.
So seems that "delete" reserved keyword was tried to be used as a function name token.

Hope this helps

IdanCo · 2018-10-27T23:52:35Z

Same issue, Angular 7.0.1 Augury 1.19.1

error -

frontend.js:788 SyntaxError: Unexpected token delete
    at new Function (<anonymous>)
    at Object.e.deserialize (frontend.js:599)
    at frontend.js:788
    at t.invoke (frontend.js:795)
    at Object.onInvoke (frontend.js:138)
    at t.invoke (frontend.js:795)
    at e.run (frontend.js:795)
    at frontend.js:803
    at t.invokeTask (frontend.js:795)
    at Object.onInvokeTask (frontend.js:138)

phi1-h · 2018-10-30T10:03:53Z

I guess same as well, Angular 7.0.1, Augury 1.20.0
I noted, that i can see the state of the app component but nothing further down.
I do have a router outlet.

Error in event handler for (unknown): TypeError: Cannot read property 'errorType' of null

at t.processMessage(frontend.js:788:343752)
at  frontend.js:788:344144
at t.invoke (frontend.js:795:7005)
at Object.onInvoke (frontend.js:138:1933)
at t.invoke (frontend.js:795:6945)
at e.run (frontend.js:795:2169)
at t.run (frontend.js:138:2650)
at t.onReceiveMessage (frontend.js:788:344120)

`

andrewthauer · 2018-10-30T13:49:15Z

So this category of issue seems to manifest itself in many different cases. Some which have been fixd and others not. It has to do with how the angular app details are serialized and sent to the devtools extension. This can be difficult to track down and replicate due to the nature of how it works and diverse set of things that need to be serialized/deserialized.

As always a repo or sample to reproduce is the best way to track these issues down. Barring that can anyone provide some additional details about the types of components that are not showing state?

is there anything special about these components from the ones that do show state?
are they leveraging any specific 3rd party libraries that could be note?
any other details that might help us replicate the issues.

IdanCo · 2018-10-30T14:18:09Z

Sure! Thanks for the help!

So i've done some digging and eventually ended up with Angular Fire as the main suspect.

Steps to reproduce -

ng new augury-demo
cd augury-demo
npm install firebase @angular/fire --save
ng serve

open app.module.ts and edit the import section:

  imports: [
    BrowserModule,
    AngularFireModule.initializeApp({
      apiKey: 'xxx',
      authDomain: 'xxx',
      databaseURL: 'xxx',
      projectId: 'xxx',
      storageBucket: 'xxx',
      messagingSenderId: 'xxx'
    }),
    AngularFirestoreModule,
  ],

open app.component.ts and inject firestore -

export class AppComponent {

  constructor(private afs: AngularFirestore) {
  }

  title = 'augury-demo';
}

and BAAM! augury state view stops working. removing the injection fixes it.

phi1-h · 2018-10-30T15:49:32Z

I can confirm, AngularFire is also beeing injected in my case.
Edit: Also i can see the state of MatButton, and one component without any injections.

tkstang · 2018-10-30T17:16:41Z

I am not using AngularFire, it is a rather large and complex app so it would take me quite some time to go through all of the components that do and do not show state and list their dependencies but I will try to do that in the next few days when I have a chance. Generally the components that show state seem to be small components without router.

andrewthauer · 2018-11-02T11:42:36Z

Thanks for the detailed feedback. This should help a great deal in tracking down this particular state issue. We've also seen some issues with router state, but thought we'd fixed those as well. Definitely more to go on now. Much appreciated!

andrewthauer · 2018-11-04T18:53:54Z

I've published a chrome canary build from the dev branch (v1.21.0) that should hopefully resolve some of the state issues being experienced. If anyone has a moment to confirm, that would be greatly appreciated. Also added #1348 to handle some other component types that are known to not show state correctly.

https://chrome.google.com/webstore/detail/augury-canary-build/leechohfifidanmkioncamdcibhmmcji?hl=en

IdanCo · 2018-11-04T19:00:37Z

Works perfect! Thank you so much!

phi1-h · 2018-11-06T09:23:26Z

I can confirm, state works :)
Thanks for the fast fix

tkstang · 2018-11-06T18:18:58Z

Also confirming it works. State hasn't worked for me with Augury for months with none of the other fixes seeming to make a difference. So happy to report this one seems to have been successful. Thank you for all of your hard work and such a great tool!

furier · 2019-02-19T14:41:46Z

Does the augury-canary-build only work with chrome canary or regular chrome as well? Installed the extension in regular chrome and getting issues, the console for the extension is full of this error

frontend.js:786 TypeError: toISOString is not a function
    at String.toJSON (<anonymous>)
    at Object.<anonymous> (localhost:4200/polyfills.js:1463)
    at JSON.stringify (<anonymous>)
    at Object.stringify (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31)
    at Object.e.serialize (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31)
    at Object.handleImmediate (chrome-extension://elgalmkoelokbchhkhacckoklkejnhcd/build/backend.js:31)
    at <anonymous>:1:22

tkstang · 2019-02-19T18:44:47Z

@furier it should work on both. After being briefly fixed once again it was not working for me, same error and I found the solution to be to remove the core-js/es6/date polyfill from your polyfills file. This is a date polyfill for older IE browsers so you may just want to comment it out when you're doing development. You can see #1351 for further discussion. Hopefully that works for you as well!

furier · 2019-02-20T12:57:58Z

@furier it should work on both. After being briefly fixed once again it was not working for me, same error and I found the solution to be to remove the core-js/es6/date polyfill from your polyfills file. This is a date polyfill for older IE browsers so you may just want to comment it out when you're doing development. You can see #1351 for further discussion. Hopefully that works for you as well!

Great, and where is this file located?

tkstang · 2019-02-20T21:09:46Z

@furier You should have a polyfills.ts file in the root of your project

Qwert567777 · 2021-03-29T02:12:20Z

D by

andrewthauer added the bug label Nov 2, 2018

andrewthauer mentioned this issue Nov 4, 2018

Fix Serializer Implementation #1349

Merged

andrewthauer added the pending-fix-verification label Nov 4, 2018

tkstang closed this as completed Nov 6, 2018

andrewthauer mentioned this issue Nov 9, 2018

No state is shown for some components #1351

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Augury not showing state for many components #1340

Augury not showing state for many components #1340

tkstang commented Sep 10, 2018

santiago-elustondo commented Sep 10, 2018

tkstang commented Sep 11, 2018 •

edited

santiago-elustondo commented Sep 11, 2018

tkstang commented Sep 11, 2018 •

edited

santiago-elustondo commented Sep 11, 2018

MattMattV commented Sep 19, 2018

edmundo096 commented Oct 21, 2018

IdanCo commented Oct 27, 2018

phi1-h commented Oct 30, 2018 •

edited

andrewthauer commented Oct 30, 2018

IdanCo commented Oct 30, 2018

phi1-h commented Oct 30, 2018 •

edited

tkstang commented Oct 30, 2018

andrewthauer commented Nov 2, 2018

andrewthauer commented Nov 4, 2018 •

edited

IdanCo commented Nov 4, 2018

phi1-h commented Nov 6, 2018

tkstang commented Nov 6, 2018

furier commented Feb 19, 2019

tkstang commented Feb 19, 2019

furier commented Feb 20, 2019

tkstang commented Feb 20, 2019

Qwert567777 commented Mar 29, 2021

Augury not showing state for many components #1340

Augury not showing state for many components #1340

Comments

tkstang commented Sep 10, 2018

santiago-elustondo commented Sep 10, 2018

tkstang commented Sep 11, 2018 • edited

santiago-elustondo commented Sep 11, 2018

tkstang commented Sep 11, 2018 • edited

santiago-elustondo commented Sep 11, 2018

MattMattV commented Sep 19, 2018

edmundo096 commented Oct 21, 2018

IdanCo commented Oct 27, 2018

phi1-h commented Oct 30, 2018 • edited

andrewthauer commented Oct 30, 2018

IdanCo commented Oct 30, 2018

phi1-h commented Oct 30, 2018 • edited

tkstang commented Oct 30, 2018

andrewthauer commented Nov 2, 2018

andrewthauer commented Nov 4, 2018 • edited

IdanCo commented Nov 4, 2018

phi1-h commented Nov 6, 2018

tkstang commented Nov 6, 2018

furier commented Feb 19, 2019

tkstang commented Feb 19, 2019

furier commented Feb 20, 2019

tkstang commented Feb 20, 2019

Qwert567777 commented Mar 29, 2021

tkstang commented Sep 11, 2018 •

edited

tkstang commented Sep 11, 2018 •

edited

phi1-h commented Oct 30, 2018 •

edited

phi1-h commented Oct 30, 2018 •

edited

andrewthauer commented Nov 4, 2018 •

edited