Implementing Real User Monitoring of Amplify Application using Amazon CloudWatch RUM

> npx create-react-app amplify-cloudwatch-rum
> cd amplify-cloudwatch-rum
> amplify init

> amplify add hosting
✔ Select the plugin module to execute · Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)

? Choose a type Manual deployment

> amplify publish

> amplify override project  
Successfully generated "override.ts" folder at /home/ec2-user/environment/amplify-cloudwatch-rum/amplify/backend/awscloudformation
✔ Do you want to edit override.ts file now? (Y/n) · no 

import { AmplifyRootStackTemplate } from '@aws-amplify/cli-extensibility-helper';

export function override(resources: AmplifyRootStackTemplate) {
    // Give permissions to perform the rum:PutEvents action to the authenticated role
    // & change the name so we can reference it later
    const authRole = resources.authRole;
    authRole.roleName = 'amplify-amplifycloudwatchrum-authRole';
    const authRoleBasePolicies = Array.isArray(authRole.policies)
        ? authRole.policies
        : [authRole.policies];
    
    authRole.policies = [
        ...authRoleBasePolicies,
        {
            policyName: "cloudwatch-rum-put-events",
            policyDocument: {
                Version: "2012-10-17",
                Statement: [
                    {
                        Effect: "Allow",
                        // Replace AWS Region and Account ID (https://docs.thinkwithwp.com/IAM/latest/UserGuide/console_account-alias.html)
                        // of your Amplify project, as well as the correct project’s name and environment.
                        Resource: "arn:aws:rum:[aws-region]:[aws-account-id]:appmonitor/app-monitor-[amplify-project-name]-[amplify-env]",
                        Action: ["rum:PutRumEvents"]
                    }    
                ]
            }
        }
    ];
     
    // Give permissions to perform the rum:PutEvents action to the unauthenticated role
    // & change the name so we can reference it later
    const unauthRole = resources.unauthRole;
    unauthRole.roleName = 'amplify-amplifycloudwatchrum-unauthRole';
    const unauthRoleBasePolicies = Array.isArray(unauthRole.policies)
        ? unauthRole.policies
        : [unauthRole.policies];
    
    unauthRole.policies = [
        ...unauthRoleBasePolicies,
        {
            policyName: "cloudwatch-rum-put-events",
            policyDocument: {
                Version: "2012-10-17",
                Statement: [
                    {
                        Effect: "Allow",
                        // Replace AWS Region and Account ID (https://docs.thinkwithwp.com/IAM/latest/UserGuide/console_account-alias.html)
                        // of your Amplify project, as well as the correct project’s name and environment.
                        Resource: "arn:aws:rum:[aws-region]:[aws-account-id]:appmonitor/app-monitor-[amplify-project-name]-[amplify-env]",
                        Action: ["rum:PutRumEvents"]
                    }    
                ]
            }
        }
    ];
}

> amplify add auth
Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
Do you want to use the default authentication and security configuration? Manual configuration
Select the authentication/authorization services that you want to use: User Sign-Up, Sign-In, connected with AWS IAM controls (Enables per-user Storage features for images or other content, Analytics, and 
Provide a friendly name for your resource that will be used to label this category in the project: amplifycloudwatchrumauth
Enter a name for your identity pool. testcustomd8162cfd_identitypool_d8162cfd
Allow unauthenticated logins? (Provides scoped down permissions that you can control via AWS IAM) Yes
Do you want to enable 3rd party authentication providers in your identity pool? No
Provide a name for your user pool: testcustomd8162cfd_userpool_d8162cfd
Warning: you will not be able to edit these selections. 
How do you want users to be able to sign in? Email
Do you want to add User Pool Groups? No
Do you want to add an admin queries API? No
Multifactor authentication (MFA) user login options: OFF
Email based user registration/forgot password: Enabled (Requires per-user email entry at registration)
Specify an email verification subject: Your verification code
Specify an email verification message: Your verification code is {####}
Do you want to override the default password policy for this User Pool? No
Warning: you will not be able to edit these selections. 
What attributes are required for signing up? Email
Specify the app's refresh token expiration period (in days): 30
Do you want to specify the user attributes this app can read and write? No
Do you want to enable any of the following capabilities? <Do not select any option>
Do you want to use an OAuth flow? No
Do you want to configure Lambda Triggers for Cognito? No

✅ Successfully added auth resource amplifycloudwatchrumauth locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

> amplify add function
? Select which capability you want to add: Lambda function (serverless function)
? Provide an AWS Lambda function name: cfncustomfn
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World

Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration
- Environment variables configuration
- Secret values configuration

? Do you want to configure advanced settings? No
? Do you want to edit the local lambda function now? No
Successfully added resource cfncustomfn locally.

var https = require("https");
var url = require("url");

exports.SUCCESS = "SUCCESS";
exports.FAILED = "FAILED";

exports.send = async (event, context, responseStatus, responseData, physicalResourceId, noEcho) => {

  var responseBody = JSON.stringify({
    Status: responseStatus,
    Reason: "See the details in CloudWatch Log Stream: " + context.logStreamName,
    PhysicalResourceId: physicalResourceId || context.logStreamName,
    StackId: event.StackId,
    RequestId: event.RequestId,
    LogicalResourceId: event.LogicalResourceId,
    NoEcho: noEcho || false,
    Data: responseData
  });

  var parsedUrl = new url.URL(event.ResponseURL);
  var options = {
    hostname: parsedUrl.hostname,
    port: 443,
    path: `${parsedUrl.pathname}${parsedUrl.search}`,
    method: "PUT",
    headers: {
      "content-type": "",
      "content-length": responseBody.length
    }
  };
  
  return new Promise((resolve, reject) => {
    var request = https.request(options, function (response) {
      resolve(response);
    });  
    
    request.on("error", function (error) {
      reject(error);
    });
  
    request.write(responseBody);
    request.end();
  });
}

const { Logger } = require('@aws-lambda-powertools/logger');
const response = require('./cfn-response');
const { RUM } = require('aws-sdk');

const MAX_RETRIES = 5;

const logger = new Logger({
    serviceName: 'appMonitorIdRetrieveService',
    logLevel: 'DEBUG'
});
const client = new RUM();

/**
 * @type {import('@types/aws-lambda').CloudFormationCustomResourceHandler}
 */
exports.handler = async (event, context) => {
    logger.debug('Event:', { event: event });
    
    if (event.RequestType === 'Delete') {
        logger.info('Delete');
        await response.send(event, context, response.SUCCESS, {}, 'CustomFunction');
    } else if (event.RequestType === 'Create' || event.RequestType === 'Update') {
        logger.info('Create/Update');
        
        if (!event.ResourceProperties.hasOwnProperty('projectName') ||
            !event.ResourceProperties.hasOwnProperty('envName')) {
            logger.error('Event not supported, no projectName or envName', { details: event });
            await response.send(event, context, response.FAILED, {}, 'CustomFunction');
        }
        
        let retryIdx = 1;
        let appMonitorId;
        while (!appMonitorId) {
            if (retryIdx === MAX_RETRIES) {
                logger.error('Reached max retry limit, appMonitor not found.');
                await response.send(event, context, response.FAILED, {}, 'CustomFunction');
            }

            try {
                const { projectName, envName } = event.ResourceProperties;
                const res = await client.getAppMonitor({
                    Name: `app-monitor-${projectName}-${envName}`
                }).promise();
                appMonitorId = res.AppMonitor.Id;
            } catch (err) {
                logger.error(err);
                const waitMs = 1000 * retryIdx;
                logger.info(`Trying again in ${waitMs}ms`);
                retryIdx++;
                // Basic back-off mechanism
                await new Promise(resolve => setTimeout(resolve, waitMs));
            }
        }
        
        try {
            const responseData = { AppMonitorId: appMonitorId };
            logger.debug('Response data', { details: responseData });
            await response.send(event, context, response.SUCCESS, responseData, 'CustomFunction');   
        } catch (err) {
            logger.error(err);
            await response.send(event, context, response.FAILED, {}, 'CustomFunction');
        }
    } else {
        logger.error('Event not supported', { details: event });
        await response.send(event, context, response.FAILED, {}, 'CustomFunction');
    }
};

[
  {
    "Action": [
      "rum:GetAppMonitor"
    ],
    "Resource": [
      "arn:aws:rum:[aws-region]:[aws-account-id]:appmonitor/app-monitor-[amplify-project-name]-${env}"
    ]
  }
]

> amplify add custom           
✔ How do you want to define this custom resource? · AWS CDK
✔ Provide a name for your custom resource · cloudwatchrum
✅ Created skeleton CDK stack in amplify/backend/custom/cloudwatchrum directory
✔ Do you want to edit override.ts file now? (Y/n) · no

{
  "name": "custom-resource",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "@aws-amplify/cli-extensibility-helper": "^2.0.0",
    "@aws-cdk/core": "~1.159.0",
    "@aws-cdk/aws-iam": "~1.159.0",
    "@aws-cdk/aws-rum": "~1.159.0"
  },
  "devDependencies": {
    "typescript": "^4.2.4"
  }
}

npm i

import * as cdk from '@aws-cdk/core';
import * as AmplifyHelpers from '@aws-amplify/cli-extensibility-helper';
import { AmplifyDependentResourcesAttributes } from '../../types/amplify-dependent-resources-ref';
import * as rum from '@aws-cdk/aws-rum';

export class cdkStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps, amplifyResourceProps?: AmplifyHelpers.AmplifyResourceProps) {
    super(scope, id, props);
    /* Do not remove - Amplify CLI automatically injects the current deployment environment in this input parameter */
    new cdk.CfnParameter(this, 'env', {
      type: 'String',
      description: 'Current Amplify CLI env name',
    });
    /* AWS CDK code goes here - learn more: https://docs.thinkwithwp.com/cdk/latest/guide/home.html */
    
    const amplifyProjectInfo = AmplifyHelpers.getProjectInfo();

    // Access other Amplify Resources 
    const retVal: AmplifyDependentResourcesAttributes = AmplifyHelpers.addResourceDependency(this,
      amplifyResourceProps.category,
      amplifyResourceProps.resourceName,
      [
        // Change the name of resourceName below to your Amplify-created resource name
        { category: 'auth', resourceName: 'amplifycloudwatchrumauth' },
        { category: 'function', resourceName: 'cfncustomfn' }
      ]
    );
    // Change the name of resourceName below to your Amplify-created resource name
    const identityPoolId = cdk.Fn.ref(retVal.auth.amplifycloudwatchrumauth.IdentityPoolId);
    const guestRoleArn = `arn:aws:iam::${cdk.Stack.of(this).account}:role/amplify-amplifycloudwatchrum-unauthRole`;
    const myFunctionArn = cdk.Fn.ref(retVal.function.cfncustomfn.Arn);
    
    // Create a CloudWatch RUM appMonitor
    const appMonitor = new rum.CfnAppMonitor(this, `rum-app-monitor-${amplifyProjectInfo.projectName}-${amplifyProjectInfo.envName}`, {
      // Replace this with your app domain if you are using a FQDN
      domain: 'dev.d3sakkbawtnkcg.amplifyapp.com',
      name: `app-monitor-${amplifyProjectInfo.projectName}-${amplifyProjectInfo.envName}`,

      // the properties below are optional
      appMonitorConfiguration: {
        allowCookies: true,
        enableXRay: true,
        guestRoleArn: guestRoleArn,
        identityPoolId: identityPoolId,
        sessionSampleRate: 1,
        telemetries: ['errors', 'http', 'performance'],
      },
      cwLogEnabled: false
    });

    // Create an AWS Lambda-backed CloudFormation custom resource
    const customResource = new cdk.CustomResource(this, 'MyResource', {
      serviceToken: myFunctionArn,
      properties: {
        envName: amplifyProjectInfo.envName,
        projectName: amplifyProjectInfo.projectName,
      }
    });
    // Add explicit dependency to tell CloudFormation to wait for appMonitor to be created
    customResource.node.addDependency(appMonitor);
    
    // Add outputs so we can retrieve them using Amplify command hooks
    new cdk.CfnOutput(this, 'AppMonitorName', {
      value: `app-monitor-${amplifyProjectInfo.projectName}-${amplifyProjectInfo.envName}`,
    });
    
    new cdk.CfnOutput(this, 'AppMonitorId', {
      value: customResource.getAtt('AppMonitorId').toString(),
    });

    new cdk.CfnOutput(this, 'GuestRoleArn', {
      value: guestRoleArn,
    });

    new cdk.CfnOutput(this, 'IdentityPoolId', {
      value: identityPoolId,
    });
  }
}

const fs = require('fs');
const path = require('path');
const parameters = JSON.parse(fs.readFileSync(0, { encoding: 'utf8' }));

const amplifyMetaFile = JSON.parse(fs.readFileSync(path.join(
  parameters.data.amplify.environment.projectPath,
  'amplify',
  'backend',
  'amplify-meta.json'
)));

const { custom, providers } = amplifyMetaFile;
// Change the name of resourceName below to your Amplify-created resource name if different
const { cloudwatchrum } = custom;

console.log('Copy/paste these values in public/index.html with CloudWatch RUM code snippet below');

console.log(`appMonitorId ${cloudwatchrum.output.AppMonitorId}`);
console.log(`appMonitorGuestRoleArn ${cloudwatchrum.output.GuestRoleArn}`);
console.log(`appMonitoridentityPoolId ${cloudwatchrum.output.IdentityPoolId}`);
console.log(`awsRegion ${providers.awscloudformation.Region}`);

<script>
 (function (n, i, v, r, s, c, x, z) {
  x = window.AwsRumClient = { q: [], n: n, i: i, v: v, r: r, c: c };
  window[n] = function (c, p) { x.q.push({ c: c, p: p }); };
  z = document.createElement('script');
  z.async = true; z.src = s;
  document.head.insertBefore(z, document.head.getElementsByTagName('script')[0]);
 })(
  'cwr',
  '[appMonitorId]', // Replace this with appMonitorId
  '1.0.0',
  '[awsRegion]', // Replace this with awsRegion
  'https://client.rum.us-east-1.amazonaws.com/1.2.1/cwr.js',
 {
    sessionSampleRate: 1,
    guestRoleArn: "[appMonitorGuestRoleArn]", // Replace this with appMonitorGuestRoleArn
    identityPoolId: "[appMonitoridentityPoolId]",  // Replace this with appMonitoridentityPoolId
    endpoint: "https://dataplane.rum.[awsRegion].amazonaws.com", // Replace this with awsRegion
    telemetries: ["performance", "errors", "http"],
    allowCookies: true,
    enableXRay: true
 });
</script>