Logging Events from UI to AWS (Javascript)

[coultergeist]

Time estimated: 5 hours. Time spent: PR link: Wiki link: Deployed Code link:

[coultergeist]

Tutorial: https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CloudWatch.html

[coultergeist]

From UI page, trigger a Lambda function that can be logged on CloudWatch. Need to create an S3 bucket first. Awaiting permissions/resources in AWS account.

Thought of just using the Hello World Lambda function for testing:

exports.handler = async (event) => { console.log(event.body.message); const response = { statusCode: 200, headers: { "Access-Control-Allow-Origin" : "*" }, body: JSON.stringify('Hello from Lambda!'), }; return response; };

[toddysm]

Need the following:

• Link to pull request
• Link to Wiki page
• Link to working implementation
• Who tested it and what is the feedback?
• What did you test and what is the feedback?

[coultergeist]

Here is where I am because I can't figure out how to complete this: 1) Tutorial about AWS SDK for JavaScript in the Browser 2) In order to do that, you need to install the SDK and dependencies 3) In order to do that, you need to configure the access keys from the Users page but the commands in the tutorial commands aren't working 4) Then needed to set the AWS Credentials, 5) Loading Credentials in Node.js from a JSON File

Estimated Time Spent: 5 hours Time Spent So Far: 6 hours

[coultergeist]

Time Spent So Far: 11 hours

1) Initialized API and Cloudwatch 2) Prompt user from browswer

3) Log in

4) Event is seen in CloudWatch

5) Need to add POST function to button

var url = 'https://example.com/profile'; var data = {username: 'example'};

fetch(url, { method: 'POST', // or 'PUT' body: JSON.stringify(data), // data can be string or {object}! headers:{ 'Content-Type': 'application/json' } }).then(res => res.json()) .then(response => console.log('Success:', JSON.stringify(response))) .catch(error => console.error('Error:', error));

[coultergeist]

Decided to use Axios instead of this fetch() because it's more efficient and clean.

Added the call into the try/catch statement of the handleSubmit button when user logs in.

handleSubmit = async event => { event.preventDefault();

    this.setState({ isLoading: true });

    try {
        await Auth.signIn(this.state.email, this.state.password);
        this.props.userHasAuthenticated(true);
        this.props.history.push('/requests');

            //**********  */POST function here: Danielle Sprint 2 feature: Log js events from broswer to AWS CW
            //Setting message parameter in the url to be accessed in AWS services
            var url = 'https://tqzb08t6al.execute-api.us-east-2.amazonaws.com/development/cloudwatch?message=hello;
            var data = {username: 'example'};

            //axios takes care of the response data and JSON format, 
            //and also handles headers and other parameters automatically
            axios.post(url)
            .then(data => console.log(data))
            .catch(err => console.err(err))
            //end POST

    } catch (e) {
        alert(e.message);
        this.setState({ isLoading: false });
    }

Since there is no API endpoint, log was initiated by a Lambda function. This is be replaced with the http api endpoint when corrected. In the meantime, we have successfully logged JS events from the browser into AWS CloudWatch.

Time estimated: 5 hours Time spent: 15 hours PR link: https://github.com/coultergeist/danielle-feature-sprint-2 Wiki link: https://github.com/ActoKids/AD440_W19_CloudPracticum/wiki/Logging-JS-events-from-browser-to-AWS-CloudWatch Deployed Code link: Tested https://tqzb08t6al.execute-api.us-east-2.amazonaws.com/development/cloudwatch in Postman What I tested: Issue 47, UI Forms: dashboard>GET/events Feedback: Erik, Everything is looking really good. Downloaded and tested the brand new repo, the work you all did to get all the repos closed and create one template looks great. So my feedback is more directed to the Firebase portion? Will this be replaced with the API endpoint when we get it?