Angular Integration

Setup

// app.config.ts — ErrorHandler provider for automatic fatal logging
import { ErrorHandler, provideBrowserGlobalErrorListeners } from "@angular/core";
import { createGunsoleClient } from "@gunsole/web";

const gunsole = createGunsoleClient({
  projectId: "my-angular-app",
  mode: "local",
  env: "development",
  appName: "Angular App",
  appVersion: "1.0.0",
  defaultTags: { framework: "angular" },
});

class GunsoleErrorHandler implements ErrorHandler {
  handleError(error: unknown): void {
    const err = error instanceof Error ? error : new Error(String(error));
    gunsole.fatal({
      message: err.message,
      bucket: "fatal",
      context: { name: err.name, stack: err.stack },
    });
    console.error(err);
  }
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    { provide: ErrorHandler, useClass: GunsoleErrorHandler },
  ],
};

User tracking with signals

// home.ts — reactive user tracking with Angular signals
export class Home {
  protected readonly userId = signal("user-123");

  constructor() {
    // Re-runs when userId signal changes
    effect(() => {
      gunsole.setUser({ id: this.userId(), email: "[email protected]" });
    });

    gunsole.log({
      message: "App initialized",
      bucket: "app_lifecycle",
      context: { framework: "angular" },
    });
  }
}

Logging patterns

Use the same patterns as other frameworks — API calls with tracing, Web Vitals, manual level logging:

// API calls with traceId
const traceId = `trace-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;

gunsole.info({
  bucket: "api_request",
  message: `Fetching data`,
  tags: { api: "myapi", action: "fetch_start" },
  traceId,
});

// Manual level logging
gunsole.info({ bucket: "user_action", message: "Button clicked", tags: { action: "button_click" } });
gunsole.debug({ bucket: "state", message: "State updated", context: { newState } });
gunsole.warn({ bucket: "perf", message: "Slow render detected", context: { duration: 500 } });
gunsole.error({ bucket: "api", message: "Request failed", context: { error: err.message } });