javascript 42 lines · 8 steps

How a Next.js error boundary recovers

A Next.js error.js boundary logs the failure, tailors its message, and offers a retry that re-renders the segment.

Explained by highlit
Next.js Intermediate error-boundary error-handling observability react-hooks app-router
1'use client';
2 
3import { useEffect } from 'react';
4import * as Sentry from '@sentry/nextjs';
5 
6export default function Error({ error, reset }) {
7 useEffect(() => {
8 Sentry.captureException(error);
9 }, [error]);
10 
11 const isTimeout = error?.message?.includes('timeout');
12 
13 return (
14 <div className="rounded-lg border border-red-200 bg-red-50 p-6">
15 <h2 className="text-lg font-semibold text-red-800">
16 {isTimeout ? 'This is taking longer than usual' : 'Something went wrong'}
17 </h2>
18 <p className="mt-1 text-sm text-red-600">
19 We couldn&apos;t load your dashboard data.
20 {error?.digest && (
21 <span className="ml-1 font-mono text-xs text-red-400">
22 ({error.digest})
23 </span>
24 )}
25 </p>
26 <div className="mt-4 flex gap-3">
27 <button
28 onClick={() => reset()}
29 className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700"
30 >
31 Try again
32 </button>
33 <a
34 href="/support"
35 className="rounded-md border border-red-300 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100"
36 >
37 Contact support
38 </a>
39 </div>
40 </div>
41 );
42}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1A Next.js error.js file must be a client component and receives error and reset props to catch and recover from segment failures.
  2. 2Reporting the error inside useEffect keyed on error ensures every distinct failure is logged exactly once.
  3. 3Calling reset() re-renders the failed segment, giving users an in-place retry instead of a full reload.

Related explainers

ruby 
class Order
  class InvalidTransition < StandardError; end
 
  TRANSITIONS = {

A state machine for order transitions in Ruby

state-machine data-driven error-handling
Intermediate 8 steps
javascript 
const express = require('express');
const router = express.Router();
const { pool } = require('../db');
const redis = require('../redis');

Building a health check endpoint in Express

health-check timeouts promise-race
Intermediate 9 steps
rust 
use std::cmp::Ordering;
use std::str::FromStr;
 
#[derive(Debug, Clone, PartialEq, Eq)]

Parsing and ordering semantic versions in Rust

parsing trait-implementation ordering
Intermediate 8 steps
ruby 
class Registration < ApplicationRecord
  belongs_to :event
 
  validates :email, presence: true, format: { with: URI::MailTo::EMAIL_REGEXP }

Validating registrations in Rails

validations i18n error-handling
Intermediate 8 steps
javascript 
const MAX_BATCH_SIZE = 20;
const FLUSH_INTERVAL = 5000;
const ENDPOINT = '/api/analytics';
 

Batching analytics events in the browser

batching buffering sendbeacon
Intermediate 10 steps
ruby 
require "csv"
 
def parse_transaction_row(line)
  fields = CSV.parse_line(line, headers: false, skip_blanks: true)

Parsing one CSV transaction row in Ruby

parsing type-coercion error-handling
Intermediate 6 steps

Share this explainer

Here's the card — post it anywhere.

How a Next.js error boundary recovers — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code