How to submit the simple log with AWS CloudWatch Logs from frontend?

Question

After about 1 hour of searching, I didn't find anything about 'how to submit a simple log to AWS CloudWatch Logs' from the frontend side. Almost all examples are for Node.js, but I need to submit the errors from the frontend, not form backend. I even did not found which package which I should use for the frontend.

To save, your time, I prepared the template of solution.

import { AWSCloudWatch } from "?????";

AWSCloudWatch.config({
  // minimal config
});

if (__IS_DEVELOPMENT_BUILDING_MODE__ || __IS_TESTING_BUILDING_MODE__) {
  console.error(errorMessage);
  return;
}

if (__IS_PRODUCTION_BUILDING_MODE__) {
  // Submit 'errorMessage' to AWS CloudWatch
  // It would be something like
  // AWSCloudWatch.submit(errorMessage)
}

Porterfield

You can't do it directly as you would have to hardcode some iam credentails in your frontend. The best way would be to proxy through api gateway. So you submit logs to API gateway, the API is either directly integrated with CW Logs, or through lambda function. – Tripterous

How are you serving your front end? Is is a static S3 website? Hosted on EC2 running Apache/Nginx? – Rancho

@maafk, Static S3 website. – Porterfield

Answer 1

You can use AWS SDK for JavaScript directly from your browser. Visit https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/ for the guide.

Then you can call the putLogEvents method of AWS CloudWatchLogs API, assuming you already created log group and log stream. For guide visit https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CloudWatchLogs.html#putLogEvents-property

Incongruity

Answer 2

Use Cloudwatch Real User Monitoring (RUM)

https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM-get-started.html

You can do steps 1 and 2 of the setup with CloudFormation:

  CWRumAppMonitor:
    Type: AWS::RUM::AppMonitor
    Properties:
      AppMonitorConfiguration:
        AllowCookies: true
        EnableXRay: true
        IdentityPoolId: !Ref CWRumIdentityPool
        GuestRoleArn: !GetAtt CWRumClientRole.Arn
        SessionSampleRate: 1
        Telemetries:
          - errors
          - performance
          - http
      CustomEvents: 
        Status: ENABLED
      Domain: !Ref ApplicationDomain
      Name: !Ref ApplicationName

More on cloudformation here:

https://dev.to/oneadvanced/cloudwatch-rum-with-cognito-identity-pool-for-samcloudformation-42pc

Inscription