`@mushi-mushi/angular`

The Mushi Mushi 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 { provideMushi, MushiService } from '@mushi-mushi/angular'

Export	Purpose
`provideMushi(config)`	`EnvironmentProviders` for `bootstrapApplication` or `NgModule.providers`: provides `MushiService`, installs `MushiErrorHandler` as Angular’s `ErrorHandler`, and starts the SDK at startup (browser only)
`provideMushiAngular(config)`	The same providers as a plain `Provider[]`, for spreading
`MushiService`	`report({ description, category, metadata })`, `identify(userId, traits)` and `captureError(error, context)`
`MushiErrorHandler`	An `ErrorHandler` that forwards uncaught errors to `MushiService.captureError`, then logs them like Angular’s default handler
`MUSHI_CONFIG`	`InjectionToken<MushiConfig>` holding your project ID and public API key

Setup (standalone bootstrap)


// main.ts
import { bootstrapApplication } from '@angular/platform-browser'
import { provideMushi } from '@mushi-mushi/angular'
import { AppComponent } from './app/app.component'
import { environment } from './environments/environment'
 
bootstrapApplication(AppComponent, {
  providers: [
    provideMushi({ projectId: environment.mushiProjectId, apiKey: environment.mushiApiKey }),
  ],
})

On the server (Angular SSR) MushiService skips initialisation.

1.0.2 and earlier: provideMushi() returned plain objects, not Angular providers, and the package needed the JIT compiler in production builds. Upgrade to 1.0.3 or later. If you cannot, register the providers by hand with factories:


import { ErrorHandler } from '@angular/core'
import { MUSHI_CONFIG, MushiErrorHandler, MushiService, type MushiConfig } from '@mushi-mushi/angular'
 
const 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] },
]

With this fallback the SDK starts when Angular first resolves ErrorHandler, which can be the first error rather than startup.

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

Call identify() on MushiService when the signed-in user changes (1.0.3 and later):


import { inject } from '@angular/core'
import { MushiService } from '@mushi-mushi/angular'
 
const mushi = inject(MushiService)
mushi.identify(user.id, { email: user.email, name: user.name })

On 1.0.2 and earlier, MushiService has no identify(). Use the web SDK instance instead: add @mushi-mushi/web to your own dependencies (pnpm will not resolve it through the Angular package), then call Mushi.getInstance()?.setUser({ id: user.id, email: user.email }).