Render

is a very important but often misunderstood method in React. In this guide, we’ll try to shed light on what is, what it does, and why it’s so important for the development process with React. render() render() What is render in React? Render method returns the component structure written in JSX. In other words, it defines what the user interface should look like. React components re-render whenever there’s a change to state or props to make sure the latest changes are reflected on the page. Automatically updating (re-rendering) to display the latest changes is a key feature of React. It is what allows Facebook to display new notifications and comments without reloading the page. Let’s take a closer look at what exactly render() method does. My blog also explores a number of specific use cases, like rendering when the user clicks a button. SimpleFrontEnd How method works render() You’ve probably noticed that in-class components, method returns HTML-like code to define component layout. Functional components do not have an explicit method, but functions themselves work the same. render() render() Reacting to changes is very important in React. That’s why every component has a method.  React calls method to update the component’s (and all of its children’s) layout to make sure it’s in line with the latest changes. render() render() Next, let’s talk about what gets rendered. method renders a virtual DOM, not the actual DOM that we see in the browser. Virtual DOM is another very important feature in React. It’s essentially a lightweight copy of the real DOM, so React can efficiently render and re-render it to make sure the app stays up to date. render() Once updates the virtual DOM, and React notices differences between the virtual DOM and the real DOM. The library automatically updates the HTML to reflect the latest changes. All of this happens automatically, without any input from developers. render() method runs every time there’s a change to state or props. Any side effects in the function body are going to run as well. Important: render() Conditional rendering in React React is a JavaScript library, so you can use dynamic expressions to render (or not render) elements and components. You can also embed JavaScript expressions inside the component layout via JSX. If/else statement allows you to conditionally customize the component’s layout. As you can see in this , the heading ‘Hello World’ renders because the condition is met. CodeSandbox Most components return multiple components and/or elements. React has an important rule – components must always return one element, so don’t forget to wrap multiple elements with a div or a fragment. Important: React also allows us to embed ternary operators inside JSX. So we can conditionally render components right in the layout. These are basic examples. In the real world, conditions usually come from the state, and values are likely to change in response to users’ actions.

A Quick Guide To The render() Method in React

The function — the poor man’s debugger — is every JavaScript developer’s best friend. We use it to verify that a certain piece of code was executed or to check the state of the application at a given point in time. We may also use to send warning messages or to explain what happened when things have gone wrong. Logging makes it easy to debug your app during local development. console.log console.warn console.error But what about debugging your Node.js app while it’s running in a hosted cloud environment? The logs are kept on the server, to which you may or may not have access. How do you view your logs then? Most companies use application performance monitoring tools and observability tools for better visibility into their hosted apps. For example, you might send your logs to a log aggregator like or where logs can be viewed and queried. Datadog, Sumo Logic, Papertrail In this article, we’ll look at how we can configure an app that is hosted on to send its system logs to Papertrail by using . By the end, you’ll have your app up and running — and logging — in no time. Render Render Log Streams Creating Our Node.js App and Hosting It with Render Render is a cloud hosting platform made for developers by developers. With Render, you can easily host your static sites, web services, cron jobs, and more. We’ll start with a simple and Express app for our demo. You can . To follow along on your machine, fork the repo so that you have a copy running locally. You can install the project’s dependencies by running , and you can start the app by running . Node.js find the GitHub repo here yarn install yarn start Easy enough! Now it’s time to get our app running on Render. If you don’t have a Render account yet, create one now. It’s free! Once you’re logged in, click the “New” button and then choose the “Web Service” option from the menu. This will take you to the next page where you’ll select the GitHub repo you’d like to connect. If you haven’t connected your GitHub account yet, you can do so here. And if you have connected your GitHub account but haven’t given Render access to your specific repo yet, you can click the “Configure account” button. This will take you to GitHub, where you can grant access to all your repos or just a selection of them. Back on Render, after connecting to your repo, you’ll be taken to a configuration page. Give your app a name (I chose the same name as my repo, but it can be anything), and then provide the correct build command ( , which is a shortcut for ) and start command ( ). Choose your instance type (free tier), and then click the “Create Web Service” button at the bottom of the page to complete your configuration setup. yarn yarn install yarn start With that, Render will deploy your app. You did it! You now have an app hosted on Render’s platform. Creating Our Papertrail Account Let’s now create a Papertrail account. Papertrail is a log aggregator tool that helps make log management easy. You can create an account for free — no credit card required. Once you’ve created your account, click on the “Add your first system” button to get started. This will take you to the next page which provides you with your syslog endpoint at the top of the screen. There are also instructions for running an install script, but in our case, we don’t actually need to install anything! So just copy that syslog endpoint, and we’ll paste it in just a bit. Connecting Our Render App to Papertrail We now have an app hosted on Render, and we have a Papertrail account for logging. Let’s connect the two! Back in the Render dashboard, click on your avatar in the global navigation, then choose “Account Settings” from the drop-down menu. Then in the secondary side navigation, click on the “Log Streams” tab. Once on that page, you can click the “Add Log Stream” button, which will open a modal. Paste your syslog endpoint from Papertrail into the “Log Endpoint” input field, and then click “Add Log Stream” to save your changes. You should now see your Log Stream endpoint shown in Render’s dashboard. Great! We’ve connected Render to Papertrail. What’s neat is that we’ve set up this connection for our entire Render account, so we don’t have to configure it for each individual app hosted on Render. Adding Logs to Our Render App Now that we have our logging configured, let’s take it for a test run. In our GitHub repo’s code, we have the following in our file: app.js app.get('/', (req, res) => {
    console.log('Log - home page');
    console.info('Info - home page');
    console.warn('Warn - home page');
    console.error('Error - home page');
    console.debug('Debug - home page');

    return res.sendFile('index.html', { root: 'public' });
}); When a request is made to the root URL of our app, we do a bit of logging and then send the file to the client. The user doesn’t see any of the logs since these are server-side rather than client-side logs. Instead, the logs are kept on our server, which, again, is hosted on Render. index.html To generate the logs, open your demo app in your browser. This will trigger a request for the home page. If you’re following along, your app URL will be different from mine, but . my app is hosted here Viewing Logs in Papertrail Let’s go find those logs in Papertrail. After all, they were logged to our server, but our server is hosted on Render. In your Papertrail dashboard, you should see at least two systems: one for Render itself, which was used to test the account connection, and one for your Render app (“render-log-stream-demo” in my case). Click on the system for your Render app, and you’ll see a page where all the logs are shown and tailed, with the latest logs appearing at the bottom of the screen. You can see that we have logs for many events, not just the data that we chose to log from our file. These are the syslogs, so you also get helpful log data from when Render was installing dependencies and deploying your app! app.js At the bottom of the page we can enter search terms to query our logs. We don’t have many logs here yet, but where you’re running a web service that gets millions of requests per day, these log outputs can get very large very quickly. Best Practices for Logging This leads us to some good questions: Now that we have logging set up, what exactly should we be logging? And how should we be formatting our logs so that they’re easy to query when we need to find them? What you’re logging and why you’re logging something will vary by situation. You may be adding logs after a customer issue is reported that you’re unable to reproduce locally. By adding logs to your app, you can get better visibility into what’s happening live in production. This is a reactive form of logging in which you’re adding new logs to certain files and functions after you realize you need them. As a more proactive form of logging, there may be important business transactions that you want to log all the time, such as account creation or order placement. This will give you greater peace of mind that events are being processed as expected throughout the day. It will also help you see the volume of events generated in any given interval. And, when things do go wrong, you’ll be able to pinpoint when your log output changed. How you format your logs is up to you, but you should be consistent in your log structure. In our example, we just logged text strings, but it would be even better to log our data in JSON format. With JSON, we can include key-value pairs for all of our messages. For each message, we might choose to include data for the user ID, the timestamp, the actual message text, and more. The beauty of JSON is that it makes querying your logs much easier, especially when viewing them in a log aggregator tool that contains thousands or millions of other messages. Conclusion There you have it — how to host your app on Render and configure logging with Render Log Streams and Papertrail. Both platforms only took minutes to set up, and now we can manage our logs with ease. Keep in mind that Render Log Streams let you send your logs to any of several different log aggregators, giving you lots of options. For example, Render logs can be . You just need to create a Cloud Syslog Source in your Sumo Logic account. Or, you can as well. sent to Sumo Logic send your logs to Datadog With that, it’s time for me to off. log Thanks for reading, Happy coding, and happy logging!

Logging to Papertrail with Render Log Streams

The , illustrated below, can be applied to most aspects of technology: Gartner hype cycle As new innovations enter their respective cycles, expectations are eventually realized—leading to some level of adoption. The goal for every innovation is to reach the plateau of productivity where consumers have determined that the reward of adopting the innovation far outweighs any known risks. At the same time, there is a point where the plateau of productivity begins to diminish, leading to an exodus away from that innovation. One simple example would be (or beepers), which were common before mobile phones/devices reached the plateau of productivity. pagers As technologists, we strive to deliver features, frameworks, products, or services that increase the plateau of productivity. The same holds true for the ones that we use. Recently, I felt like my current hosting platform began falling off the plateau of productivity. In fact, a made me wonder if it was time to consider other options. recent announcement Since I had a positive experience using the PaaS, I wanted to look at how easily I could convert one of my Heroku applications, adopt PostgreSQL, and migrate to Render. I’m describing that journey in this two-part series: Render Part 1: We’ll focus on migrating my backend services (Spring Boot and ClearDB MySQL). Part 2: We’ll focus on porting and migrating my frontend Angular client. Why I Chose Render If you have never heard of Render before, check out some of my previous publications: Spend Zero Time on DevOps with Render PaaS The Perfect Cloud: AWS, GCP and Azure all-in-one Purpose-Driven Microservice Design Launch Your Startup Idea in a Day How I Used Render To Scale My Microservices App With Ease What I find exciting about Render is that they continue to climb the slope of enlightenment while actively providing a solid solution for adopters recognizing the plateau of productivity. As I’ve noted in my articles, Render offers a “Zero DevOps” promise. This perfectly aligns with my needs since I don’t have the time to focus on DevOps tasks. The Heroku platform has several things that I am not too fond of: Daily restarts led to unexpected downtime for one of my services. Entry-level (all I really need) Postgres on Heroku allows for four hours of downtime per month. Pricing levels, from a consumer perspective, don’t scale well. From a pricing perspective, I am expecting to see significant cost savings after migrating all of my applications and services from Heroku to Render. What is more amazing is that I am getting better memory and CPU for that price, with linear scaling as my application footprint needs to grow. Converting a Single Service As I noted above, this is part one of a two-part series, and I’ll focus on the service tier in this article. The service I want to convert has the following attributes: Spring Boot RESTful API Service Heroku CloudAMQP (RabbitMQ) Message Broker Heroku ClearDB (MySQL) Database (single schema) Okta Integration On the Render PaaS side, the new service design will look like this: Render Web Service hosting Spring Boot RESTful API Service (via Docker) Render Private Service hosting RabbitMQ Message Broker (via Docker) Render Postgres with the ability for multiple schemas to exist Okta Integration Below is a side-by-side comparison of the two ecosystems: My high-level plan of attack for the conversion is as follows: Prepare Heroku for Conversion Before getting started, it is recommended to put all existing Heroku services into . This will prohibit any consumers from accessing the applications or services. Maintenance Mode While the source code should already be backed up and stored in a git-based repository, it is a good idea to make sure a database backup has been successfully created. Conversion of Heroku Services From a conversion perspective, I had two items to convert: the service itself and the ClearDB (MySQL) database. The conversion of my Spring Boot RESTful service did not involve much work. In fact, I was able to leverage the approach I used for a of mine. previous project For the database, I needed to convert from MySQL to PostgreSQL. My goal was to use Render’s to easily migrate Heroku Postgres to Render Postgres, but I needed to convert from MySQL to PostgreSQL first. Heroku Migrator Initially, I started down the path, which seemed to be a common approach for the database conversion. However, using my M1-chip MacBook Pro led to some unexpected issues. pgloader Instead, I opted to use to convert MySQL to PostgreSQL. For more information, please check out the “ ” section below. NMIG Highlights From the Database Conversion Create Services in Render After converting the database and the Spring Boot RESTful service running inside Docker, the next step was to create a Render Web Service for the Spring Boot RESTful API service. This was as easy as creating the service, giving it a name, and pointing to the appropriate repository for my code in GitLab. Since I also needed a RabbitMQ service, I followed to create a RabbitMQ Private Service running on Render. This included establishing a small amount of disk storage to persist messages that have not been processed. these instructions Finally, I created the necessary in the Render Dashboard for both the Spring Boot RESTful API service and the RabbitMQ message broker. environment variables Initialize and Validate the Services The next step was to start my services. Once they were running and the APIs were validated using my Postman collection, I updated my client application to point to the new Render service location. Once everything was up and running, my Render Dashboard appeared as shown below: Next Steps All that remained at this point was to delete the databases still running on Heroku and remove the migrated services from the Heroku ecosystem. When using Heroku, any time I merged code into the master branch of my service repository, the code was automatically deployed, provided I used in my source repository. GitLab CI/CD to deploy to Heroku However, there is no need to add code to the source file repository with Render. I simply needed to specify the Build & Deploy Branch in the Render Dashboard for the service: I love the Zero DevOps promise. Highlights From the Database Conversion By following the steps above, the conversion from Heroku to Render was smooth and successful. The biggest challenge for me was the conversion of data. At a high level, this mostly boiled down to a series of commands executed from the terminal of my MacBook Pro. First, I started a local Postgres instance via Docker: docker run --publish 127.0.0.1:5432:5432 --name postgres -e POSTGRES_PASSWORD=dbo -d postgres Next, I created a database called “example” using the following command (or pgAdmin): createdb example For converting my ClearDB (MYSQL) instance running on Heroku to my example Postgres database running locally, I used , which is a Node.js-based database conversion utility. NMIG After installing NMIG, I set up the config.json file with database endpoint information and credentials, and then I ran: /path/to/nmig$ npm start Next, I backed up the data to a file using the following command: pg_dump -Fc --no-acl --no-owner -h localhost -U postgres example > example.dump Rather than go through the hassle of creating a signed URL in AWS, I just used the client to import the backup into a newly created Postgres instance on Heroku. pgAdmin With the Postgres instance running and data validated, I on the Render PaaS. Then all I had to do was issue the following command: created a new Postgres database pg_restore --verbose  --no-acl --no-owner 
-d postgres://username:password@hostname.zone-postgres.render.com/example example.dump Lessons Learned Along the Way Looking back on my conversion from Heroku to Render, here are some lessons I learned along the way: I had a minor issue with the Postgres database updating the date/time value to include the DST offset. This may have been an issue with my original database design, but I wanted to pass this along. In my case, the impacted column is only used for Date values, which did not change for me. I included a database column named END in one of my tables, which caused a problem when either Postgres or Hibernate attempted to return a native query. The service saw the END column name and injected it as a SQL keyword. I simply renamed the column to fix this issue, which I should have known not to do in the first place. With Render, I needed to make the RabbitMQ service a Private Service because the Web Service option does not expose the expected port. However, with this approach, I lost the ability to access the RabbitMQ admin interface, since Private Services are not exposed externally. It looks like Render plans to address this . feature request All in all, these minor hurdles weren’t significant enough to impact my decision to migrate to Render. Conclusion The most important aspect of Gartner’s plateau of productivity is providing products, frameworks, or services that allow consumers to thrive and meet their goals. The plateau of productivity is not intended to be flashy or fashionable — in a metaphorical sense. When I shared this conclusion with Ed, a Developer Advocate at Render, his response was something I wanted to share: “Render is pretty avowedly not trying to be ‘fashionable.’ We’re trying to be unsurprising and reliable.” Ed’s response resonated deeply with me and reminded me of a time when my told me my code came across as “boring” to him. His comment turned out to be the greatest compliment I could have received. You can read more . former colleague here In any aspect of technology, the decision on which provider to select should always match your technology position. If you are unsure, the Gartner hype cycle is a great reference point, and you can get started with a subscription to their service . here I have been focused on the following mission statement, which I feel can apply to any IT professional: “Focus your time on delivering features/functionality that extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.” - J. Vester When I look at the Render PaaS ecosystem, I see a solution that adheres to my mission statement while residing within my hype cycle preference. What makes things better is that I fully expect to see a 44% savings in my personal out-of-pocket costs — even more as my services need to scale vertically. For those considering hosting solutions, I recommend adding Render to the list of providers for review and analysis. You can get started for free by following . this link The second part of this series will be exciting. I will demonstrate how to navigate away from paying for my static client written in Angular and take advantage of Render’s free Static Sites service using either Vue or Svelte. Which framework will I choose … and why? Have a really great day!

Time For Me To Fly… To Render

আমার জন্য সময় উড়তে ... রেন্ডার

Zeit für mich zu fliegen ... zu rendern

Hora de volar… de renderizar

Il est temps pour moi de voler… de rendre

टाइम फॉर मी टू फ्लाई... रेंडर करने के लिए

私が飛ぶ時間…レンダリングする時間

날아갈 시간… 렌더링

Hora de eu voar… de renderizar

Benim İçin Uçma Zamanı... Render Yapma Zamanı

是时候让我飞了……渲染

Render is a one-stop shop for web application infrastructure, simplifying the hosting of static content, databases, microservices, and more. Whether you’re maintaining a monolith application or have adopted a microservice pattern — and you’re not yet ready to create an entire SRE team — Render is a good choice for your infrastructure and hosting needs. In this article, we’ll focus on debugging in Render. We’ll build a simple Node.js microservice with a PostgreSQL database. We’ll deploy these two components with Render and then demonstrate two different ways to debug our service and database. We’ll use Log Streams for accessing syslogs and Datadog for observability metrics and alerts. Are you ready? Let’s dive in. Hosting a Node.js App with Render The intent of this article is to do a deep dive on building a Node.js microservice application. However, if you have some experience with Node.js, TypeScript, Express, and PostgreSQL, you’ll likely find additional value in the code presented here. no t Our mini-demo application is a user management API with several typical endpoints for retrieving, creating, updating, or deleting users. Behind the scenes, the service performs query operations on the PostgreSQL database. You can find the complete application code . here Set up a Datadog account Before we can set up our PostgreSQL instance, we’ll need to get our hands on a Datadog API key. You can sign up for a free trial account and then follow to obtain an API key. We’ll discuss Datadog in more detail soon. these instructions Deploy a PostgreSQL instance We’ll start with the PostgreSQL instance since we’ll need database credentials before we can use our Users service. To create an instance for your project, log in to and click the button in the top right corner. Then, click on to start the process. This drops you into a form to configure your database: Render New + PostgreSQL Specify a name for your instance, along with a database name and user name for access. For the “Datadog API Key” field, it’s important to because it’s difficult to add it after the database has been created. Paste in the API key that you generated from the previous step. add this now Click and wait for the initialization to complete. Render will display the credentials for your new database. You’ll need those later when setting up your Users’ service. Create Database Initialize database schema Note also that we’ll need to initialize the schema in this new database, creating a user table with proper columns. We’ll do this via the package. The instructions for initializing the database are in the code repository’s file. However, we’ll bundle this step into our application’s startup command on Render. node-pg-migrate README Deploy Users microservice Deploying a microservice with Render is straightforward, especially if you host your code in or . After you connect your code hosting account to Render, return to your Render dashboard. Click on the button and select . Select the code repository with your microservice. GitLab GitHub New + Web Service Each input field is well-documented on this page. For our example Node.js service, we want to ensure the following: The “Environment” should be set to . Node The “Build Command” should be so that all the dependencies are installed and the final system is built. yarn install && yarn build The “Start Command” (not shown) for this particular product will run our database migration and start up our application. It should be: yarn migrate up --no-reject-unauthorized && yarn start:prod In addition, the “Advanced” menu contains additional fields that we’ll need to fill in for this project. We need to set five environment variables for database connectivity: DB_HOST DB_NAME DB_USER DB_PASSWORD — This is the database connection string used by . Its value is , with the actual values for these placeholders filled in. For example: DATABASE_URL node-pg-migrate postgres://DB_USER:DB_PASSWORD@DB_HOST:5432/DB_NAME postgres://john:Ue473C@dpg-1g50-a.oregon-postgres.render.com:5432/mydb These credentials should come from the PostgreSQL instance you created in the previous step. Lastly, make sure to set the “Health Check Path” to to facilitate zero-downtime deploys and health monitoring within Render. /health Click . Render will work its magic and deploy this service from your repository! Create Web Service Debugging with Datadog Datadog is a cloud-based SaaS that provides extensive log aggregation and searching tools as well as monitoring and alerting capabilities. Whether you have a single service or ten thousand, Datadog is a useful tool for gaining a deeper understanding of how your resources are running. We’ve already connected our PostgreSQL instance to Datadog by including the Datadog API key during its creation. This provides monitoring capabilities for many different metrics on this database instance. The full list of supported metrics for PostgreSQL is available . Let’s look at how to use these metrics for monitoring and alerting. here Exploring metrics Log into your Datadog account and navigate to the page. Metrics The top line of the shows the toolbar with various dropdown and input boxes for filtering what metrics are displayed in the graph. The default metric, is shown. If your database was configured correctly with the API key, then you should see a line graph displaying the percentage of time the CPU spent running user space processes. Metrics Explorer metric query system.cpu.user When you click on the “from” dropdown menu, you’ll see two potential sources for your database’s metrics: Metrics can be shown based on a specific database within a host, or across the entire host. For our example, there is only one database instance running on the host. Therefore, with this particular metric, there’s no difference between the database-specific and the host-specific metric. If you want to investigate a different metric, select the first input box and enter . The auto-complete will show different memory-related metrics: system.mem If you select , you’ll start to see the database host’s memory that is in use. Notice that the dialog provides a description of the selected metric. system.mem.used The PostgreSQL-specific metrics that are available in Datadog are also interesting. For example, we can monitor the number of active connections to the database at any time. In this query, the “from” field uses the single-database instance, and Datadog sums the data based on the property on the metric. database-id Monitoring is a useful debugging tool. If you’re experiencing slow database response with your application, you can view the current metrics in Datadog. By correlating PostgreSQL metrics like query times or connection counts with application response times, you might surface a poorly written query associated with a specific endpoint or specific code that is improperly cleaning up database connections. Access to these metrics may provide the key to solving an issue. Of course, resolving an issue usually depends on your awareness that the issue is occurring. Fortunately, Datadog provides significant resources for upon an occurrence of poor performance currently happening with your systems. You can configure these alerts to monitor the metrics that you choose, pushing notifications to various places. alerting Let’s talk about Alerts as a tool for debugging web applications. Alerts in Datadog Select from the Datadog navigation bar, and then select and choose the monitor type. Monitors New Monitor Metric We’ll create a monitor to alert us when the number of active database connections exceeds a threshold. Select and then define the metric query just as you would on the metrics page. We want to use the metric from our single database instance. Lastly, we select the threshold. If the “minimum number of connections” is above a threshold, this indicates that there are currently too many connections on this database instance. That’s when we should be alerted. Threshold Alert postgres.connections min by Next, define the threshold values that trigger an alert: This is a contrived example, but it means that Datadog will trigger a if it detects 12 connections to the database over the past five minutes. Meanwhile, we’ll receive a full on 20 connections to the database over the past five minutes. warning alert Finally, we set up the notifications to occur when an alert is triggered. For example, Datadog can send notifications to Jira, Slack, or a custom webhook endpoint. Setting up notifications is beyond the scope of this article, but the Datadog is clear. documentation for notifications Alerts are important for debugging a web application, as they raise awareness that a problem is happening, pointing you to the relevant metrics describing the current state of the system. The metrics we’ve looked at so far are mostly of the “outside the system looking in” variety. Next, let’s look at how to use logs to understand what is happening of the system itself. inside Debugging with Log Streams In Node.js development, using is a common debugging technique. Seeing log output is easy when you’ve deployed your Node.js application to your local machine, but it’s challenging if you’ve deployed it to the cloud. This is where help. console.log Log Streams Render Log Streams enable the exporting of syslogs from your deployed services to an external log aggregator. Datadog is one example, but Render supports others too, including and . Papertrail LogTail Set up syslog export To set up syslog export, log into your Render account and go to your page. Click on Log Streams. Add the endpoint for your log aggregator, along with an API token (if any). For our example, we’ll send our syslogs to Datadog. Account Settings In Datadog, navigate to the tab. Logs This brings you to the dashboard where you can see a live tail of all the logs being ingested by your Datadog account. This includes logs emitted by our database instance, our Node.js microservice, and the Render build process for our microservice. Log Search To narrow down the logs, we can add the hostname to the query search bar. The result will show only those logs coming from our Users microservice instance (both the application logs and the Render build logs). Logs emitted from the application via or a logger such as Pino will show up here, aiding in the debugging effort. You can trace entire requests through your systems by following them through your various services logs. As data flows through your system from your API endpoints to the service layer and then to the database layer, you can use logs to track down the root cause of issues. console.log Leveraging logs for debugging How might you use logs from your Node.js application to help you with debugging? Here are a few helpful suggestions: Using is good practice because it ensures graceful handling when an error is thrown. In the block, you can do more than just handle the exception; emit a log message with helpful contextual information. Then, query for these kinds of messages in your log management system to track down the root cause. Emit a log when catching an exception. try-catch catch When using , you’re not limited to just using . You can also use functions like , , and . Doing so will help you differentiate the severity of what you’re logging, making it easier to query or filter for specific issues. Use other severities besides log . console console.log console.info console.debug console.error Most log management systems have an alerting mechanism, allowing you to set certain conditions on incoming logs which would result in triggering a notification. For example, if your Node.js application logs every HTTP response code (such as , , and ), then you can set up an alert to notify you when a certain response code is seen too frequently. You could set up an alert to tell you when a or a code has been seen more than five times in ten minutes, indicating a possible issue that needs to be dealt with immediately. Set up alerts on certain log conditions. 200 401 500 500 401 Conclusion In our mini-project, we built a small microservice application using a simple Node.js backend service and a PostgreSQL database. We deployed both pieces to Render so that we could explore system debugging through Render. We looked at two different ways of debugging: Sending observability metrics to Datadog, working in conjunction with alerts and notifications. Using Log Streams to export syslogs from your different application components, which we also viewed in Datadog. When issues with your microservice application arise, your team needs to respond quickly to reduce or prevent downtime. Effective debugging techniques coupled with alerts and notifications can equip you for fast response. If you’re deploying your application to Render, then you have quick and simple facilities — a Datadog integration and Log Streams — to provide real-time debugging insights and alerts. Also published . here

Debugging with Render: Two Effective Methods

As a software lead and feature developer, I witnessed a team learn an important lesson about resource scaling and the cloud. Spoiler alert: The lesson was that if you’re not careful, scaling can get expensive! The team felt they had no choice but to keep increasing the number of instances for a given service that was under heavy load. When they finished scaling up, the number of instances was several times larger than the number of instances that were configured by default. What they didn’t realize at the time was that—despite the load returning back to a normal state—their extra instances remained in place. Everyone seemed to be okay with this “scale up as much as needed” approach … until they received their next invoice from the cloud provider. This situation got me thinking about a platform I’ve been adopting more and more for some of my projects. It made me wonder just how easy it could be to implement scaling in cloud-based applications and services with Render. Another spoiler alert: It’s easy. Render, The Concept of Cloud-based Scaling Consumers of your application or service have one common expectation: All of their requests should be handled in a reasonable amount of time. At the same time, solution owners have expectations, which include: Ensuring that customer expectations are met Keeping costs within a planned budget Minimizing downtime and outages—especially those related to performance All of these expectations are easy to meet when the level of demand is less than the max capacity of the technology used to handle each request. When demand begins to exceed those levels, that’s when things get interesting. The challenge is finding that sweet spot that meets expectations and keeps costs reasonable. That’s where the concept of cloud-based scaling comes into play. With cloud-based scaling, the focus is on scaling up the number of service instances to meet the current demand but scaling back down when the demand subsides. A Trio of Scenarios There are three use cases for auto-scaling that we will talk about: Manual scaling Auto-scaling up Auto-scaling down Let’s explore each use case with a scenario example. Manual scaling The manual scaling concept is for teams with a strong understanding of the demand for their applications or services. ** **As an example, consider an income-tax-related service that answers customers’ questions as they populate their tax returns. The team supporting this service may have decades of information regarding usage patterns, allowing them to determine how many service instances are required throughout the entire year. ** **With this information in hand, the manual scaling approach will allow consumers to be satisfied because the team always knows how many instances ought to be available. Solution owners are pleased because their monthly spend is completely on budget. Of course, this information does not consider major changes to the expected usage patterns. For example, maybe a press release on the service comes out, suddenly impacting demand positively or negatively. Auto-scaling up The auto-scaling up approach puts the number of instances into the hands of pre-defined thresholds created by the service owner but enforced by the cloud provider. As those thresholds are exceeded, the number of instances will grow until demand falls to an expected level. Most providers allow users to set a maximum number of instances to cap the number of instances which can ultimately be spawned. While there is some uncertainty regarding the impact on the monthly budget, solution owners might use the rationale that increased demand for their service is often related to new or upgraded subscriptions, which result in additional income. This is where the concept of “you have to spend money to make money” comes into play. When implementing auto-scaling up policies, I always recommend doing the same for auto-scaling down, too. Auto-scaling down The auto-scaling down approach is similar to auto-scaling up, except the number of services decreases to coincide with a reduction in demand. While the auto-scaling up functionality is very quick to introduce new instances, auto-scaling down is often delayed to avoid scaling down too soon. Thinking back to the team mentioned in my introduction, had they employed auto-scaling down for the service I mentioned, they would not have encountered the sticker shock of leaving all of those instances running well after the peak demand had subsided. Cloud providers that offer auto-scaling are now getting into the practice of combining auto-scaling up with auto-scaling down since this is the more common implementation of this functionality. Scaling with Render I have written about the Render platform several times this year. Here are links to some of my other publications on the subject:** ** Using Render and Go for the First Time Under the Hood: Render Unified Cloud Purpose-Driven Microservice Design Launch Your Startup Idea in a Day I’ve learned that they take their Zero DevOps promise very seriously. As one might expect, scaling with Render is easy and driven by a simple user interface. With a service running at the Starter plan (or above), the ability to manually scale the number of instances is as simple as sliding to the required level in the Scaling menu of the Render Dashboard: If you’re interested in using auto-scaling with Render, simply enable Autoscaling, then: Select the number of instances Enable and set a target CPU utilization Enable and set a target memory utilization Keep in mind: It is possible to limit auto-scaling to depend on only CPU memory utilization (instead of both). or After implementing auto-scaling, the Render Dashboard communicates as changes are made to the number of instances running: Additionally, metrics are provided to justify the auto-scaling implementation: From a billing perspective, changes to the cost structure are based on the amount of time the new instances are in place in a given month. This means if you double your number of instances for seven hours on a single day of the billing cycle, the cost for that billing cycle will not double; instead, it will only double for those seven hours where the number of instances doubled. Other Available Integrations Services deployed with Render can also integrate with the following solutions: – provides Postgres metrics and log streams into the Datadog observatory platform. Datadog – provides application performance monitoring (APM) for Ruby, PHP, Python, Node.js, and Elixir-based services. Scout APM These integrations provide insights, which can be helpful to larger, enterprise-scale applications and solutions running on the Render platform. Conclusion Technologists who have worked for less than 13 years have been fortunate not to have to worry about the side effects of a global recession. Present-day economists suggest that the next recession will begin soon, and some economic indicators already justify such claims. This means that corporations are likely to be more conservative with their spending to preserve their bottom line. . One area of scrutiny for corporations is cloud spending I still believe that cloud-based products and services can strongly outweigh the costs to support and maintain similar configurations within a dedicated datacenter. That said, there are certain aspects that can significantly impact the periodic costs related to cloud-based technology: Having a good understanding of each incurred cost Knowing how and when to scale applications and services to meet demand For those using cloud services from Amazon, Google, or Microsoft, firms like offer services to help you with these concerns. CleanSlate Technology Group Since 2021, I have been trying to live by the following mission statement, which I feel can apply to any technology professional: “Focus your time on delivering features/functionality that extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.” - J. Vester In the time I have been utilizing Render for my own applications and services, I have been able to focus on delivering features strongly because of its Zero DevOps model. For those looking to simplify their cloud architecture, Render provides mission-critical scalability without becoming an expert in the technologies adopted by their competitors. Have a really great day!

How I Used Render to Scale My Microservices App With Ease

When your app is experiencing high traffic or utilization, you need to scale your service to handle that load. Scaling can be done either vertically or horizontally — or both! For example, you might add more CPU or RAM to your server. For example, you might deploy three copies of your server instead of one and then place them all behind a load balancer that handles routing the traffic to each of them. Both types of scaling can be done manually or automatically (autoscaling). Vertical scaling means making a single resource bigger or more powerful. Horizontal scaling means creating multiple instances of the same service. Often, companies don’t host their apps on-premise on their own servers, opting instead to host them in the cloud. is a unified, full-stack development platform that makes it easy to host your apps, whether they be static sites, web services, or cron jobs. And, scaling with Render is a breeze. In this article, we’ll explore three ways to scale your apps with Render. Render Option #1: Using the Render Dashboard The first option is to scale your service using the Render Dashboard. Once you’ve created a web service, you can navigate to the Scaling tab to configure your scaling settings. When autoscaling is off, you can manually scale your app up or down in the UI by specifying the number of instances. For example, you may typically only need one instance of your service, but this week you anticipate a spike in traffic due to an upcoming event. You might choose to scale your service up to three instances to handle that increased load. When the event is over, you can scale your service back down to one instance. Manual scaling works well if you can anticipate the upcoming changes in load, but you may not always be right about how many instances you need. Guessing too high or too low may leave your service underutilized or overutilized, neither of which is ideal. Autoscaling takes the guesswork out by automatically scaling within a range of minimum and maximum instances based on CPU and/or memory utilization. In the Render Dashboard, you can enable autoscaling using the toggle switch. You can then set your minimum and a maximum number of instances along with your targets for CPU and/or memory utilization. Then, based on those targets, your app will automatically scale up or down as needed. How nice! Option #2: Using the Render API The second option for scaling your service is to use the Render API. Once you’ve generated an API token in your Account Settings, you can begin using the Render API to make requests. One allows you to scale your service to a specified number of instances. All you need to do is make a POST request to the endpoint, providing your API token and the and parameters like so: API endpoint serviceID numInstances curl --request POST \
  --url https://api.render.com/v1/services/{serviceId}/scale \
  --header 'accept: application/json' \
  --header 'authorization: Bearer {API_Token}' \
  --header 'content-type: application/json' \
  --data '{"numInstances":2}' Making the API request manually is obviously a manual scaling process, but APIs are meant to be used programmatically. If you have some additional monitoring or alerting set up, you could programmatically call this API endpoint to scale your app up or down as needed, all without any human intervention. However, this might be overkill, as Render already has monitoring and autoscaling infrastructure in place to do this for you. Option #3: Using a Blueprint Specification The third option we’ll consider is using a to scale your service. Blueprint specs are Infrastructure as Code (IaC) written using YAML files that contain key-value pairs for configuration. The main benefit of IaC is that it allows you to create and manage services through code rather than through a dashboard. This way, you can keep your configuration under source control, standardize your setup, and deploy new infrastructure changes with ease. Blueprint specification Render’s Blueprint specs provide two options for scaling your app. If you don’t want to use autoscaling, you can specify a key and a number for the value like this: numInstances numInstances: 3 If you do want to take advantage of autoscaling in your service, you can configure the property like this: scaling scaling:
  minInstances: 1
  maxInstances: 3
  targetMemoryPercent: 60
  targetCPUPercent: 60 These are the same options that you see in the Render Dashboard, but now rather than manually setting them in the UI, you’re writing your infrastructure as code. Neat! Conclusion Scaling your app with Render is easy. Whether you prefer to scale your app in the Render Dashboard, via the API, or through a Blueprint spec, Render has you covered. Thanks for reading, and happy coding!

Three Ways to Scale Your Apps with Render

Making My IoT Security Camera System on Render

Code reviews are essential before merging a pull request. It’s a common practice to have another engineer look through the code changes, and it’s even better if you have a continuous integration (CI) pipeline configured that runs linters and unit tests to catch issues automatically. For UI changes, it’s also a great idea to visually inspect the changes in the app. Doing so may require the reviewer to check out the branch and run the app on their machine. Depending on the complexity of your app’s architecture, running the app locally may be trivial to do with a single command, or it may require several steps and a fair amount of time. Pull request review apps help facilitate this process by deploying a version of the app with the pull request’s changes applied in a preview environment. Now the reviewer doesn’t need to pull down the code themselves! Students of know that if you want to increase the desired behavior, you need to make the desired behavior easy. PR review apps do just that! By making it simple to visually review changes, PR review apps make it more likely that code reviewers will do so. choice architecture and nudge theory In this article, we’ll look at how to configure PR review apps using , a platform as a service (PaaS) solution that allows you to build and run your apps in the cloud. Render Demo Overview Let’s use a React app for our demo. This app is a dungeon crawler game in which our hero, the blue square, explores a dungeon and fights enemies until he finds and defeats the dungeon boss. This app consists of frontend code only, so it’s perfect to be hosted as a static site. You can or . view the code on GitHub play the game here Now imagine that you want to make changes to our app. We will create a new branch, make our changes locally, push up that branch, and then create a pull request to merge it into the master branch. If a reviewer wants to visually inspect our changes, they can pull down the branch and run the app locally on their machine by simply installing the dependencies with and starting the app with . npm install npm start To help make the visual review even easier, let’s configure our repo to create a review app each time a new pull request is submitted. Getting Started with Render We’ll first want to create a new account with Render. I used my email to create an account and then later connected my GitHub account, but you can also authenticate with GitHub directly if you prefer. Once you have an account created, you can choose to create a new static site: Choosing this option will prompt us to enter the URL for the existing GitHub repository we wish to connect to: We can then provide a few details about the project, specifying the name (“Dungeon Crawler”), the main branch ( ), the build command ( ), and the output directory ( ). Then, we’ll click “Create Static Site” at the bottom of the form. master npm run build build With that said, Render will build and deploy our app for the first time. It’s as simple as that! Our dungeon crawler app is now publicly available . here Configuring a PR Review App with Render Now that we have our repos connected and our app deployed with Render, let’s (or “Pull Request Previews”, as Render calls them). To do so, we can click on the “PRs” tab and then the “Enable Pull Request Previews” button. set up the PR review apps This should be all you need to enable PR review apps for your repo. However, if you run into issues authenticating with GitHub, you can follow for help. In my case, I needed to double-check that I gave Render permission to interact with my dungeon crawler repo and then I was good to go. Render’s troubleshooting guide Now, let’s make a new pull request to see this review app in action! We’ll make a new branch, make a small change to the app’s header, commit and push the changes, and then make a new pull request to merge our changes into the master branch. Once we’ve created a new pull request, Render will post a comment on the PR that they are creating a new review app for us. Once the review app has finished deploying, Render will post a second comment notifying us that the review app is ready to be viewed. We can click on the link for our PR review app, and voila — the changes are there! Note the URL for the review app in the address bar: . https://dungeon-crawler-pr-4.onrender.com Our header text is now in all caps with some extra letter spacing applied. The review app made it extra simple for us or any other reviewer to quickly verify that the change does, in fact, show up nicely. Once we approve and merge the pull request, the PR review app gets destroyed, as it’s no longer needed. After that, Render will see the new commit merged into the master branch and deploy the latest version of our app to the main URL: . https://dungeon-crawler.onrender.com Please note that these PR review apps are great for static sites and for viewing the changes made to a single resource. If you have a more complex app that requires a full-blown test environment complete with a backend server, database, or other resources, you should take a look at Render’s , which can handle a more complex setup. preview environments Conclusion Within minutes we were able to deploy our app with Render and configure our repo to create review apps for every pull request. Not only was this process easy for us to set up, but it also made code reviews moving forward even easier for every developer working on the repo. Our PR review apps make it simple to visually review changes by eliminating the friction of having to run the app locally. With a setup like this, we are subtly nudging code reviewers to be more thorough. Also published . here

RENDER

render.credit

-- employees

Since n.d.

COMPANY RANKING

RENDER

EVERGREEN INDEX #1847

Representing this company? Click here to claim and customize this page!

Render WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

RENDER

render.credit

-- employees

Since n.d.

COMPANY RANKING

RENDER

EVERGREEN INDEX #1847

RELATED COMPANIESRANK

STORIES ABOUT RENDER

Representing this company? Click here to claim and customize this page!

Render WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!