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)
}

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)
}

• javascript
• amazon-web-services
• amazon-cloudwatch
• amazon-cloudwatchlogs

• 7 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. – Marcin Commented Sep 25, 2020 at 7:53
• How are you serving your front end? Is is a static S3 website? Hosted on EC2 running Apache/Nginx? – maafk Commented Sep 25, 2020 at 13:56
• @maafk, Static S3 website. – Takeshi Tokugawa YD Commented Sep 28, 2020 at 0:43

2 Answers 2

You can use AWS SDK for JavaScript directly from your browser. Visit https://docs.aws.amazon./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./AWSJavaScriptSDK/latest/AWS/CloudWatchLogs.html#putLogEvents-property

Use Cloudwatch Real User Monitoring (RUM)

https://docs.aws.amazon./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