Skip to main content

Error Boundaries

Option 1: Using react-error-boundary

React-error-boundary - is a lightweight package ready to use for this scenario with TS support built-in. This approach also lets you avoid class components that are not that popular anymore.

Option 2: Writing your custom error boundary component

If you don't want to add a new npm package for this, you can also write your own ErrorBoundary component.

import React, { Component, ErrorInfo, ReactNode } from "react";

interface Props {
children?: ReactNode;

interface State {
hasError: boolean;

class ErrorBoundary extends Component<Props, State> {
public state: State = {
hasError: false

public static getDerivedStateFromError(_: Error): State {
// Update state so the next render will show the fallback UI.
return { hasError: true };

public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error("Uncaught error:", error, errorInfo);

public render() {
if (this.state.hasError) {
return <h1>Sorry.. there was an error</h1>;

return this.props.children;

export default ErrorBoundary;

Something to add? File an issue.