Unleashing the Synergy of AWS Amplify and CloudWatch RUM: Empowering Developer in Creating Fluid UX WebApp?

For developers seeking to expedite full-stack application development and deployment on AWS, AWS Amplify provides a comprehensive toolkit. Amplify streamlines the process with pre-built components for user authentication, data storage, analytics, and frontend UI frameworks. However, ensuring exceptional application performance and user experience necessitates a robust monitoring solution. CloudWatch RUM, a native integration with Amplify, offers a compelling all-in-one monitoring and alarming solution. This integration empowers developers with granular insights into application health directly within the familiar AWS ecosystem. This blog post explores the seamless integration of CloudWatch RUM with Amplify applications, detailing how it delivers valuable metrics and real-time user monitoring and alarming to maintain optimal application performance.

?AWS Amplify for Full-Stack Developers

Amplify Overview

In today's development landscape, creating full-stack applications can feel like a tightrope walk, requiring mastery of frontend frameworks, backend setup, and seamless integration. That's where AWS Amplify comes in. It's not just a tool; it's a complete platform designed to make app development easier for everyone. Gone are the days of wrestling with complex backend setups. With Amplify, tasks like user authentication, data storage, and API creation are streamlined. It's a one-stop solution for building robust web and mobile apps with ease.

Amplify offers popular key features that accelerate application development:

?

·????? Easy Setup: Amplify provides a simple CLI (Command Line Interface) that streamlines the setup process for creating, managing, and deploying web applications. Developers can initialize a new Amplify project with just a few commands, making it effortless to get started.

·????? Built-in Authentication: Amplify offers built-in authentication services that support various methods such as username/password, social sign-in, and OAuth. This enables developers to implement secure user authentication and authorization in their applications effortlessly.?

·????? Visual Development Simplified: Amplify Studio empowers non-coders and visual learners with a drag-and-drop interface, enabling them to design user interfaces intuitively and connect them to the backend effortlessly.?

·????? Hosting and CI/CD: Amplify offers hosting services that enable developers to deploy web applications to the cloud with a single command. Additionally, Amplify provides built-in CI/CD (Continuous Integration/Continuous Deployment) capabilities, making it easy to automate the deployment process and ensure seamless updates to applications.?

·????? Backend Services: With Amplify, developers can easily set up backend services such as databases, storage, and APIs. Amplify supports integration with AWS services like Amazon DynamoDB, Amazon S3, and Amazon API Gateway, simplifying the process of configuring and managing backend infrastructure.?

·????? Developer-Friendly Ecosystem: Amplify integrates seamlessly with popular developer tools like Figma and GitHub, ensuring a smooth and familiar workflow. Additionally, the powerful Amplify CLI provides granular control over configurations and deployments.?

Challenges of lack of effective application monitoring ?

Proactive monitoring and alerting are essential for maintaining optimal application performance and minimizing downtime. Lack of effective application monitoring can hinder developers' ability to monitor application performance and track user behavior, potentially impacting user satisfaction and overall business success. Although app monitoring and alarming can be implemented with third-party tools or platform, many non-AWS solutions present several challenges:?

• Limited Visibility: third-party tools often provide developers limited visibility into real-time user interactions and application performance metrics. This lack of visibility can make it difficult to identify issues promptly and optimize application performance effectively.?
• Manual Instrumentation: Monitoring and tracking user behavior may require manual instrumentation of code, which can be time-consuming and prone to errors. Developers may need to implement custom solutions to capture relevant data points, increasing development complexity and maintenance overhead.?
• Fragmented Data Sources: Without a centralized monitoring solution, developers may need to rely on disparate tools and services to gather performance metrics and user tracking data. Managing multiple data sources can lead to fragmented insights and make it challenging to correlate data for comprehensive analysis.?
• Lack of Automation: Without automated monitoring and alerting features, developers may have to rely on manual monitoring and miss critical performance issues until they are reported by users. This can lead to delayed responses, degraded user experience, and increased risk of business impact.??

CloudWatch RUM to the rescue?

CloudWatch RUM (Real User Monitoring) addresses the above problems by offering a comprehensive AWS native solution for monitoring the performance of web applications from the perspective of actual users. By collecting and analyzing client-side data in near real-time, CloudWatch RUM enables you to gain valuable insights into page load times, client-side errors, and user behavior. RUM offers key capacities, including:?

• Real-time Insights: Gain visibility into your application's performance as experienced by users, allowing you to promptly identify and address any issues impacting user experience.?
• Debugging Capabilities: CloudWatch RUM facilitates the quick identification and debugging of client-side performance issues by providing access to relevant data such as error messages, stack traces, and user sessions.?
• Customizable Data Visualization: Visualize aggregated data and breakdowns by browsers and devices, enabling you to understand user behavior and preferences better.?
• Retention and Flexibility: End-user data is retained for 30 days, with an option to extend retention by sending data to CloudWatch Logs. This flexibility ensures you can maintain historical data for longer-term analysis.?
• Easy Integration: Integration with Application Signals streamlines monitoring by providing a pre-built dashboard for visualizing RUM data alongside other monitoring metrics.?
• Open Source: The RUM web client is open source, allowing for transparency and community contributions to enhance monitoring capabilities.?

In terms of performance considerations, CloudWatch RUM is designed with minimal impact:?

• Load Performance: Installation of the RUM web client does not block the application's load process, ensuring no perceptible impact on load times.?
• Runtime Impact: The processing performed by the RUM web client has minimal impact on application performance, with no detectable effect on runtime performance.?
• Network Impact: Data transmission to the CloudWatch RUM service occurs periodically and before browser unloads, designed to have no discernible impact on application performance.?

Integrating CloudWatch RUM in Amplify App?

In this example, we will set up CloudWatch RUM to monitor our existing Amplify App and notifying excessive 4XX errors in app http traffic via CloudWatch Alarm. This helps add proactive monitoring and alarming that prompt timely investigations to our application’s performance health.???

Configuration example?

For this setup, we already have an existing Amplify app built that serves web traffic and will focus on setting up CloudWatch RUM to monitor our existing Amplify app via AWS console.?

First, navigate to CloudWatch page console and under Application Signals/RUM, you can create a RUM by using Add app monitor. For application domain, we want to monitor our amplify app which uses the default *.amplifyapp.com for serving the application.?

Optional - In RUM data collection, there is an option to collect custom events. You can add customer defined RUM events in the events payload using a new API in the CloudWatch RUM Web Client (version 1.12.0) using user guide.?

In our setting, we want to keep CloudWatch logs for our app’s telemetry data, this can be selected in data storage setting.?

After finishing the setup, RUM generates a code snippet which should be added to your applications code, this will install web client in your application.?

When incorporating the code, it is importable to ensure that the aws-rum-web is installed first?

Include "aws-rum-web" package in the code package file and incorporate the aws-rum-web library in the frontend code:

• package.json

.......
"@mui/x-date-pickers": "6.18.1",
"@okta/jwt-verifier": "3.0.1",
"@okta/okta-auth-js": "7.4.3",
"aws-rum-web": "1.17.1",
"base64url": "3.0.1", 
"classnames": "2.3.2", 
"cookies-next": "2.1.1",    
.......        

• pages/_app.tsx

...........
import {
    AwsRum, AwsRumConfig
} from 'aws-rum-web'

const ToastMessage = dynamic(() =>
    import('@/components/ToastMessage').then((mod) => mod.ToastMessage),
    @@ - 74,
    6 + 76,
    36 @@ export default function App({
        setShowExpiredToast(true)
},
[])

useEffect(() => {
    try {
        const config: AwsRumConfig = {
            sessionSampleRate: 1,
            guestRoleArn:
                'arn:aws:iam: :XXXXX-XXXXX-Unauth',
            identityPoolId: 'us-east-1:XXXXX, 
endpoint: XXXXX 
telemetries: ['performance', 'errors', 'http'
            ],
            allowCookies: true,
            enableXRay: false,
        }

        const APPLICATION_ID = 'c479a2e5-bbaa-4147-87d6-06b17762hf75'
        const APPLICATION_VERSION = '1.0.0'
        const APPLICATION_REGION = 'us-east-1'

        const awsRum = new AwsRum(
            APPLICATION_ID,
            APPLICATION_VERSION,
            APPLICATION_REGION,
            config,
        )
        console.log(awsRum)
    } catch (error) {
        // Ignore errors thrown during CloudWatch RUM web client initialization 
        console.log('error aws rum', error)
    }
},
    []) 
...........        

After adding RUM web client code in your application code in Amplify, build, and deploy in Amplify app. This should allow your application to start sending telemetric data to CloudWatch RUM.??

After setting up CloudWatch RUM for our Amplify app, test it out by browsing your app URL and wait for the RUM metric to be refreshed in its main dashboard. You can view high-level summaries of the metric dashboard on Overview page or dive into aspects such as application performance and user journey tracing by viewing each topic’s tab.?

Proactive monitoring with RUM metric-based CloudWatch Alarm??

Setting up alarm using default RUM metric?

RUM comes with a list of default metric for monitoring (see more), we want to set up Cloudwatch alarm based on certain RUM metric to achieve proactive monitoring and get notified in near real time for web traffic errors.??

In the RUM Configuration tab, use create alarm to navigate to CloudWatch Alarm page.? ?

In the alarm metric, CloudWatch RUM metrics are under AWS/RUM namespace. We want to set up a simple alarm to notify develops when a high number of 4xx response status code are returned in application’s HTTP response. The alarm will trigger an action to send email notifications via an SNS topic.?

Optional - Setting up alarm using default RUM extended metric?

In addition to the default RUM metrics, you can optionally configure extended metrics which give you a more fine-grained view for a specific area to monitor. For example, you can see metrics specific to a certain page that is used by your users, or metrics for users in a specific geolocation. In this example, we also want to get notified for errors specific to the “create-account” page of our application.??

We first configure an extended metric with sending metrics, for this “create-account” page, we want to consider all the http errors with HttpErrorCount metric, and select the page ID of the “create-account” page in the application.?

After creating the extended metric, the create alarm bottom will automatically select his metric to create an alarm for this “create account” page to enable granular control when setting the CloudWatch alarm.?

With this alarm enabled by the extended metric, we can get standalone notifications for the most mission-critical application page.??

Conclusion?

In conclusion, the integration of CloudWatch RUM with AWS Amplify presents a native and seamless solution for developers looking to optimize application performance and user experience. With straightforward setup requirements, this integration offers near real-time monitoring capabilities, providing invaluable insights into application health and user behavior within the familiar AWS ecosystem. By leveraging CloudWatch alarms, developers can proactively address potential issues, ensuring optimal performance and enhancing overall user satisfaction. With CloudWatch RUM, AWS Amplify users can confidently build and deploy applications while maintaining a proactive stance towards monitoring and alarming.

References:?

1. AWS CloudWatch – User Guide: https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM.html?
2. AWS Amplify? – User Guide: https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html?

Authors:?

Vinny Wang??

Vinny is a Software Engineer/Consultant at Deloitte, specialized in Cloud Engineering on the AWS platform. With extensive experience in developing end-to-end data and machine learning solutions across multiple industries, he excels at creating effective solutions in all stages of cloud infrastructure and machine learning project cycles.?

Clement Pakkam Isaac? ?

Clement is a Specialist Senior at Deloitte Consulting, specializing in Cloud Infrastructure architecture design and implementation across multiple industries. With 14 years of technical and consulting experience, he has worked as an architect on several large-scale implementations and has served as a trusted advisor for various clients helping them adopt best practices in Infrastructure solutions such as automation, Infrastructure as code, resilience, observability, security & risk assessment, migration, modernization, and digital transformation.??

Sponsor:?

?Gowtham Ramu??

Gowtham is a Specialist Leader in Cloud Engineering at Deloitte, bringing over 24 years of experience in crafting solutions that span various industries. His expertise lies in developing Cloud Native solutions at scale, with a strong focus on data engineering. With more than 10 AWS certifications, he instills in his team a commitment to continuous learning as a fundamental principle.?