Docs

Integration instructions for popular languages and frameworks


Prerequisites

Create new project in Muscula App by pressing button "Add new project"

Provide any name you like.

Create log

Every project can have many logs. Just like your website can contain frontend logger and backend logger.




Website

Paste integration code

Paste it on your website after <head>. Replace LOG_ID with your current LOG ID. If you place code directly from Muscula Application LOG ID will be filled.

<script type="text/javascript">
    window.Muscula = {
        settings: {
            logId: LOG_ID,
            suppressErrors: false,
        },
    };
    (function () {
        var m = document.createElement('script');
        m.type = 'text/javascript';
        m.async = true;
        m.src = 'https://cdn.muscula.com/m2v1.min.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(m, s);
        window.Muscula.run = function () {
            var a;
            eval(arguments[0]);
            window.Muscula.run = function () {};
        };
        window.Muscula.errors = [];
        window.onerror = function () {
            window.Muscula.errors.push(arguments);
            return window.Muscula.settings.suppressErrors === undefined;
        };
    })();
</script>
    

You can also log own errors with website script using Muscula.log functions:

Muscula.log.fatal(msg, info, ex)
Muscula.log.error(msg, info, ex)
Muscula.log.warning(msg, info, ex)
Muscula.log.info(msg, info, ex)
Muscula.log.debug(msg, info, ex)

Just make sure Muscula was loaded and functions exists before using them.




JavaScript / TypeScript / React / Vue application

Install Muscula appender by running command from your application directory:

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

Initialize Muscula in index.js / index.ts / main.ts of your Application

import * as MusculaLog from '@muscula.com/muscula-webapp-js-logger';
Muscula.Init(LOG_ID);
LOG_ID will be filled when You will be copying instructions from Muscula App, after creating new log

Import Muscula Logger when you need to use it

import * as MusculaLog from 'muscula-webapp-js-logger';

Use it like:


                try {
                    / /your code
                } catch(excetpion) {
                    MusculaLog.Error('My error occurred', exception);    
                }
               

You can also use other methods for logging

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);

Structural logging

You can pass own data into Muscula system object for example:
try { / /your code } catch(excetpion) { MusculaLog.Error('My error occurred', exception, {userId: 'user1', 'basketAmount': 0}); }

Angular / application

Install Muscula appender by running command from your application directory:

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

Initialide Muscula in main.ts of your Application

import * as MusculaLog from '@muscula.com/muscula-webapp-js-logger';
Muscula.Init(LOG_ID);
LOG_ID will be filled when You will be copying instructions from Muscula App, after creating new log

Import Muscula Logger when you need to use it

import * as MusculaLog from 'muscula-webapp-js-logger';

Create error handler :


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);
  }
}
               

Create http interceptor:


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);
        })
      )
  }
}

               

Enable muscula modules in app.module.ts


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 { }

               

You can also use other methods for logging

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);

Structural logging

You can pass own data into Muscula system as object, for example:

                try {
                    / /your code
                } catch(excetpion) {
                    MusculaLog.Error('My error occurred', exception, {userId: 'user1', 'basketAmount': 0});    
                }
               



PHP

Install Muscula appender by running command from your application directory:

composer require muscula/muscula-php-logger

Initialise Muscula in index.php of your Application

$handler = MusculaHandler::getInstance(); $handler->start(LOG_ID);

From this moment all your errors will be visible in muscula system.
At https://packagist.org/packages/muscula/muscula-php-loggeryou can find full documentation




C# ((Microsoft Extensions Logging, .NET + .NET Core)

Install nuget package

Muscula.Csharp.Extensions.Logging.AspNetCore

Initialize logger at Program.cs

public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
        .ConfigureLogging(logging =>
        {
            logging.AddConsole();
            logging.AddMuscula(
                settingsBuilder =>
                {
                    settingsBuilder.UseLogId("<LOG_ID>");
                    return settingsBuilder.Build();
                });
        })
        .ConfigureWebHostDefaults(webBuilder =>
        {
            webBuilder.UseStartup<Startup>();
        });




C# ((Log4Net, .NET + .NET Core)

Install nuget package

Muscula.Csharp.Extensions.Logging.Log4Net

Provide log4net.config file

<?xml version="1.0" encoding="utf-8" ?>
<log4net>
    <appender name="MusculaAppender" 
    type="Muscula.Csharp.Extensions.Logging.Log4Net.MusculaAppender, Muscula.Csharp.Extensions.Logging.Log4Net" >
        <layout type="log4net.Layout.PatternLayout">
            <conversionPattern value="%date [%thread] %-5level %logger [%ndc] - %message%newline" />
        </layout>
        <MusculaSettings>
            <LogId value="LOG_ID" />
        </MusculaSettings>
    </appender>
    <root>
        <level value="ALL" />
        <appender-ref ref="MusculaAppender" />
    </root>
</log4net>

Initialize logger at Startup.cs

services.AddLogging(b => b.AddLog4Net("log4net.config"));




Java (log4j)

Add dependency to pom file


<dependency>
    <groupId>com.muscula</groupId>
    <artifactId>muscula-log4j</artifactId>
    <version>1.0.2</version>
</dependency>
                    

Configure log4j in file src/main/resources/log4j2.xml

<?xml version="1.0" encoding="UTF-8"?>
<Configuration status="INFO">
    <Appenders>
        <MusculaAppender name="MusculaAppender" logId="LOG_ID"/>
    </Appenders>
    <Loggers>
        <Root level="error">
            <AppenderRef ref="MusculaAppender"/>
        </Root>
    </Loggers>
</Configuration>
                    

Check out our demo project

https://gitlab.com/muscula-public/muscula-java-log4j-demo




Java (logback)

Add dependency to pom file


<dependency>
    <groupId>com.muscula</groupId>
    <artifactId>muscula-logback</artifactId>
    <version>1.0.2</version>
</dependency>
                    

Configure logback in file src/main/resources/logback.xml

<configuration>
    <appender name="muscula" class="com.muscula.logback.appender.MusculaAppender">
        <logId>LOG_ID</logId>
    </appender>
    <root level="info">
        <appender-ref ref="muscula"/>
    </root>
</configuration>

                    

Use it like any other logger

public class Main {
    private static final Logger logger = LoggerFactory.getLogger(Main.class);
    public static void main(String[] args) {
        for(int i=0; i<10; i++)
        logger.error("test", new RuntimeException("logback error test"));
    }
}

Check out our demo project

https://gitlab.com/muscula-public/muscula-java-logback-demo