Angular Logging
Tags: technology
Published: 2020-10-20 20:23:31

---
title: Angular Logging
published: true
date: 2020-10-06 13:31:56 UTC
tags: Technology
canonical_url: https://bugfender.com/blog/angular-logging/
---

Here we try to explain how to solve any bug or error that your App created with Angular may have and that may be affecting your users without them or yourself knowing it. For this we will use a remote debugger and logging for Angular using the Bugfender library.

1. [Debug Angular Apps with Bugfender](#anchor-h1)
2. [Install the Debugger and Logger on your Angular App](#anchor-h2)
3. [Test it in localhost](#anchor-h3)
4. [SDK Installation for Angular](http://anchor-h4)
5. [Sending logs and bug reports in real time](#anchor-h5)
6. [Handling crashes](#anchor-h6)
7. [More information](#anchor-h7)

## First, what is Bugfender?

Bugfender is a game-changing platform that logs every detail your users experience and feeds the data straight to an easy-to-use web console. Bugfender SDK is multi-platform and available for mobile and web apps, so you can use the same tool for all your apps.

## Bugfender SDK Angular Sample

If you plan to use Bugfender SDK on an **vanilla Javascript app** , visit https://github.com/bugfender/BugfenderSDK-JS-Sample

### Running the app

To check the app in your local machine, first you need to edit the code on `src/app/app.module.ts` and change the `<YOUR_APP_KEY_HERE>` for you Bugfender App Key. Then you can run the app using:

- Ensure Node.js 12 is installed on your system.
- `npm ci`
- `npm start`

_You can get an app key at [bugfender.com](https://bugfender.com/)_

## Bugfender SDK Angular Documentation

### SDK Installation

Here are the main points to getting Bugfender working on your apps:

- Get an app key at [bugfender.com](https://bugfender.com/)
- `npm i @bugfender/sdk`. Install SDK npm package.
- Init Bugfender SDK in your Application Module:

```
Bugfender.init({ appKey: '<YOUR\_APP\_KEY\_HERE>', // apiURL: 'https://api.bugfender.com', // baseURL: 'https://dashboard.bugfender.com', // overrideConsoleMethods: true, // printToConsole: true, // registerErrorHandler: true, // logBrowserEvents: true, // logUIEvents: true, // version: '', // build: '', });
```

Remember to change `<YOUR_APP_KEY_HERE>` with the app key of your app.

### Using Bugfender

After you have initialized the SDK, you can start using it anywhere by just importing the `Bugfender` object:

```
import { Bugfender } from '@bugfender/sdk'; export class HomeComponent { constructor() { Bugfender.log('HomeComponent constructor'); } }
```

### Handling crashes

Angular registers a global error handler that overrides Bugfenders default global error handler. So, to catch unhandled errors and report them to Bugfender you’ll need a custom Angular `ErrorHandler`. This repository contains an example on how to implement this:

- [See custom `ErrorHandler`](https://github.com/bugfender/BugfenderSDK-Angular-Sample/blob/master/src/app/app.error-handler.ts).
- [See Angular documentation](https://angular.io/api/core/ErrorHandler).

## More information

### Docs

For more information on all methods available, please go to the [Bugfender JS SDK reference documentation](https://js.bugfender.com/).

### SDK status

The SDK is suitable for production. Please feel free to open an issue or contact us at [bugfender.com](https://bugfender.com) .