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
2. Install the Debugger and Logger on your Angular App
3. Test it in localhost
4. SDK Installation for Angular
5. Sending logs and bug reports in real time
6. Handling crashes
7. More information

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

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
• 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.
• See Angular documentation.

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 .