Bug report widget for Angular

This quickstart adds the Mushi Mushi bug-report widget to an Angular 17+ app. The steps match the React quickstart; only the install and the boot call differ.

Get your project ID and API key

The SDK needs two values from a Mushi Mushi project.

By hand: create a free account (no card) and create a project. The panel that opens shows the project ID and an API key that starts with mushi_. Copy the key now: it is shown once. You can mint another under Set up → Test it → Generate API key.
Self-hosting? Your own console gives you the same two values. See Self-hosting.

Angular keeps them in an environment file, shown below.

Install and register


pnpm add @mushi-mushi/angular

Angular CLI does not expose import.meta.env, so keep the project ID and the public API key in an environment file (ng generate environments creates one):

src/environments/environment.ts


export const environment = {
  mushiProjectId: 'YOUR_PROJECT_ID',
  mushiApiKey: 'mushi_...', // public report:write key, safe to ship in the bundle
}

Register Mushi Mushi once in your app config. provideMushi() provides MushiService, routes uncaught errors to Mushi Mushi through Angular’s ErrorHandler, and starts the SDK at startup:

src/app/app.config.ts


import { type ApplicationConfig } from '@angular/core'
import { provideMushi } from '@mushi-mushi/angular'
import { environment } from '../environments/environment'
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideMushi({ projectId: environment.mushiProjectId, apiKey: environment.mushiApiKey }),
  ],
}

1.0.2 and earlier: provideMushi() did not return 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:


import { ErrorHandler, type ApplicationConfig } from '@angular/core'
import { MUSHI_CONFIG, MushiErrorHandler, MushiService, type MushiConfig } from '@mushi-mushi/angular'
import { environment } from '../environments/environment'
 
const mushiConfig: MushiConfig = {
  projectId: environment.mushiProjectId,
  apiKey: environment.mushiApiKey,
}
 
export const appConfig: ApplicationConfig = {
  providers: [
    { provide: MUSHI_CONFIG, useValue: mushiConfig },
    { provide: MushiService, useFactory: (config: MushiConfig) => new MushiService(config), deps: [MUSHI_CONFIG] },
    { provide: ErrorHandler, useFactory: (mushi: MushiService) => new MushiErrorHandler(mushi), deps: [MushiService] },
  ],
}

Report from a component:

src/app/feedback-button.component.ts


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

API detail: @mushi-mushi/angular. Widget behavior: @mushi-mushi/web.