Logging and Debugging remotely Angular Apps

In this post, we are going to explain how to solve any bug or error that an Angular-created App may have and can be affecting your users without them – or yourself – knowing it.

For this purpose we will be using a remote debugger and logging for Angular using the Bugfender library.

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, you can use the same tool for all of 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

Bugfender SDK Angular Documentation

SDK Installation

These are the main points to get Bugfender working on your apps:

Get an app key at 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 the Bugfender’s default global error handler. So, in order 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:

More information

Docs

For more information on all methods available, please go to the Bugfender JS SDK reference documentation.

SDK status

The SDK is suitable for production. Please feel free to open an issue or contact us at bugfender.com .

Angular Logging

What is Bugfender?