Amplify - handle console.log in frontend - javascript

I am using Amplify to host for frontend app(React).
I have some console.log in the application, which is logged in browser inspector.
Are there any amplify functions/aws services which are able to log it somewhere, instead of logging it in browser inspecter?

You can use Amazon's Cloudwatch service to monitor your React application.
Useful readings:
Amplify Monitoring
Amazon Cloudwatch User Guide
Milan Gatyas's response regarding similar problem

Related

How do I send my stripe webhook to my Heroku app?

I've integrated Stripe into my javascript app which works fine in my test environment using ngrok but once I switch to prod, my app is timing out as users attempt to leave the Stripe checkout screen.
The Stripe webhook kicks error Timed out connecting to remote host and I think it's because I have the wrong endpoint.
Testing endpoint
https://6752-136-62-45-90.ngrok.io/users/stripe/webhook
Live endpoint
https://myapp.com/users/stripe/webhook
Everything else in the integration appears to work -- the customer is still created and the billing goes through but I need the endpoint code to run because it builds some critical infrastructure in the user profile.
I also have SSL encryption setup and DNS target on my Heroku application so I'm wondering if I should be using the DNS target or the Heroku app name for the endpoint instead of my domain.
My question
I can't really find any documentation on this but how do I configure my Stripe endpoint with my Heroku-hosted app?
You can test by setting the Heroku app name directly to check if it works to narrow down the issue. If it still doesn't, then most likely it's due to network issue.
Timed out connecting to remote host usually means that the server is not responding. This is likely due to network configuration such as firewall blocking the Stripe IP addresses. I'd recommend checking your network configuration and ensure that Stripe domains/IP addresses are in the allowed list: https://stripe.com/docs/ips

How do I allow Stripe IP addresses in Heroku?

I've integrated Stripe into my javascript app which works fine in my test environment using ngrok but once I switch to prod, my app is timing out as users attempt to leave the Stripe checkout screen.
The API calls going from my app to stripe work so customer is created and billing is setup. However, the Stripe webhook going from stripe back to my app on Heroku kicks error Timed out connecting to remote host.
This leads me to believe it's some sort of networking issue and not the code... a couple people have suggested updating my allowed domains like the stripe docs suggest but I can't figure out how to do that in Heroku?
For context...
Test environment webhook endpoint
https://6752-136-62-45-90.ngrok.io/users/stripe/webhook
Live endpoint
https://myapp.com/users/stripe/webhook
Am I on the right path and how do I configure Heroku to accept webhook post requests from Stripe?

Connecting AWS MQTT via websocket

I am trying to connect a sensor to an AWS MQTT Broker to a database that will send it to a webserver so that it can be easily accessible. Right now the only way people in our lab can have access to our sensor data is through contacting me directly and having me connect to the Node Red dashboard. Would there be any way for everyone to have access to the data via WebSocket, or at least a couple of people?
I've searched for hours on end and have had no success regarding the ease of accessibility.
From what I've researched there is this a java based client called MQTT.Cool that can connect multiple brokers and have data published via WebSocket using JavaScript. However there is literally no data available except the ones provided by the company. So combining it it with my project has not been an easy task.
Also, I've thought about allowing my node red dashboard to be accessed out of my local
ip-address, but due to security reasons it has been recommended not to be done.
AWS IoT provides an SDK that you can use in your browser:
https://github.com/aws/aws-iot-device-sdk-js#browser
You can write a web application and view the contents returned by the database after logging in
If you need to browse in real-time, you can use mqtt.js to subscribe to some topics:
https://www.emqx.com/en/blog/connect-to-mqtt-broker-with-websocket
Or use MQTTX, a client tool, to connect directly to the MQTT broker and subscribe to topic

How to push Reactjs logs and metrics to Grafana

Background:
I am working on a project where we have a server setup in Java and for front-end we are using ReactJs. Our server ships all logs to Loki endpoint via their push API and all metrics to a prometheus push-gateway. Grafana then pulls those logs and metrics from Loki and push-gateway for display.
Requirement:
I want to persist and place the ReactJs application logs and metrics so they are visible on grafana. This will help us see both frontend and backend application logs & metrics in the same place. Is there a free, opensource Javascript library or framework that can help me with that. The less code I need to write the better.
I was opting for sentry before but it's not completely free anymore. And we cannot use console logging as it disappears on browser refresh and not really helpful in production
So I didn't find a good library at that time but I was eventually able to ship logs to loki push endpoint.
I tried to push logs directly from frontend to loki push endpoint. This gave me a cors error. So I came up with the following steps to get around cors with Loki.
My workaround:
Setup nginx proxy server.
Nginx resolves cors.
Add reverse proxy to nginx. I send request to nginx host and then it forwards that request to loki from within same network so no cors.
I took alot of reading and hit and trys but I got the setup working. We are now using this setup to push frontend logs to grafana

Firebase Cloud Messaging works only from localhost

I have implemented the Firebase Cloud Messaging - Push Notifications to my spring-boot web application. Everything works fine, until I needed to deploy my application to a web server or run it from another domain in my network. Even when I try to open :port instead of localhost:8080, the firebase-messaging is not recognized..
I receive the following error messages in the console:
{code: "messaging/unsupported-browser", message: "Messaging: This browser doesn't support the API's …he firebase SDK. (messaging/unsupported-browser).", stack: "FirebaseError: Messaging: This browser doesn't sup… at http://192.168.1.3:8080/js/FireBase.js:14:28"}code: "messaging/unsupported-browser"message: "FirebaseError: Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser).↵ at Object.messaging (https://www.gstatic.com/firebasejs/5.7.0/firebase-messaging.js:1:35551)
Uncaught ReferenceError: messaging is not defined..
FireBase.js line 14 is:
// Retrieve the FireBase Messaging object.
const messaging = firebase.messaging();
I am searching the whole day about it, but I couldn't find any adequate solution..
I would be very thankful to any suggestions!
There are some instances that you need to check.
First, make sure your browser is up to date.
Second, test Firebase without any extensions on your browser especially on Chrome.
Third, When going online, Prefer HTTPS instead of HTTP. So it comes with the SSL related issue.
Please see the code that checks if the browser has the necessary APIs firebase-js-sdk-
PS: To test it immediately, just insert your code inside Try/Catch.
[edit]: If you don't want to make a try/catch statement, please consider this

Categories

Resources