Monitor Your React Website Performance with Headless Browser & Telegram

Introduction

Discover how to create a monitoring service for your React-based website using a headless browser and Telegram. This guide will walk you through setting up a Telegram bot and integrating it with a headless browser to monitor your website's performance.

Setting Up Telegram Bot

Begin by creating a Telegram bot to automate performance reporting.

1. Search for BFA on Google and start a conversation with the bot.
2. Select New Bot, give it a name like Light Not WebBot, and set a username.
3. Note the access token provided by the bot; you'll need it later.
4. Enable the bot to join groups by clicking Help, selecting Join Groups, and choosing your bot.
5. Create a group where the bot will send performance reports. Invite your bot to this group and note the group chat ID.

Creating the Monitoring Scenario in Late Night

Switch to the Light N platform to set up the monitoring scenario:

1. Create a new scenario and add the following triggers:
• Schedule Trigger: Activates the scenario at set intervals.
• Webhook Trigger: Allows manual activation via a webhook link.
2. Add a Headless Browser Node to perform website checks. Include the code to navigate to the authorization page and verify the presence of the "Create your account" text.
3. Add two Telegram Nodes to send messages based on the headless browser's results:
• Send Text Message: Positive report if verification is successful.
• Send Text Message: Negative report if verification fails.
4. Authorize the Telegram nodes by entering the access token and group chat ID.
5. Set filters for success and error conditions:
• Success Filter: Activated if the headless browser's result is true.
• Error Filter: Activated if the result is false.
6. Deploy the scenario and verify its operation by triggering the webhook.
7. Check the history tab for execution logs and confirm the Telegram messages.

Conclusion

You've successfully created a website monitoring service using a headless browser and Telegram. For ready-to-use templates and further assistance, refer to the links in the description. Like, subscribe, and hit the bell for more tutorials. Happy automating!