Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to log to application insights from a component #27

Open
StefanSchoof opened this issue Aug 19, 2021 · 9 comments
Open

How to log to application insights from a component #27

StefanSchoof opened this issue Aug 19, 2021 · 9 comments
Labels
documentation Improvements or additions to documentation

Comments

@StefanSchoof
Copy link

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

@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
Copy link
Author

StefanSchoof commented Dec 22, 2021

@timdeschryver Thanks, that looks like solution for me.

@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
Copy link
Contributor

MSNev commented Feb 1, 2022

Not yet, we are still back filling the position.

@MSNev MSNev added the documentation Improvements or additions to documentation label Feb 1, 2022
@timdeschryver
Copy link
Contributor

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
Copy link

@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
Copy link

bialabs commented Aug 12, 2022

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
Copy link
Contributor

MSNev commented Aug 12, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

6 participants