How to log to application insights from a component

[StefanSchoof]

I like to log an error from an component. In the readme I find no explanation how I the application insights instance should accessed inside a angular component. Is there a documentation on this that I missed?

[xiao-lix]

Are you trying to use appInsights.trackException() -- this API is to track your own errors. Or you could setup the error handler that catches all global errors. At least when creating your own component it should be given (or injected -- during construction) the AppInsights instance to use this code.

[StefanSchoof]

Thanks for your answer. But I still struggle with this.

I set up the error handler, but I like not to throw a complete error. I want to handle it, but log it. So I want to have the appInsights Instance, I tried

import { Component, OnInit } from '@angular/core';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';

@Component({
  selector: 'app-log-something',
  templateUrl: './log-something.component.html',
  styleUrls: ['./log-something.component.css']
})
export class LogSOmethingComponent implements OnInit {

  constructor(private appInsighs: ApplicationInsights) { }

  ngOnInit(): void {
    this.appInsighs.trackTrace({ message: "LogSomething OnInit" });
  }
}

then this component will not load.

and

import { Component, OnInit } from '@angular/core';
import { IAppInsights } from '@microsoft/applicationinsights-web';

@Component({
  selector: 'app-log-something',
  templateUrl: './log-something.component.html',
  styleUrls: ['./log-something.component.css']
})
export class LogSOmethingComponent implements OnInit {

  constructor(private appInsighs: IAppInsights) { }

  ngOnInit(): void {
    this.appInsighs.trackTrace({ message: "LogSomething OnInit" });
  }
}

I get

Error: src/app/log-something/log-something.component.ts:11:23 - error NG2003: No suitable injection token for parameter 'appInsighs' of class 'LogSOmethingComponent'.

[timdeschryver]

StefanSchoof you need to create an injectable service to be able to inject it within components.
I recently wrote a blog post that shows this, see Configuring Azure Application Insights in an Angular application for an example.

[StefanSchoof]

Tim Deschryver (@timdeschryver) Thanks, that looks like solution for me.

Nev (@MSNev) Since I think, this is a problem that not only I will encounter, I think there should also be some official docs about it. And since xiao-lix left the team, is there someone to reassign this to?

[MSNev]

Not yet, we are still back filling the position.

[timdeschryver]

If you're OK with it, I can extend the docs with an "advanced configuration" section.
This would be inspired by the blog post that I've mentioned in this thread.

[urielzen]

Tim Deschryver (@timdeschryver) Thanks so much for your post, I read the part where you mentioned how the Angular error handler is overwritten with insights error handler and it makes it so the console errors are removed, so you added the following to the extensionsConfig:
errorServices: [new ErrorHandler()],

Instead of doing that, would you think it will have the same result I just set to true this property in the config: enableDebugExceptions ?

[bialabs]

Hi, this plugin tracks by default only unhandled errors, right?
If yes, which approach you advise for handled errors?
Because in my app the following errors are not recorded:

try {
    let result = await this.store.get({ key })
    return result;
} catch (error) {
    throw new Error(error);    
}

[MSNev]

Rather than re-throwing the exception (so it effectively becomes unhandled), you can use the appInsights.trackException() API as mentioned above but your component (where you are re-throwing the error) would need access the appinsights instance that is created during initialization (liek defined in the Basic Usage.

This will depend on the architecture of your app as to how you access it. ie. whether its a global, referenced in a helper or another component that is injected / available here etc.