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

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, Sep 25 '20 at 07:53
How are you serving your front end? Is is a static S3 website? Hosted on EC2 running Apache/Nginx? — maafk, Sep 25 '20 at 13:56

score 8 · Accepted Answer · answered Sep 29 '20 at 11:37

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

chia yongkang · Answer 2 · 2022-12-21T07:53:18.753

We're not supposed to be dumping browser-side error logs directly from the browser to CloudWatch. This presents an issue because posting logs to CloudWatch using SDK outside the AWS ecosystem requires API secret key and secret IDs, which means that it could be exposed to bad elements that could run MITM attacks and intercept our AWS credentials.

You will have two options to proceed with what you desire to do with less risk:

Use client-side libraries (Sentry) that were specifically designed to log errors and debugging information.
You can implement the sending of logs via an API that then forwards/proxies the logs towards CloudWatch.

score 1 · Answer 3 · answered Mar 02 '23 at 08:33

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

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

3 Answers3

Linked