No state is shown for some components

[aggo]

Augury version (required): 1.21.0 Angular version (required): Angular Version: 7.0.0 Date: 7.11.2018 OS: Kubuntu 18.04

Demo test application: When inspecting the devtools window, this is what is shown in the console:

frontend.js:788 Error: Code evaluation failed
    at String.toJSON (<anonymous>)
    at Object.<anonymous> (localhost:8092/scripts.js:418)
    at Object.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

Description of issue: State is not shown for some. When I click on an angular component, if it has anything in the constructor (in my case it was a service and the changedetectorref), what appears for state is "No state is shown". Components that have no dependencies through the constructor seem to work fine, though.

Steps to reproduce:

1. Create a component with a dependency in the constructor. Create one with no dependencies.
2. For the first one, no state is shown. For the second one, state works.

[hlohrenz]

I JUST started experiencing this too. It was working this morning and now I can't get past this. Augury version: 1.21.0 Angular version: 5.2.11 Chrome version: 70.0.3538.77 OS: Mac High Sierra 10.13.6

I'm not getting any console error in my devtools.

[taivu]

also not getting state, and no console errors. v1.21.0

[ashwinv11]

No console errors either but no state shown for many components that did with the previous version of Augury. Running v1.21.0

[andrewthauer]

Must be a regression somehow introduced by fixing #1340. However, there's got to be more then just having dependencies injected into the constructor. I've tested numerous components which do this. Here's a StackBlitz which attempts to reproduce this issue with both a service and ChangeDetectorRef injected. Seems to be working fine in the example:

• https://angular-rfmc2z.stackblitz.io/
• https://stackblitz.com/edit/angular-rfmc2z

Any more details or a StackBlitz that can reproduce the issue would be greatly appreciated.

[aggo]

Try removing the {{name}} from the template of the hello component in order to reproduce it. That's what worked for me to get in Augury the Hello Component with "no state shown"

[stevenkampen]

@aggo Thanks. I'll have a look at that.

[stevenkampen]

@aggo @hlohrenz @taivu @ashwinv11 Ok I can reproduce this at least by injecting the ChangeDetectorRef. I'll chase it up and hopefully have a fix shortly.

[wtho]

I get the same Error

When setting a breakpoint and checking the original error, it shows this Error:

Error: Uncaught (in promise): Error: Code evaluation failed
TypeError: toISOString is not a function
    at String.toJSON (<anonymous>) ...

Seems like the crucial TypeError: toISOString is not a function gets swallowed by printing it, hope this helps.

[stevenkampen]

@wtho @taivu @ashwinv11 @aggo I published a new canary build (https://chrome.google.com/webstore/detail/augury-canary-build), which fixes a couple of issues, the main one being lack of HMR support. That issue was definitely breaking stackblitz (at least after a change was made).

I followed up on the other reports but couldn't seem to reproduce anything anymore. If you can all try this latest build and report back here, that would be really helpful.

[ashwinv11]

@stevenkampen I'm still seeing issues with the 1.22.0 canary version 😞, many components still show "No state to show".. I'll try and look into it after work today

[stevenkampen]

@ashwinv11 Thanks. If I can get something that is easily reproducible, then I can look closer at it.

[PawelK2012]

@stevenkampen I'm still seeing issues with the 1.22.0 canary version 😞, many components still show "No state to show".. I'll try and look into it after work today

Same here...

[stevenkampen]

@PawelK2012 Can you provide a stackblitz example? This is likely an issue with the particular state you have in your components, so there's no way to fix your issue without knowing which value/s are not being serialised correctly.

[ashwinv11]

@stevenkampen I've tried multiple ways to get it to repro on stackblitz but I can't seem to get close. Here's an example of what my app has. I also tried upgrading from 6.1.4 to 6.1.10 but that didn't seem to help.. can someone else take a stab at reproing it?

[swimmadude66]

I can't share too much since this is happening in my company's app, but I can confirm that this issue is recent and doesn't seem to be related to any particular state. Out of nowhere one day, every single component began displaying "no state to show"

EDIT: @stevenkampen I tested against one of my runnable seed projects and was able to reproduce the issue.

Repo: https://github.com/swimmadude66/AngularPWASeed

Steps:

1. Clone Repo, cd into folder, npm install
2. npm run dev to launch app in dev mode
3. visit localhost:3001 if it didn't already open for you
4. f12 and go to Augury tab, see that the Demo component says no state to show

You can add fields to the demo component, and see that augury still doesn't detect them on reload.

[stevenkampen]

@swimmadude66 Thanks for this. I'll take a look now since I've not been able to reproduce the issue anywhere else.

[xerofun]

I'm in the same boat. Augury hasn't worked for me since sometime in March or April. These threads have helped me at least have a small hope of providing useful information. It definitely seems to be related to certain poisonous things being injected. Within the context of my application I created a do-nothing component and systematically injected everything into it one at a time to see which dependencies broke the state for the component.

Tested with Augury 1.22.0 and Angular 6.0.7

I cannot seem to reproduce it with a simple stack blitz and HttpClient. Continuing to poke at the edges.

No state shown for:

• MatDialog
• HttpClient
• MatSnackBar
• MatIconRegistry
• ChangeDetectorRef
• Router
• MatBottomSheet
• Injector

State shown for:

• FormBuilder
• DomSanitizer
• AdalService
• ElementRef

Interesting to note that the Material components all import Injector (which is why I added it to the list). Not sure if this is a dependency graph thing and Injector just happens to pull in everything, in which case these might work should the real poison pill be found

In stackblitz I just noticed that HttpClient also pulls in Injector. Going to try to spit out all the injectables to the console to figure out the surface area of what we've got going here and try to reproduce it in stack blitz.

import {ChangeDetectorRef, Component, ElementRef, Injector, OnInit} from '@angular/core';
import {FormBuilder} from "@angular/forms";
import {MatBottomSheet, MatDialog, MatDialogRef, MatSnackBar} from "@angular/material";
import {DomSanitizer} from "@angular/platform-browser";
import {AdalService} from "adal-angular4";
import {ActivatedRoute, Router} from "@angular/router";

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.sass']
})
export class TestComponent implements OnInit {

  angular: string = "Angular";

  constructor(private injector: Injector) {
  }

  ngOnInit() {
  }

}

[stevenkampen]

@xerofun I just tested ChangeDetectorRef, HttpClient, and Injector which all work without any issues. I'm going to close this issue since I am unable to reproduce, and again ask that any new issue report comes with a stackblitz which clearly exhibits the problem, in an isolated way.

[xerofun]

@stevenkampen That's what I was working on. Is there any better way for me to try to isolate the components I'm having problems with. I'm wondering if there's some way I can debug augury to find the strings it's choking on. I have a large dependency graph and the constraints of it being code I do not have authorization to release.

I understand that you need the stackblitz but without any more insight from what specifically it's choking on we're in needle in a haystack territory.

Desperate for getting access to Augury again.

[stevenkampen]

@xerofun I'd like to have something soon that can give us a hint in these cases, but it shouldn't be too hard to isolate in the time being. What issue do you run into if you just start with a bare application and then start adding individual dependencies until you see the problem occur? If you'd rather go the other way you can just divide and conquer which shouldn't take more than a handful of attempts. What I mean is take one of these big components with a huge dependency tree (and exhibits the issue) and remove 50% of the injectables. If the problem still exists, remove 50% of the remaining injectables, and so on and so forth. If the problem goes away at any time, swap out the current injectables for the ones you removed last and continue. It should be narrowed down relatively quick. Let me know if I'm missing something, and thanks for your effort.

[taivu]

i found that augury works when i enable this in polyfills.ts:

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

im able to see states when this is enabled (i turn off for prod builds, since i dont need the JIT compiler).

[wtho]

For my app, the serialization does work, until I include import 'core-js/es6/date'; in `polyfills.js.

Once I include it, the imported core-js-module itself gets stringified, whenever I click on my component in Augury. Then the error is thrown.

I can keep all other polyfills, but as soon as I add this one, the error gets thrown. My guess is there is nothing is wrong with Augury, just the polyfill screws something up that Augury relies on. But I am no expert, just a guess.

---

Here some more details (basically the stack from bottom to top)

1. handleImmediate gets triggered when trying to load state in augury:

   inspectedApplication.handleImmediate({"messageSource":"AUGURY_INSPECTED_APPLICATION","messageId":"2e313722f4f28","serialize":0,"messageType":16,"content":{"path":[0,3],"requestInstance":true}})

2. e.serialize in backend.js, where t is the instance of my Angular Component:

   e.serialize = function(t) {
   return n.stringify(t)
   }

3. This triggers a stringify function inside backend.js, probably the imported one from flatted. The interesting part here is that it iterates over an array of 3407 instances and calls JSON.stringify on all of them, before it will join them all again to an array with a.join(","). In this array, at position 1502, where the error gets thrown, there is the core-js library included by my polyfills.ts.

4. In _ctx.js inside core-js, toJSON(["Date"]) throws the error. It tries to make a json object out of a simple array.

[tkstang]

I can confirm if I remove the core-js/es6/date polyfill everything works fine. I believe this polyfill is needed just for IE 9/10/11 so my solution for now is going to be to just comment it out for development but if anyone is interested in solutions for conditionally loading polyfills based on browsers you can take a look at this:

https://izifortune.com/angular-polyfill-strategies/

[s001dxp]

I, too, was having the same issue. I gave up on augury until finding this thread. I removed the es6 date polyfill and, like magic, everything is working.

[wtho]

Created a PR to document the workaround in Known Issues in the README