`@mushi-mushi/angular`

Angular service and error handler over @mushi-mushi/web. Shared wrapper notes: Framework wrappers.


npm install @mushi-mushi/angular

See Quickstart → Angular for the full setup walkthrough.

API surface


import { MUSHI_CONFIG, MushiService, MushiErrorHandler } from '@mushi-mushi/angular'

Export	Purpose
`MUSHI_CONFIG`	`InjectionToken<MushiConfig>` holding your project ID and public API key
`MushiService`	Starts the web SDK when constructed in the browser; `report({ description, category, metadata })` and `captureError(error, context)`
`MushiErrorHandler`	An `ErrorHandler` that forwards uncaught errors to `MushiService.captureError`
`provideMushi(config)`	Up to 1.0.2: returns `{ service, errorHandler }` objects, not Angular providers — do not put it in a `providers` array
`provideMushiAngular(config)`	Up to 1.0.2: lists `MushiService` as a class provider, which needs the JIT compiler — avoid in production builds

Setup (standalone bootstrap)

Register MushiService with useFactory, as below; it works with every release. Up to 1.0.2 (the current npm release) the package ships without Angular’s ahead-of-time metadata, so a plain class provider asks for the JIT compiler and fails at bootstrap in a production build.


// main.ts
import { ErrorHandler } from '@angular/core'
import { bootstrapApplication } from '@angular/platform-browser'
import { MUSHI_CONFIG, MushiErrorHandler, MushiService, type MushiConfig } from '@mushi-mushi/angular'
import { AppComponent } from './app/app.component'
import { environment } from './environments/environment'
 
bootstrapApplication(AppComponent, {
  providers: [
    { provide: MUSHI_CONFIG, useValue: { projectId: environment.mushiProjectId, apiKey: environment.mushiApiKey } },
    { provide: MushiService, useFactory: (config: MushiConfig) => new MushiService(config), deps: [MUSHI_CONFIG] },
    { provide: ErrorHandler, useFactory: (mushi: MushiService) => new MushiErrorHandler(mushi), deps: [MushiService] },
  ],
})

The SDK starts when Angular first resolves ErrorHandler, which happens during bootstrap. On the server (Angular SSR) MushiService skips initialisation.

Submitting a report


import { Component, inject } from '@angular/core'
import { MushiService } from '@mushi-mushi/angular'
 
@Component({ selector: 'app-feedback-button', template: '<button (click)="reportIssue()">Report</button>' })
export class FeedbackButtonComponent {
  private readonly mushi = inject(MushiService)
 
  async reportIssue() {
    await this.mushi.report({ description: 'Something feels off', category: 'bug' })
  }
}

Identifying users

MushiService in 1.0.2 has no identify method. Use the web SDK instance directly (add @mushi-mushi/web to your own dependencies first, because pnpm will not resolve it through the Angular package):


import { Mushi } from '@mushi-mushi/web'
 
Mushi.getInstance()?.setUser({ id: user.id, email: user.email })