@rilog-development/rilog-lib

Rilog lib

Simple way to log and debug your web apps.

Rilog lib intercepts and stores different events such as requests, button clicks, client custom messages (instead of using console.log), etc. Today, rilog-lib is adapted for axios and fetch.

Table of Contents

---

• Installation and usage
• Storing to local server
• Storing to your server
• Config
• Examples

Installation and usage

---

Installing

yarn add @rilog-development/rilog-lib

or

npm i @rilog-development/rilog-lib

Usage (axios)

1. Import Rilog object from lib.

import rilog from '@rilog-development/rilog-lib';

2. Init Rilog and set up config

rilog.init();

4. Set up your axios instance and interceptors. Add interceptRequestAxios and interceptResponseAxios functions.

// request interceptor
instance.interceptors.request.use(async function (request) { // Your axios instance

    rilog.interceptRequestAxios(request);

    return Promise.resolve(request);
});
// response interceptor
instance.interceptors.response.use(function(response) {

    rilog.interceptResponseAxios(response);

    return Promise.resolve(response);
}, function(error) {

    rilog.interceptResponseAxios(error);
    
    return Promise.reject(error);
})

Usage (fetch)

By default Rilog lib intercept all fetch requests when you call rilog.init() method. But, you can disable fetch interception with passing disableFetchInterceptor: true to config.

Local server

---

You can store your log data offline on your drive with Rilog local-server. It's very useful, because you can store as many logs data as your drive allows you.

Install and launch the local-server on your device for local storing events. Local-server would launch on http://localhost:2525. The Rilog lib will send events to local-server.

Then define in config localServer with appName. (Look at localServer config) The Rilog local-server will create folder for project (using app name) and log file (using current date and unique client token).

Example:

config: {
        localServer: {
            appName: "Rilog test lib"
        }
    }

Also, you can pass any additional params for your app. They would be written to you log file. In this example we pass an environment info and a current build type:

config: {
        localServer: {
            appName: "Rilog test lib",
            params: {
                env: "dev",
                build: "uat"
            }
        }
    }

Local Server Config

Below is a list of local server config params (ILocalServerConfig):

Param	Type	Required	Definition
appName	string	Yes	App name would be used for creating project folder.
params	any	No	Any additional params for storing in log file.

Your server

---

You can use your own server for storing intercepted events. You should create a POST method and pass the selfServer with url param to config. Every time when events were collected the Rilog lib would call your POST method and pass events to body:

    { events: string }

The array of events would be passed as JSON string to the method. So, you should parse it.

Self server config

Param	Type	Required	Definition
url	string	Yes	The url of your own backend endpoint (POST) for storing events.
headers	Record<string, string>	No	Additional headers for storing events endpoint.

Below is a list of self server config params:

Config

---

Below is a list of config params:

Param	Type	Definition
ignoredRequests	string[]	Urls of requests that would be ignored. The rilog lib wouldn't store events for this events.
sensetiveRequsts	string[]	The request headers and data wouldn't be stored. Headers and data would be replaced with 'sensetive' string.
sensetiveDataRequests	string[]	The request data wouldn't be stored. Data would be replaced with 'sensetive' string.
headers	string[]	Only this headers would be stored. By default rilog-lib doesn't store requests with all headers.
localStorage	string[]	Only this localStorage values would be stored. By default rilog-lib doesn't store all local storage values.
disableFetchInterceptor	boolean	Disable fetch interception.
disableClickInterceptor	boolean	Disable click interception.
localServer	ILocalServerConfig	Config for storing events to local server.
selfServer	ISelfServer	Config for storing events to your custom backend.
onPushEvent	function(event) {}	Push event call back. It calls when some event is intercepted.
onSaveEvents	function(events) {}	Save events call back. It calls before evets would be sent to any storage.

Examples

---

Sensetive Requests

Imagine if you need to hide sensitive card data for few request:

rilog.init({
    config: {
        sensetiveDataRequests: ['/api/v1/pay/card', '/api/v1/send/card']
    }
});

You are interested in storing only axios requests:

rilog.init({
    config: {
        disableFetchInterceptor: true,
        disableClickInterceptor: true
    }
});

You need to ignore some request:

rilog.init({
    config: {
        ignoredRequests: ['https://some.test/request'],
    }
});

Store some headers in request events and some values from local storage:

rilog.init({
    config: {
        headers: ['Authorization'],
        localStorage: ['token', 'userId']
    }
});