Forem: Shubham

Implement Azure Application Insights with React

Shubham — Tue, 17 Aug 2021 13:39:18 +0000

When we talk about monitoring/logging option on the UI application side we don't have much option which gives picture perfect dashboard, one way could be passing all the data to the server via some endpoints and creating our own dashboard.

Today we are going to talk about Application Insights which can be used in applications from web to mobile.

In web applications like ecommerce we want to capture specific event, page views, track exception, API calls and much more. We can implement Application Insights in the backend code as well so that team can club all the data if required.

Let's start Configuring AppInsights

First we need to create the Azure account if you don't have, then create the resource in Azure and have an AppInsights instance so that we can get the instrumentation key.

Now install npm packages so that we can start integrating AppInsights.

npm install @microsoft/applicationinsights-react-js npm install @microsoft/applicationinsights-web

Let's create the file that will setup the instrumentation for us.

// appInsights.js

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory({ basename: '' });
const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: process.env.REACT_APP_APPINSIGHTS_KEY,
    extensions: [reactPlugin],
    extensionConfig: {
      [reactPlugin.identifier]: { history: browserHistory },
    },
  },
});
appInsights.loadAppInsights();
export { reactPlugin, appInsights };

This file will setup the connection using the key (instrumentation key) which I have kept in environment file. Let's create one .env file for development.

// .env.development

REACT_APP_APPINSIGHTS_KEY = <paste your instrumentation key here>

We are done with the initial setup & it's time to track some events.

trackException This event is handy when you want to log exception related to API or if the API itself gets fail.

import { appInsights } from 'appInsights';

const properties = {userId : personId}
try {
}
catch(err) {
 appInsights.trackException({ error: err, properties });
}

pass the data in properties object which you want to capture along with the error.

trackPageView In a device or webpage app, page view telemetry is sent by default when each screen or page is loaded. But you can change that to track page views at additional or different times.

appInsights.trackPageView("tab1");

So idea is to create a common method and just need to import where ever required and call different methods provided by Azure AppInsights.

For other methods please checkout this link
https://docs.microsoft.com/en-us/azure/azure-monitor/app/api-custom-events-metrics

Upload files to Azure Blob Storage with React

Shubham — Fri, 04 Jun 2021 08:27:15 +0000

We can directly upload large files (zip,.mp4, .mp3, .pdf, or any other type) to blob storage via browser with a Shared Access Signature (SAS) token generated from account.

In this example we have used CRA to integrate blob storage code.

We will cover :-

Generating SAS token, Container Name, Storage Name
Uploading file to Blob
Getting the list of all files uploaded to blob

Let's Start :-

Let's assume you have your account setup with Azure and have all necessary permission to create container.

Once you have CRA ready, we will need to use @azure/storage-blob package to upload files.

Now we will need to set up storage account name and container name. Container name is something where all your files resides. I would recommend you to follow this link to set up blob level configuration.

https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial/browser-file-upload-azure-storage-blob

Once you are done with the setup we can start some coding. let's say below are the configuration values.

const sasToken = process.env.storagesastoken || "sv=2020-02-10&ss=bfqt&srt=sco&sp=rwdlacuptfx&se=2021-05-28T16:49:40Z&st=2021-05-24T08:49:40Z&spr=https&sig=Ce0EinaxCMsiqnNfo9wCRr8%3D"; 
const containerName = `importfiles`;
const storageAccountName = process.env.storageresourcename || "storagename";

while creating the token we need to set start date and the end date with other permission like read, write, delete.

Let's create the file and put the code to choose the file from the folder

const DisplayForm = () => (
    <div>
      <input type="file" onChange={onFileChange} key={inputKey || ''} />
      <button type="submit" onClick={onFileUpload}>
        Upload!
      </button>
    </div>
  );

Now we are all set and we have everything to upload files over the blob storage, so let's see the code for blob Upload.

const uploadFileToBlob = async (file) => {
  if (!file) return [];

  // get BlobService = notice `?` is pulled out of sasToken - if created in Azure portal
  const blobService = new BlobServiceClient(
    `https://${storageAccountName}.blob.core.windows.net/?${sasToken}`
  );
  // get Container - full public read access
  const containerClient = blobService.getContainerClient(containerName);

  // upload file
  await createBlobInContainer(containerClient, file);

  // get list of blobs in container
  return getBlobsInContainer(containerClient);
};

Once we pass the file object as argument to the above function it will call createBlobInContainer function. In this function along with file we can also pass the metadata like UserName, UserId etc so that we can trigger some azure function.

await blobClient.setMetadata({UserName : 'shubham'});

Another use case can be updating the file path in the DB, in that case we will require metadata to map the files.

Once we are able to upload the files in blob it executes getBlobsInContainer function which will return all the files in your storage account. This function is optional and depends on you.

const getBlobsInContainer = async (containerClient) => {
  const returnedBlobUrls = [];
  for await (const blob of containerClient.listBlobsFlat()) {
    // if image is public, just construct URL
    returnedBlobUrls.push(
      `https://${storageAccountName}.blob.core.windows.net/${containerName}/${blob.name}`
    );
  }

  return returnedBlobUrls;
};

Conclusion

This is one way of uploading file to blob and the code which I have put here is the basic one, we can extend our code and put some checks for error handling, getting the progress of files.

We can use Redux with middlewares in case of complex architecture.

The final code is on Github

How to Handle Multiple Environments in a React App

Shubham — Sun, 14 Feb 2021 15:11:09 +0000

Use Case

While developing a web application most of the developers use Create React App. This means that once you start creating a build, it gets created for a specific environment and continues to exist in the same environment.

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  }

Developers can only use two environments by default.

Development — NODE_ENV=development when developing the application locally. Uses .env.development by default, if available.
Production — NODE_ENV=production when building the application for deployment. Uses .env.production by default, if available.

Imagine my project has four environments:

Development
Testing
Staging
Production

Suppose you have different API URL for each environment or APPINSIGHTS_KEY which can used for the analytics. You can add the configuration in the .env file. Below are the files which we can used for different environments.

.env.development
REACT_APP_BASE_API_URL = 'https://learning.int.org/'

.env.qa
REACT_APP_BASE_API_URL = 'https://learning.qa.org/'

.env.candidate
REACT_APP_BASE_API_URL = 'https://learning.candidate.org/'

.env.production
REACT_APP_BASE_API_URL = 'https://learning.production.org/'

Note: Prefix “REACT_APP_” is required for creating custom variables in React.

Now we need to change the build script in package.json file.

"scripts": {
    "start-js": "run-s react:start lint",
    "react:start": "react-scripts start",
    "start:development": "env-cmd -f .env.development npm run-script start-js",
    "build:integration": "env-cmd -f .env.integration npm run-script build",
    "build:qa": "env-cmd -f .env.qa npm run-script build",
    "build:candidate": "env-cmd -f .env.candidate npm run-script build",
    "build:production": "env-cmd -f .env.production npm run-script build",
    "build": "set \"GENERATE_SOURCEMAP=false\" && rimraf ./build && react-scripts build",
  }

Access the variables in-app : process.env.REACT_APP_BASE_API_URL

Note: Though we have added four different environments and when you build the app NODE_ENV will be production. To distinguish the builds, you can add REACT_APP_ENV and specify your environment there.

Hope this article solves some of the problems that occur on day to day basis.