Browser errors not displayed in console fully.

[wawyed]

It would appear that some errors are not being displayed fully in the console.

For example:

Ends up being:

'ERROR', TypeError{ngDebugContext: DebugContext_{view: Object{def: ..., parent: ..., viewContainerParent: ..., parentNodeDef: ..., context: ..., component: ..., nodes: ..., state: ..., root: ..., renderer: ..., oldValues: ..., disposables: ..., initIndex: ...}, nodeIndex: 3, nodeDef: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, elDef: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, elView: Object{def: ..., parent: ..., viewContainerParent: ..., parentNodeDef: ..., context: ..., component: ..., nodes: ..., state: ..., root: ..., renderer: ..., oldValues: ..., disposables: ..., initIndex: ...}}, ngErrorLogger: function () { ... }}
'ERROR CONTEXT', DebugContext_{view: Object{def: Object{factory: ..., nodeFlags: ..., rootNodeFlags: ..., nodeMatchedQueries: ..., flags: ..., nodes: ..., updateDirectives: ..., updateRenderer: ..., handleEvent: ..., bindingCount: ..., outputCount: ..., lastRenderRootNode: ...}, parent: Object{def: ..., parent: ..., viewContainerParent: ..., parentNodeDef: ..., context: ..., component: ..., nodes: ..., state: ..., root: ..., renderer: ..., oldValues: ..., disposables: ..., initIndex: ...}, viewContainerParent: null, parentNodeDef: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, context: CampaignCorrespondenceSecondaryBarComponent{_stateRouter: ...}, component: CampaignCorrespondenceSecondaryBarComponent{_stateRouter: ...}, nodes: [..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...], state: 1038, root: Object{ngModule: ..., injector: ..., projectableNodes: ..., selectorOrNode: ..., sanitizer: ..., rendererFactory: ..., renderer: ..., errorHandler: ...}, renderer: DebugRenderer2{delegate: ..., data: ...}, oldValues: [..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...], disposables: [...], initIndex: -1}, nodeIndex: 3, nodeDef: Object{nodeIndex: 3, parent: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, renderParent: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, bindingIndex: 0, outputIndex: 0, checkIndex: 3, flags: 1, childFlags: 33603779, directChildFlags: 3, childMatchedQueries: 0, matchedQueries: Object{}, matchedQueryIds: 0, references: Object{}, ngContentIndex: null, childCount: 12, bindings: [], bindingFlags: 0, outputs: [...], element: Object{ns: ..., name: ..., attrs: ..., template: ..., componentProvider: ..., componentView: ..., componentRendererType: ..., publicProviders: ..., allProviders: ..., handleEvent: ...}, provider: null, text: null, query: null, ngContent: null}, elDef: Object{nodeIndex: 3, parent: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, renderParent: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, bindingIndex: 0, outputIndex: 0, checkIndex: 3, flags: 1, childFlags: 33603779, directChildFlags: 3, childMatchedQueries: 0, matchedQueries: Object{}, matchedQueryIds: 0, references: Object{}, ngContentIndex: null, childCount: 12, bindings: [], bindingFlags: 0, outputs: [...], element: Object{ns: ..., name: ..., attrs: ..., template: ..., componentProvider: ..., componentView: ..., componentRendererType: ..., publicProviders: ..., allProviders: ..., handleEvent: ...}, provider: null, text: null, query: null, ngContent: null}, elView: Object{def: Object{factory: ..., nodeFlags: ..., rootNodeFlags: ..., nodeMatchedQueries: ..., flags: ..., nodes: ..., updateDirectives: ..., updateRenderer: ..., handleEvent: ..., bindingCount: ..., outputCount: ..., lastRenderRootNode: ...}, parent: Object{def: ..., parent: ..., viewContainerParent: ..., parentNodeDef: ..., context: ..., component: ..., nodes: ..., state: ..., root: ..., renderer: ..., oldValues: ..., disposables: ..., initIndex: ...}, viewContainerParent: null, parentNodeDef: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, context: CampaignCorrespondenceSecondaryBarComponent{_stateRouter: ...}, component: CampaignCorrespondenceSecondaryBarComponent{_stateRouter: ...}, nodes: [..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...], state: 1038, root: Object{ngModule: ..., injector: ..., projectableNodes: ..., selectorOrNode: ..., sanitizer: ..., rendererFactory: ..., renderer: ..., errorHandler: ...}, renderer: DebugRenderer2{delegate: ..., data: ...}, oldValues: [..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...], disposables: [...], initIndex: -1}}

Any ideas of what could be causing this? Could it be related to dgarlitt/karma-nyan-reporter#26 ?

[whyboris]

I think I've fixed the issue raised in dgarlitt/karma-nyan-reporter#26 so you probably found a different error.

I suspect the appropriate output in this scenario in the karma-helpful-reporter would be something like:

Cannot read property 'catch' of undefined
CampaignCorrespondenceSecondaryBarComponent.navigate (campaign-correspondence-secondary-bar.component.ts:18)

Perhaps the error is buried somewhere in the ERROR ?

Just to confirm -- you see errors reported in your terminal and corresponding errors in your browser, but this one shows up only in the browser and not in the terminal?

[wawyed]

Well. It shows in the console but is missing information, such as the actual error and the line where the error is originated.

So the first line in the console:

'ERROR', TypeError{ngDebugContext: DebugContext_{view: Object{def: ..., parent: ..., viewContainerParent: ..., parentNodeDef: ..., context: ..., component: ..., nodes: ..., state: ..., root: ..., renderer: ..., oldValues: ..., disposables: ..., initIndex: ...}, nodeIndex: 3, nodeDef: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, elDef: Object{nodeIndex: ..., parent: ..., renderParent: ..., bindingIndex: ..., outputIndex: ..., checkIndex: ..., flags: ..., childFlags: ..., directChildFlags: ..., childMatchedQueries: ..., matchedQueries: ..., matchedQueryIds: ..., references: ..., ngContentIndex: ..., childCount: ..., bindings: ..., bindingFlags: ..., outputs: ..., element: ..., provider: ..., text: ..., query: ..., ngContent: ...}, elView: Object{def: ..., parent: ..., viewContainerParent: ..., parentNodeDef: ..., context: ..., component: ..., nodes: ..., state: ..., root: ..., renderer: ..., oldValues: ..., disposables: ..., initIndex: ...}}, ngErrorLogger: function () { ... }}

Corresponds to the first error in the browser but as you can see key information is missing.

[whyboris]

Perhaps if I had the code with which to replicate the error I could try getting a proper output. I'm sorry I wish I could figure it out just by looking at this. Certainly pull requests are welcome.

It may be helpful to see if the https://github.com/dgarlitt/karma-nyan-reporter suffers from the same problem - unsure.

[wawyed]

The code was along this lines:

In component:

  public navigate(): void {
    this._stateRouter.go('^').catch(noop);
  }

template

  <button (click)="navigate()" 
                class="MhrCampaignCorrespondenceSecondaryBar-backButton">Go</button>

In unit tests:

   describe('when clicking the back button', () => {
      let button: DebugElement;
      beforeEach(() => {
        button = fixture.debugElement.query(By.css('.MhrCampaignCorrespondenceSecondaryBar-backButton'));
        button.triggerEventHandler('click', null);
      });

      it('should call mhrStateRouter.go method', () => {
        expect(stateRouterMock.go).toHaveBeenCalledWith('^');
      });
    });

I'm using your branch of nyan reporter (github:whyboris/karma-nyan-reporter#nyannyan) and it has the issue.

The error was caused because we had a spy on the go method that didn't return a promise.

Hope it helps!

[wawyed]

Hi, did you manage to find out anything about this?

[whyboris]

Sorry have been busy with my other project: http://videohubapp.com/
I hope to get to this sometime, though I'm sorry to say it's not a high priority compared to the other things I'm doing (and learning).

[wawyed]

That's okay. If you can point me in the right direction I could have a look and raise a PR if you want?

[whyboris]

I'm happy to incorporate a PR if you discover a solution.
I'm unsure where to start with this exactly, but three things:

• Please check that you don't have some value in your removeLinesContaining array in the helpfulReporter reporter settings object inside the karma.conf.js
• Recently Jasmine 3 came out and helpful-reporter may behave differently than expected under Jasmine 2
• Perhaps this is a place to start: onSpecComplete is what gets called after every test finishes - https://github.com/whyboris/karma-helpful-reporter/blob/karma-helpful-reporter/lib/helpful.js#L157

Please let me know if I can help more.