Augury not showing state for many components

[tkstang]

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]

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]

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]

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

[tkstang]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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!