Augury not showing state for many components

tkstang commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

tkstang commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Works perfect! Thank you so much!

phi1-h commented 5 years ago

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

tkstang commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 https://github.com/rangle/augury/issues/1351 for further discussion. Hopefully that works for you as well!

furier commented 5 years ago

@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 commented 5 years ago

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

Qwert567777 commented 3 years ago

D by

rangle / augury

Augury not showing state for many components #1340