How to use try/catch in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using try/catch is a common task when building modern javascript applications, especially when you need code that is easy to read and safe to reuse. As the creator of CoreUI and a developer with over 25 years of experience, I usually prefer the simplest built-in approach that stays explicit in real production code. Use try/catch to wrap code that might throw an error so you can handle failures gracefully without crashing your application. This keeps the solution approachable while still being reliable enough for components, utilities, and data transformation logic. Below I will show the core snippet first, explain why it works, and point out the most important implementation detail to keep in mind.
Use try/catch to wrap code that might throw an error so you can handle failures gracefully without crashing your application.
const parseJSON = (jsonString) => {
try {
const data = JSON.parse(jsonString)
return data
} catch (error) {
console.error('Invalid JSON:', error.message)
return null
}
}
console.log(parseJSON('{"name":"CoreUI"}'))
console.log(parseJSON('not valid json'))
The try block runs the code that might fail. If JSON.parse() receives malformed input, it throws a SyntaxError. Instead of crashing, execution jumps straight to the catch block where you can log the problem, return a fallback value, or take any other recovery action.
Why this works
JavaScript executes the try block line by line. The moment any statement throws, the engine skips the remaining lines and transfers control to catch, passing the thrown value as the error parameter. If nothing throws, the catch block is skipped entirely. This gives you a clean separation between the happy path and error handling.
Common pitfall
Avoid wrapping large blocks of unrelated code in a single try/catch. When the catch block fires, you will not know which line caused the error. Keep the try block focused on the specific operation that can fail so your error handling stays precise and easy to debug.
Best Practice Note
This is the same kind of practical, low-complexity approach we prefer in CoreUI components to keep code predictable and easy to maintain.
Related answers
If you are working on similar problems, these guides are good follow-ups:
