如何从前端使用 AWS CloudWatch Logs 提交简单日志？

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

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

Answer 2

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:

1. Use client-side libraries (Sentry) that were specifically designed to log errors and debugging information.

2. You can implement the sending of logs via an API that then forwards/proxies the logs towards CloudWatch.