LogoLogo
HomePlatform IntegrationsDownloadsLogin
  • Welcome
  • 📌Introduction
    • Getting Started
      • Signing Up
      • Creating a Database
      • Platform Integrations
        • 💻Desktop
          • BugSplat Crash Reporting Library for Windows (Native C++)
            • Full Memory Dumps
            • Windows (Native C++) Dependencies
          • Windows (.NET Framework)
          • macOS
          • Linux
        • 🔀Cross-Platform
          • .NET Standard
          • Breakpad (Deprecated)
          • Crashpad
            • How to Build Google Crashpad
          • Deno
          • Electron
          • Java
          • Node.js
          • Python
          • Qt
        • 🎮Game Development
          • CRYENGINE
          • Nintendo Switch
          • PlayStation
          • Unreal Engine
            • Unreal Engine Plugin
          • Unity
          • Xbox
        • 📱Mobile
          • Android
          • Ionic
          • iOS
          • React Native
        • 🕸️Web
          • Angular
          • JavaScript
          • React
          • Vue
        • ⌛Downloads
      • Platform Samples
        • BugSplatTester (iOS)
        • BugSplatTester (macOS)
        • myConsoleCrasher (C++)
          • Address Sanitizer Reports
        • my-android-crasher
        • my-angular-crasher
        • my-electron-crasher
        • my-java-crasher
        • my-node-crasher
        • my-qt-crasher
        • my-react-crasher
        • my-unity-crasher
        • my-unreal-crasher
      • Inviting Team Members
      • Importing Crashes
      • Troubleshooting
      • Quickly Submitting Your First Crash in Under 5 Minutes
    • Development
      • Using the App
      • Symbol Files
        • Common Symbols
        • How to Manually Upload Symbols
        • Source Maps
        • Symbol Servers
        • Working with Symbol Files in Windows Environments
      • Searching
        • Table Filtering
        • Table Grouping
      • Grouping Crashes
      • Commenting
      • Integrations and Third Party Tools
        • Configurable Alerts
          • Slack
          • Microsoft Teams
          • Discord
          • Email
          • Webhook
        • Issue Trackers
          • Azure DevOps
          • Favro
          • Jira
          • GitHub Issues
          • GitLab
          • Monday.com
          • YouTrack
          • Auto-Creating Defects from BugSplat Databases in Attached Third-Party Issue Trackers
      • API
        • Web Application Endpoints
          • Charting
          • Company
          • Crash
          • Crashes
          • Crash Groups
          • Databases
          • Defect
          • Events
          • Import/Migrate
          • Support Response
          • User (GDPR)
          • Users
          • Versions
        • Crash Post Endpoints
        • OAuth2
        • Defect Tracker Options
        • Paging, Filtering, and Grouping
        • Platform Specific API's
          • C++ Native API
          • .NET API
    • Production
      • Versions
      • 🆕Regression Alerts
      • Security and Compliance
        • Security Program
        • BugSplat Security Program Inquirys
        • SOC 2
        • GDPR & UK GDPR Compliance
        • Avoid Collecting Personally Identifiable Information (PII)
        • Crash Expiry
        • Terms
        • Privacy Policy
      • Support Responses
      • BugSplat Status
  • 🍎Education
    • BugSplat Terminology
    • How-Tos
      • Creating Defects
      • Contacting End-Users
      • Crash Dialog Branding
      • Reprocess Crashes
      • Batch Reprocess Crashes
      • Using the Crash Attribute Feature
      • Send Feedback
      • Remove Crashes
    • Videos
      • BugSplat Product Walkthrough
    • FAQs
      • How Do I Upload Crashes with Python?
      • How Do I Remove Symbol Files?
      • Crash details 'Active Thread'
      • How long does it take to process a crash?
      • How BugSplat handles large crash volumes
      • How Does Crash Rate Limiting Work?
      • Add Custom Branding to Support Response
      • Finding Missing Reports
      • Using Dark Mode
      • What If My App or Game Grows Quickly?
      • Does BugSplat have an effect on application performance?
      • Manually Upload Crash Reports to BugSplat
      • How to configure proxy settings in BugSplat
      • Using BugSplat's public database
      • How to Upload Symbol Files with Symbol-Upload
      • Using SendPdbs to Automatically Upload Symbol Files
      • Managing Symbol Space
      • Why Group Crashes?
      • Uploading third-party DLLs without PDB files
      • Localized Support Responses for Windows C++, .NET, and macOS
      • BugSplat application uptime data
        • What are the upload size considerations with BugSplat accounts.
      • Is an application's source code safe when using BugSplat?
      • How to get correct callstacks with BugSplat in Steam
      • What is a crash reporter?
      • Common End-User Questions
        • Missing BugSplat.dll
        • What should I do if I get a BugSplat?
        • What is BsSndRpt.exe?
        • My software just crashed. Should I contact BugSplat for help?
  • 🏢Administration
    • Billing
      • Free Trial Overview
      • Plans and Billing Overview
      • How to Sign Up for a BugSplat Plan
      • Viewing Account Usage
      • Upgrading, Changing, or Canceling Your Plan
        • Upgrading or Downgrading Your Plan
        • Adding Additional Crashes and Storage Space
        • Updating Credit Card and Billing Information and Viewing Billing History
        • Updating Tax and VAT Information
        • Canceling Your Plan
      • Free and Discounted Plans
        • Free Plan Overview
        • Free Crash Reporting for Indie Game Development
        • Education
        • Open-Source
        • Good Causes
      • Plans, Upgrades, and Payments FAQ
        • Fair-Refund Policy
        • Update to Our Legacy Plans Guide
        • Updates to BugSplat Pricing Plans - March 2024
        • Using Coupons and Promotions at BugSplat
        • What is 'High Volume Fractional Crash Processing'?
    • Account
      • Migrating Databases
      • Deleting Databases
      • Deleting a Company Account
      • Changing Company Name
    • User Management
      • User Permissions
      • Deleting a User
      • Requesting Access
      • Login Page and Options
      • Password Settings and Reset Options
        • Required Password Reset - August 4th, 2023
      • Single Sign-On (SSO)
      • Multi-Factor Authentication (MFA)
      • Enforce MFA
      • Adding New Users in Companies with Multiple Databases
    • Contact us
  • 🐛About
    • What is BugSplat?
    • Why BugSplat?
    • Who is BugSplat?
      • Our Values
      • Charitable Giving
      • Brand Guidelines
    • Partnerships
    • Misc
      • Promotions
        • March 2024 - Game Developer Free Months of Service
      • Giveaways
        • April 8 - April 22, 2025
        • Feb 18 - March 17, 2025
        • Jan 15 - Feb 13, 2025
        • December 19-29, 2024
        • November 21–28, 2024
        • October 17-24th, 2024
        • September 19-26th, 2024
        • July 18 - July 23, 2024
        • April 18 - May 12, 2024
        • March 18 - April 03, 2024
        • November 15-30, 2023
        • October 9-23, 2023
  • 🔀Changelog
    • Changelog
Powered by GitBook
On this page
  • Overview
  • Sample
  • Integration
  • Extended Integration
  • Source Maps
  • Contributing

Was this helpful?

  1. Introduction
  2. Getting Started
  3. Platform Integrations
  4. Web

Angular

PreviousWebNextJavaScript

Last updated 1 year ago

Was this helpful?

Overview

BugSplat supports the collection of errors in Angular applications. The bugsplat-ng npm package implements Angular’s interface in order to post errors to BugSplat where they can be tracked and managed.

Sample

This repository includes a sample my-angular-crasher application that has be pre-configured with BugSplat. A hosted version of my-angular-crasher can also be found . Before you try the sample, you'll need to create an OAuth2 ClientId/ClientSecret pair as shown .

Once you've genereated OAuth2 credentials, create a file with the name .env at the root of the repository and populate with the correct values substituted for {{clientId}} and {{clientSecret}}:

SYMBOL_UPLOAD_CLIENT_ID={{clientId}}
SYMBOL_UPLOAD_CLIENT_SECRET={{clientSecret}}

To test the sample, perform the following steps:

  1. git clone https://github.com/BugSplat-Git/bugsplat-ng

  2. cd bugsplat-ng && npm i

  3. npm start

The npm start command will build the sample application and upload source maps to BugSplat so that the JavaScript call stack can be mapped back to TypeScript. Once the build has completed the source maps will be uploaded and http-server will serve the app.

Navigate to the url displayed in the console by http-server (usually ). Click any of the button in the sample app to generate an error report. A link to the error report should display in the app shortly after clicking a button. Click the link to the error report and when prompted to log into BugSplat.

If everything worked correctly you should see information about your error as well as a TypeScript stack trace.

Integration

To collect errors and crashes in your Angular application, run the following command in terminal or cmd at the root of your project to install bugsplat-ng:

npm i bugsplat-ng --save

Add a database property to your package.json file with the value of your BugSplat database and subsitute {{database}} with the value of your BugSplat database.

{
  "database": "{{database}}"
}

Add values for your BugSplat database, application and version to your application's environment files:

const packageJson = require('../../package.json');
export const environment = {
  production: true,
  bugsplat: {
    database: packageJson.database,
    application: packageJson.name,
    version: packageJson.version
  }
};

Add an import for BugSplatModule to your AppModule:

import { BugSplatModule } from 'bugsplat-ng';

Add a call BugSplatModule.initializeApp in your AppModule's imports array passing it your database, application and version:

...
@NgModule({
  imports: [
    BugSplatModule.initializeApp(environment.bugsplat)
  ],
  ...
})

Throw a new error in your application to test the bugsplat-ng integration:

throw new Error("foobar!");

Extended Integration

You can post additional information by creating a service that implements ErrorHandler. In the handlerError method make a call to BugSplat.post passing it the error and an optional options object:

import { ErrorHandler, Injectable } from '@angular/core';
import { BugSplat } from 'bugsplat-ng';

@Injectable()
export class MyAngularErrorHandler implements ErrorHandler {

    constructor(public bugsplat: BugSplat) { }
    
    async handleError(error: Error): Promise<void> {
        return this.bugsplat.post(error, {
            description: 'New description from MyAngularErrorHandler.ts'
        });
    }
}

BugSplat provides the following properties and methods that allow you to customize its functionality:

BugSplat.description: string; // Additional info about your crash that gets reset after every post
BugSplat.email: string; // The email of your user 
BugSplat.key: string; // A unique identifier for your application
BugSplat.user: string; // The name or id of your user
BugSplat.files: Array<file>; // A list of files to be uploaded at post time
BugSplat.getObservable(): Observable<BugSplatPostEvent>; // Observable that emits results of BugSplat crash post events in your components.
async BugSplat.post(error): Promise<void>; // Post an Error object to BugSplat manually from within a try/catch

In your AppModule's NgModule definition, add a provider for your new ErrorHandler:

import { ErrorHandler, NgModule } from '@angular/core';

@NgModule({
  providers: [
    {
      provide: ErrorHandler,
      useClass: MyAngularErrorHandler
    }
  ]
  ...
})

You can also configure BugSplat's logging preferences and provide your own logging implementation. Create a provider for BugSplatLogger with useValue set to a new instance of BugSplatLogger. Pass one of the BugSplatLogLevel options as the first parameter to BugSplatLogger. You can provide an instance of your own custom logger as the second parameter granted it has error, warn, info and log methods. If no custom logger is provided console will be used:

import { ErrorHandler, NgModule } from '@angular/core';
import { BugSplatLogger, BugSplatLogLevel, BugSplatModule } from 'bugsplat-ng';

@NgModule({
  providers: [
    {
      provide: ErrorHandler,
      useClass: BugSplatErrorHandler
    },
    {
      provide: BugSplatLogger,
      useValue: new BugSplatLogger(BugSplatLogLevel.Log)
    }
  ],
  ...
})

Source Maps

npm i -D @bugsplat/symbol-upload

Configure your angular.json file to output source maps. We suggest enabling source maps for both your application code and any vendor chunks that are generated by Angular.

{
  "projects": {
    "main": {
      "architect": {
        "build": {
          "options": {
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true
            },
          },
        }
      }
    }
  }
}
SYMBOL_UPLOAD_CLIENT_ID={{clientId}}
SYMBOL_UPLOAD_PASSWORD={{clientSecret}}

Create a script for uploading source maps.

const { OAuthClientCredentialsClient, SymbolsApiClient } = require('@bugsplat/symbol-upload');
const fs = require('fs');
const path = require('path');
const packageJson = require('../package.json');
require('dotenv').config();

(async () => {
    const clientId = process.env.SYMBOL_UPLOAD_CLIENT_ID;
    if (!clientId) {
        throw new Error('Please set SYMBOL_UPLOAD_CLIENT_ID in .env file');
    }

    const clientSecret = process.env.SYMBOL_UPLOAD_CLIENT_SECRET;
    if (!clientSecret) {
        throw new Error('Please set SYMBOL_UPLOAD_CLIENT_SECRET in .env file');
    }

    const database = packageJson.database;
    const application = packageJson.name;
    const version = packageJson.version;

    const buildDirectory = `./dist/${application}`;
    const files = fs.readdirSync(buildDirectory)
        .filter(file => file.endsWith('.js.map'))
        .map(file => {
            const filePath = `${buildDirectory}/${file}`;
            const stat = fs.statSync(filePath);
            const name = path.basename(filePath);
            const size = stat.size;
            return {
                name,
                size,
                file: fs.createReadStream(filePath)
            };
        });

    const bugsplat = await OAuthClientCredentialsClient.createAuthenticatedClient(clientId, clientSecret);
    const symbolsApiClient = new SymbolsApiClient(bugsplat);
    await symbolsApiClient.deleteSymbols(
        database,
        application,
        version
    );
    await symbolsApiClient.postSymbols(
        database,
        application,
        version,
        files
    );
    console.log(`Source maps uploaded to BugSplat ${database}-${application}-${version} successfully!`);
})().catch(error => console.error(error));

Add postbuild and symbols scripts to your package.json.

{
  "scripts": {
    "postbuild": "npm run symbols",
    "symbols": "ts-node ./scripts/symbols.js"
  }
}

For best results, please upload source maps for every released version of your application.

Contributing

With ❤️,

The BugSplat Team

Navigate to the page in BugSplat and you should see a new crash report for the application you just configured. Click the link in the ID column to see details about your crash on the Crash page:

BugSplat supports unwinding uglified and minified JavaScript stack traces via source maps. To upload source maps to BugSplat during your build, install .

Add SYMBOL_UPLOAD_CLIENT_ID and SYMBOL_UPLOAD_CLIENT_SECRET environment variables for the BugSplat user that you will use to upload symbols. You can create these values as system environment variables or use .

BugSplat loves open source software! If you have suggestions on how we can improve this integration, please reach out to support@bugsplat.com, create an in our or send us a .

📌
🕸️
ErrorHandler
here
here
localhost:8080
environment.prod.ts
app.module.ts
app.module.ts
app.component.ts
Crashes
my-angular-error-handler.ts
bugsplat.ts
app.module.ts
app.module.ts
@bugsplat/symbol-upload
dotenv
issue
GitHub repo
pull request
Crash Page
Crashes Page