I am building a simple React app that generates a QR code from data. I am interested in inspecting the memory usage when the QR code is generated. I am using the built process.memoryUsage() function but the app throws and exception

Uncaught TypeError: process__WEBPACK_IMPORTED_MODULE_1__.process is undefined 

I have tested some different solution, i tried to rollback the react script version to "4.0.3" i tried to download the npm polyfill webpack but there is no success.

I am currently using these imports

 import React, { useState, useEffect } from 'react';
 import process from 'process';
 import './App.css';
 const QRCode = require('qrcode');

The function looks like this

let stringData = JSON.stringify(qrData);
console.log("Number of chars in data"   " "   stringData.length);

QRCode.toDataURL(stringData, function (err, url) {
if(err) return console.log("error occured")
//window.location.href = url;

})
const used = process.memoryUsage();
for (let key in used) {
console.log(`${key} ${Math.round(used[key] / 1024 / 1024 * 100) / 100} MB`);
 }
}

CodePudding user response：

process is a Node.js API and is not available in the browser where your React app is running, which is why you see that error. If there is an available global process object, it is being polyfilled by something in your build tools, and will not have the memoryUsage method.

There is no equivalent API for the browser, but some related APIs do exist. Note that this is an evolving space and some are non-standard, so be sure to read both the spec and documentation before considering any usage:

• Device Memory API (MDN)
• Performance.memory (MDN)

CodePudding user response：

You are using a built in nodejs package in a react app. Node executes on the server and has access to system level resources. React runs in the browser and does not. See this article for some tips measuring performance in React.