A JavaScript Promise is an object representing the eventual completion or failure of an asynchronous operation. It has three states: pending (initial state), fulfilled (operation succeeded), and rejected (operation failed). The promise's result is undefined while pending, and becomes either the resolved value or the error once settled. Learn more.
What causes an unhandled promise rejection in JavaScript?
An unhandled promise rejection occurs when a promise is rejected due to a runtime error, network failure, or other issue, and no error handler is attached to manage the rejection. This can lead to errors bubbling up to the application root and potentially stopping the entire application. Source.
Why is it important to handle promise rejections?
Handling promise rejections is crucial because unhandled rejections can cause runtime errors and may crash your entire application, both in frontend JavaScript and backend Node.js environments. Source.
How can you handle unhandled promise rejections in JavaScript?
You can handle unhandled promise rejections using the .catch() method or by wrapping your asynchronous code in try/catch blocks. This ensures that errors are managed and do not crash your application. Example: promise.catch(err => console.log(err)); or try { await promise; } catch (err) { console.log(err); }. Source.
What is the impact of unhandled promise rejections on your application?
Unhandled promise rejections can bubble up to the root of your application and may cause the entire application to stop running. This is especially dangerous in production environments, as it can affect both frontend and backend systems. Source.
Hygraph Product Features & Capabilities
What are the key features of Hygraph?
Hygraph offers a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. It supports integrations with platforms like Netlify, Vercel, Shopify, BigCommerce, AWS S3, Cloudinary, and more. Hygraph also provides enterprise-grade security, compliance certifications, and robust API access. Learn more.
Does Hygraph provide an API for content management?
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. You can learn more at the Hygraph API Reference.
What integrations does Hygraph support?
Hygraph supports integrations with hosting and deployment platforms (Netlify, Vercel), eCommerce solutions (Shopify, BigCommerce, commercetools), localization tools (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization and AB testing (Ninetailed), AI (AltText.ai), and more. See full list.
How does Hygraph ensure security and compliance?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers features like SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. Learn more.
What technical documentation is available for Hygraph?
Hygraph provides comprehensive technical documentation covering setup, API usage, integrations, and deployment. Access the documentation at Hygraph Documentation.
Pricing & Plans
What is Hygraph's pricing model?
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For details, visit the pricing page.
Use Cases & Customer Success
Who can benefit from using Hygraph?
Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. It serves modern software companies, enterprises seeking to modernize, and brands aiming to scale across geographies or re-platform from traditional solutions. See case studies.
What industries are represented in Hygraph's customer case studies?
Hygraph's case studies span industries such as food and beverage (Dr. Oetker), consumer electronics (Samsung), automotive (AutoWeb), healthcare (Vision Healthcare), travel and hospitality (HolidayCheck), media and publishing, eCommerce, SaaS (Bellhop), marketplace, education technology, and wellness and fitness. Explore case studies.
Can you share specific customer success stories using Hygraph?
Yes. Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. See more success stories.
How long does it take to implement Hygraph and how easy is it to start?
Hygraph is designed for quick and easy implementation. For example, Top Villas launched a new project in just 2 months from initial contact. Users can get started by signing up for a free account and accessing documentation and onboarding guides. Learn more.
What feedback have customers given about Hygraph's ease of use?
Customers praise Hygraph for its intuitive and logical interface, noting that it is 'super easy to set up and use' and accessible for both technical and non-technical users. Source.
Pain Points & Solutions
What problems does Hygraph solve?
Hygraph addresses operational pains (reliance on developers for content updates, outdated tech stacks, conflicting global team needs, clunky content creation), financial pains (high operational costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache issues, OpenID integration challenges). Learn more.
How does Hygraph solve these pain points?
Hygraph provides an intuitive interface for non-technical users, modernizes legacy systems with GraphQL-native architecture, ensures consistent branding via content federation, streamlines workflows to reduce costs, and offers tools for query management and schema evolution. It also resolves cache and OpenID integration issues, supporting scalability and operational efficiency. Source.
What KPIs and metrics are associated with the pain points Hygraph solves?
Key metrics include time saved on content updates, system uptime, consistency across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, scalability metrics, and performance during peak usage. See more on CMS KPIs.
Support & Implementation
What support and training does Hygraph offer?
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, webinars, and a community Slack channel. Contact support.
How does Hygraph handle maintenance, upgrades, and troubleshooting?
Hygraph offers 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers receive dedicated onboarding and expert guidance, while all users can access documentation and the community Slack channel for additional help. Learn more.
Company & Vision
What is Hygraph's vision and mission?
Hygraph's vision is to unify data and enable content federation, empowering businesses to create impactful digital experiences. Its mission is to remove traditional content management pain points through a GraphQL-native architecture, helping organizations modernize their tech stacks and deliver exceptional digital experiences at scale. Learn more.
Blog & Resources
Where can I find the Hygraph blog and what content does it offer?
The Hygraph Blog provides developer tutorials, product updates, essential guides to content modeling, and industry news. Visit the Hygraph Blog for the latest updates.
Who authored the blog post on unhandled promise rejections?
The blog post "How to handle an Unhandled Promise Rejection in JavaScript" was originally written by Joel Olawanle and last updated by Aagam Vadecha on August 20, 2024. Source.
How to handle an Unhandled Promise Rejection in JavaScript
The states of JavaScript promises can be pending, fulfilled, or rejected. Let's take a look at what you should do when there is an "unhandled promise rejection".
Last updated by Aagam
on Aug 20, 2024
Originally written by Joel
The states of JavaScript promises can be pending, fulfilled, or rejected. Let's look at what you should do when there is an "unhandled promise rejection".
A Promise is a special JavaScript object representing an asynchronous operation's eventual fulfillment or failure. It is similar to making a promise in real life, where you promise to do something in the future. A promise always has two outcomes: you either do it by keeping your Promise or you do not.
JavaScript promises are complex but straightforward to grasp. A promise object has two properties: state and result. The state can be pending, fulfilled, or rejected; the result can be undefined or the value of the fulfilled or rejected state.
Pending: This is the initial state of the promise when it is being processed. This is the initial state before the promise succeeds or fails and has a result of undefined.
Fulfilled: This is the completed and successful state of a promise. It returns the resolve value as a result.
Rejected: Like the resolved or fulfilled states, the rejected state indicates a failed promise. If a promise ends up in the rejected state, the error value is returned as a result.
In clear terms, the promise state is initially pending with a result of undefined; when the Promise's condition is true, the state is fulfilled and has a result with the value of resolve(value); otherwise, when the condition fails, it has an error value of reject (error).
For example, the code block below is a Promise that checks a condition. If the condition is true it resolves otherwise, it rejects.
const myPromise =newPromise((resolve, reject)=>{
let cms ="Hygraph";
if(cms ==="Hygraph"){
resolve("Success: The promise has successfully resolved!");
}else{
reject("Failure: The promise has failed!");
}
});
Editor's Note
A promise that is either resolved or rejected is called settled.
The getUsersPromise function returns a promise that simulates fetching user data. The promise uses setTimeout to delay the resolution by 1 second. When resolved, it returns the DUMMY_USERS_DATA array. There is also a commented-out section that, if uncommented, would simulate an error by rejecting the promise with the message "something went wrong..." after 1 second.
We can simply use a .then() handler method to consume a promise.
functiongetUserList(){
returngetUsersPromise().then((data)=> data);
}
We can also use async await syntax as well to consume a promise.
Many things can get a promise rejected, such as some run time error or a network failure.
When an error arises within a promise, it gets rejected and calls the reject() function. Unhandled promise rejections imply that when a promise is rejected, it is not handled. In other words, it is unhandled because nothing deals with the rejection.
For example:
functiongetUsersPromise(){
constDUMMY_USERS_DATA=[{id:1,name:"John Doe"}];
returnnewPromise((resolve, reject)=>{
// Fake Error
setTimeout(()=>{
reject("something went wrong...");
},1000);
});
}
asyncfunctiongetUserList(){
returnawaitgetUsersPromise();
}
// OR
// function getUserList() {
// return getUsersPromise().then((data) => data);
// }
getUserList();
Above is a promise that fails, for simplicity, we have faked and called the reject() function after a delay of 1s. Okay but, what is the big deal about rejected promises and what exactly is an unhandled promise rejection?
The promise getUsersPromise in the above code is called by the getUserList function, the main issue here is that if the promise rejects which it will, no code is handling the promise rejection in the getUserList function. This would generate an “Unhandled Promise Rejection” error. This error can bubble up to your application root and can even stop your entire application.
Also, this is not just applicable to frontend Javascript code, but also to backend Node.js-based codebases.
For example, check this demo video:
In this demo, we have two different routes in a Node.js-based Express application.
GET /hello
GET /user
If you notice we hit the /hello endpoint that says Hello World. Once we hit the /user with an unhandled promise, our entire backed app crashes! Our rejected promise had nothing to do with the /hello endpoint, but it still went down as the app itself crashed. This can be really dangerous in production.
To handle promise rejections specifically, we can use the .catch() handler method. A more popular option is to wrap the promise call in a try-catch block.
// Using .catch() handler
functiongetUserList(){
returngetUsersPromise()
.then((data)=> data)
.catch((err)=>console.error(err));
}
// Using a try-catch wrapper
asyncfunctiongetUserList(){
try{
returnawaitgetUsersPromise();
}catch(err){
console.error(err);
}
}
That’s as simple as it could be.
Let us also explore an example using the Fetch API. The Fetch API is a built-in JavaScript method for retrieving resources and interacting with your backend server or an API endpoint. It returns a promise, meaning you can use the .then() and .catch() handler methods.
Let’s retrieve data by sending a GraphQL request with Fetch API to the Cocktails Hygraph content repository which holds some cocktails and some information about each cocktail:
In the above example, rejection is not handled. In a Fetch API request, the Promise can be rejected due to network issues, permission issues, and other run time reasons. We can attach a catch handler to it to catch any unforeseen issues, as shown below:
In this article, you have learned what are promises, how to use them. We also saw what exactly is an unhandled promise rejection and how dangerous it can be. Finally, we went through how to handle promises the correct way and saw examples around it.
Feel free to customize and handle rejections of promises however you'd like, but always make sure to handle rejections of promises when working with promises since your web application may run into run-time errors.
Blog Authors
Aagam Vadecha
Joel Olawanle
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.