Get back to docs

JavaScript / TypeScript App

Create a log

Be sure to check out the Get Started section for information on how to register for an account and create your first log. While creating your log choose “JavaScript / TypeScript App (Angular / React / React Native / Electron)” option in “Language and framework” select field.



Install Muscula appender

You can install Muscula on your JavaScript / TypeScript Application using the npm package. Run this command from your application directory:

npm install --save @muscula.com/muscula-webapp-js-logger


Initialize Muscula

Open index.js / index.ts / main.ts file of your Application and add an import statement:

import * as MusculaLog from '@muscula.com/muscula-webapp-js-logger';

Then initialize Muscula by adding the code below at Application startup.

Muscula.Init(LOG_ID);

Remember to replace "LOG_ID" with your current LOG ID. If you place code directly from Muscula Application LOG ID will be filled. Click here to see instructions on how to find your LOG ID in Mucula App.



Logging methods

Below you will find a list of all the methods for logging in Muscula.

MusculaLog.Fatal(message: string, exception?: Error, info?: any); MusculaLog.Error(message: string, exception?: Error, info?: any); MusculaLog.Info(message: string, info?: any); MusculaLog.Warning(message: string, info?: any); MusculaLog.Debug(message: string, info?: any); MusculaLog.Trace(message: string, info?: any);

"Message" parameter is a title of a log that will be shown in Muscula App and is required to provide in all methods. "Exception" is an Error object, this parameter is optional and possible to provide only in the Fatal and Error methods. "Info" parameter allow you to pass own data into Muscula system as "info" object. Your info object may look like this: {userId: 'user1', 'basketAmount': 0}.



Usage in JavaScript / TypeScript / React / Vue

For usage instructions for Angular see the section below.

Before using any of the logging methods, import Muscula Logger at the top of the file in which you need to use it with the import statement:

import * as MusculaLog from '@muscula.com/muscula-webapp-js-logger';

Then use it like:

try { throw new Error('Error'); } catch(exception) { MusculaLog.Error('Something wrong', exception, {userId: '123'}); }


Usage for Angular

Before using any of the logging methods, import Muscula Logger at the top of the file in which you need to use it with the import statement:

import * as MusculaLog from '@muscula.com/muscula-webapp-js-logger';

Create custom error handler. This way you will enable Muscula to intercept exception handling.

import {ErrorHandler, NgModule} from '@angular/core'; import * as MusculaLog from '@muscula.com/muscula-webapp-js-logger'; export class MusculaErrorHandler implements ErrorHandler { handleError(error: any) { console.log(error); //Report error to Muscula MusculaLog.Error(error.toString(), error); } }

Then create HTTP interceptor that will report error to Muscula:

import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; import * as MusculaLog from '@muscula.com/muscula-webapp-js-logger'; export class MusculaHttpErrorInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(request) .pipe( catchError((error: HttpErrorResponse) => { //Report error to Muscula MusculaLog.Error(error.message, error); let errorMsg = ''; if (error.error instanceof ErrorEvent) { console.log('this is client side error'); errorMsg = `Error: ${error.error.message}`; } else { console.log('this is server side error'); errorMsg = `Error Code: ${error.status}, Message: ${error.message}`; } console.log(errorMsg); return throwError(errorMsg); }) ) } }

The last step is to enable Muscula modules in app.module.ts. Import created in previous steps classes (MusculaErrorHandler and MusculaHttpErrorInterceptor) into AppModule and add them to the "providers" array like this:

import {ErrorHandler, NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {AppComponent} from './app.component'; import {MusculaErrorHandler} from '../muscula/MusculaErrorHandler'; import {HTTP_INTERCEPTORS} from '@angular/common/http'; import {MusculaHttpErrorInterceptor} from '../muscula/MusculaHttpInterceptor'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [ //Provide error Handler for Muscula {provide: ErrorHandler, useClass: MusculaErrorHandler}, //Provide http error interceptor for Muscula {provide: HTTP_INTERCEPTORS, useClass: MusculaHttpErrorInterceptor, multi: true}], bootstrap: [AppComponent] }) export class AppModule { }

If you can’t find what you're looking for, contact us and we will update the documentation. Thanks, and enjoy Muscula!