@muscula.com/muscula-angular

Angular error logger for Muscula.com. Thin wrapper around @muscula.com/muscula-webapp-js-logger that integrates with Angular's error handling.

Requires Angular 19+.

Installation

npm install @muscula.com/muscula-angular

Quick Start

Add provideMuscula() to your app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideMuscula } from '@muscula.com/muscula-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMuscula('YOUR-MUSCULA-LOG-ID'),
  ]
};

That's it. All unhandled errors are now reported to Muscula.

What Gets Captured

| Error source | How | |---|---| | Component errors, lifecycle hooks, template expressions | Angular ErrorHandler | | HTTP errors (4xx, 5xx) | Functional HTTP interceptor | | Unhandled promise rejections | APP_INITIALIZER global listener | | Errors in setTimeout, third-party scripts | window.onerror (via JS logger) |

Configuration

provideMuscula({
  logId: 'YOUR-MUSCULA-LOG-ID',
  harvesterUrl: 'https://custom-harvester.example.com',  // optional, custom endpoint
  skipHttpInterceptor: true,   // optional, if you handle HTTP errors yourself
  skipGlobalErrorListeners: true, // optional, if you set up global listeners elsewhere
})

Manual Logging

Inject MusculaService to log manually:

import { inject } from '@angular/core';
import { MusculaService } from '@muscula.com/muscula-angular';

@Component({ ... })
export class MyComponent {
  private muscula = inject(MusculaService);

  onSave() {
    try {
      // ...
    } catch (err) {
      this.muscula.error('Save failed', err, { userId: 123 });
    }
  }
}

Available methods: fatal(), error(), warning(), info(), debug(), trace().

Each accepts a message string and optional structuralData object (arbitrary metadata sent alongside the error).

How It Works

provideMuscula() registers three providers in Angular's DI:

1. ErrorHandler — replaces Angular's default error handler. Every unhandled exception from components, directives, pipes, and lifecycle hooks is forwarded to MusculaLog.Error().

2. HTTP Interceptor (functional HttpInterceptorFn) — intercepts all HttpClient responses. On error, sends the HTTP status, message, and URL to Muscula, then re-throws so your app's error handling still works.

3. Global error listener (APP_INITIALIZER) — registers a browser unhandledrejection event listener to catch unhandled promise rejections. Synchronous errors from setTimeout and third-party scripts are caught by the underlying JS logger's window.onerror binding.

Under the hood, all three use @muscula.com/muscula-webapp-js-logger which sends errors to https://harvester.muscula.com/js via XHR with stack traces resolved by stacktrace-js.