Prism-lib NPM | npm.io

NOTE: As this npm module was extracted from Touchstone project in Skunkworks period, you could go to this PR (https://github.corp.ebay.com/Touchstone/touchstone/pull/186) to get a whole picture of all the code commits and Git history. Thanks!

The library part has been published in NPM registry: https://www.npmjs.com/package/prism-lib

PRISM

More insights, with less code.

Background

Monitoring performance and tracking the users' activities are two of the most crucial tasks once your web application gets mature and attracts lots of traffic. If you have rich data of the performance and activities, analysts and data scientists can use their knowledge to provide data-driven decisions and recommendations about what to do next in the process of application development. However, how to get that data from your application and what to do about it is a question that may vary among engineers.

We now release a whole solution, called PRISM, to alleviate this problem. It is a complete pipeline that let you:

Be able to analyze lots of data with as less change to the code base as possible
Analyze, visualize, and share your data easily

Worried about slowing down the whole application while tracking? You don't have to. We use ServiceWorker to do all the heavy-lifting work such as API request in the background, which will not block the UI thread.

Techique Stack

ServiceWorker
ES6 (Decorator, Class, etc.)
React
ElasticSearch, Kibana
SpringBoot

Benefits

Monitor Performance based on React Component Lifecycle
Measure API Calls and Resource Download
Find Hot Spots on Portal
User Analysis
Straightforward Visualization

Competitors Analysis

React Lifecycle Visualizer

This visualizer only does the work of visualization, without any other functionalities. If you want more information about the performance of your React app, barely visualizing the lifecycle methods is far from enough. PRISM provides you with richer information so that you can profile your app more accurately.

react-tracking & react-tracker

PRISM can be used as a profiling tool, so it is designed to be able to track the data that matters the most: the lifecycle methods, REST calls and so on. Comparing to these two libraries, PRISM has an out-of-box feature that let you track the execution time of the components. What you only need to do is to add one line of code for each component you want to track. What 's more, we support Kibana as a visualization tool to let you visualize your data easily, in real time. This makes PRISM an even more user-friendly tool. Last but not least, with the design principle of making PRISM as fast and easy-to-use as possible, we use ServiceWorker to do all the heavy-lifting jobs in the background without making the UI thread slower.

react-perf-devtool

Comparing to this tool, PRISM has several benefits. First of all, PRISM has a simpler installation process. Second, PRISM lets you send your data to an Elasticsearch service, which means that it can provide you with data analysis over a very long period of time, rather than losing all your data after you close your browser. Second, thanks to Kibana, we make the dashboard always available online and easier to share. Third, monitoring the React lifecycle performances is only one of the functionalities of PRISM, not to mention all of the other important features like tracking API performances, user activities, etc. What 's more, this tool may slow down the entire application by doing too much work in the UI thread, while PRISM does most of its work behind the scene in another thread to minimize the performance cost to use PRISM.

How to Use

Install this module in your project. npm install prism-lib --save
In order to load ServiceWorker script, configure /PRISM_SW link to prism-lib/dist/worker.js.

// Let's take Express.js server as an example.
app.use((req, res, next) => {
// set "Service-Worker-Allowed" header for service workers
if (req.url.indexOf('/PRISM_SW') !== -1) {
    fs.readFile(path.join(PATH_OF_WORKER), function(err, data){
        if(err){
            res.writeHead(404, {'Content-type':'text/plain'});
            res.write('Worker script Was Not Found');
            res.end();
        } else {
            res.writeHead(200, {'Service-Worker-Allowed':'/', 'Content-Type':'application/javascript'});
            res.write(data);
            res.end();
        }
    })
    return;
}

Import and start.

import startPrism from 'prism-lib/dist';
startPrism();

// Or, you could customized configuration via this function's input parameter
startPrism({
    // togglers for starters
    rest: true, // network requests
    browse: true, // user browse history
    hotevent: true, // user events
    hyperlink: true, // links
    // options for specific starter
    onChangeElements: [], // only take effect when hotevent is on
    onClickElements: [], // only take effect when hotevent is on
    userName: null, // optional
    forwarderEndpoint: 'https://localhost:8090/elastic', // currently support es
});

// If you want to monitor React Component lifecycles.
import Prism from 'prism-lib/dist/decorator.js';

@Prism()
class YOUR_REACT_COMPONENT extends React.PureComponent {
    ......