Error Handling and SSR

🛡️ Error Handling & SSR in Svelte: Your App’s Safety Net

Analogy: Think of your Svelte app like a circus act. Error Boundaries are the safety nets that catch performers when they fall. Hydration is like bringing a statue to life—the server sculpts it, and the browser breathes life into it!

🎪 The Big Picture

Imagine you’re watching a circus show. The acrobats are doing amazing flips (your components rendering). But what if someone slips? Without a safety net, the whole show stops!

In Svelte:

• Error Boundaries = Safety nets that catch falling components
• Hydration = The magical moment when a still statue starts moving

🎯 What You’ll Learn

graph TD
    A["Error Handling & SSR"] --> B["🛡️ Error Boundaries"]
    A --> C["💧 Hydration"]
    B --> D["Catch errors gracefully"]
    B --> E["Show fallback UI"]
    C --> F["Server renders HTML"]
    C --> G["Browser makes it interactive"]

🛡️ Part 1: Error Boundaries

What Are Error Boundaries?

Simple Answer: A special wrapper that catches errors from its children and shows something helpful instead of crashing everything.

🎈 Kid-Friendly Example

Imagine you have a toy box (your app). Inside are many toys (components). One toy is broken and makes a loud noise when you touch it (an error).

Without Error Boundary:

• Touch broken toy → CRASH! All toys stop working!

With Error Boundary:

• Touch broken toy → Only that toy is put aside
• A sign appears: “This toy is being fixed!”
• All other toys keep working!

How Error Boundaries Work in Svelte

In SvelteKit, you use a special file called +error.svelte:

<!-- +error.svelte -->
<script>
  import { page } from '$app/stores';
</script>

<div class="error-box">
  <h1>Oops! 😅</h1>
  <p>Error: {$page.error.message}</p>
  <a href="/">Go Home</a>
</div>

📁 File Structure

src/routes/
├── +page.svelte      (Your page)
├── +error.svelte     (Catches errors!)
└── +layout.svelte    (Wraps everything)

Creating Custom Error Boundaries

For component-level errors, create your own boundary:

<!-- ErrorBoundary.svelte -->
<script>
  let hasError = false;
  let errorMessage = '';

  // Catch errors from children
  export function handleError(error) {
    hasError = true;
    errorMessage = error.message;
  }
</script>

{#if hasError}
  <div class="fallback">
    <p>Something went wrong!</p>
    <p>{errorMessage}</p>
    <button onclick={() => hasError = false}>
      Try Again
    </button>
  </div>
{:else}
  <slot />
{/if}

Using Your Error Boundary

<ErrorBoundary>
  <RiskyComponent />
</ErrorBoundary>

🌟 Error Boundary Best Practices

Real-World Error Handling

<script>
  import { onMount } from 'svelte';

  let data = null;
  let error = null;
  let loading = true;

  onMount(async () => {
    try {
      const res = await fetch('/api/data');
      if (!res.ok) throw new Error('Failed!');
      data = await res.json();
    } catch (e) {
      error = e.message;
    } finally {
      loading = false;
    }
  });
</script>

{#if loading}
  <p>Loading... ⏳</p>
{:else if error}
  <div class="error">
    <p>😢 {error}</p>
    <button onclick={() => location.reload()}>
      Retry
    </button>
  </div>
{:else}
  <div>{data}</div>
{/if}

💧 Part 2: Hydration

What Is Hydration?

Simple Answer: The server sends HTML (like a frozen statue), and the browser “wakes it up” to make it interactive!

🎭 The Statue Story

1. Server: Sculpts a beautiful marble statue (HTML)
2. Browser receives: A perfect but lifeless statue
3. Hydration happens: Magic breath brings it to life!
4. Result: The statue can move, talk, respond!

graph TD
    A["🖥️ Server"] -->|Sends HTML| B["📄 Static Page"]
    B -->|Browser loads JS| C["⚡ Hydration"]
    C -->|Attaches listeners| D["🎮 Interactive App"]

How Hydration Works

Step 1: Server Renders HTML

// +page.server.js
export async function load() {
  const data = await fetchData();
  return { data };
}

Step 2: HTML Arrives at Browser

<!-- What user sees immediately -->
<div>
  <h1>Welcome!</h1>
  <button>Click me</button>
</div>
<!-- Button exists but doesn't work yet! -->

Step 3: JavaScript Hydrates

<!-- +page.svelte -->
<script>
  export let data;

  function handleClick() {
    alert('Now I work!');
  }
</script>

<h1>Welcome!</h1>
<button onclick={handleClick}>
  Click me
</button>
<!-- Now the button actually works! -->

Why Hydration Matters

Without Hydration (Client-Only)

User visits → Blank page → JS loads → Content appears
⏱️ User waits... waits... waits...
😞 Bad experience!

With Hydration (SSR)

User visits → Content appears INSTANTLY → JS loads → Becomes interactive
⏱️ User sees content immediately!
😊 Great experience!

Hydration Challenges

⚠️ The Mismatch Problem

Server and client must produce the same HTML!

Bad Example:

<script>
  // Different on server vs client!
  let time = new Date().toLocaleTimeString();
</script>

<p>Time: {time}</p>
<!-- Server: "10:30:00 AM" -->
<!-- Client: "10:30:01 AM" -->
<!-- MISMATCH! Hydration error! -->

Good Example:

<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  let time = '';

  onMount(() => {
    // Only runs in browser!
    time = new Date().toLocaleTimeString();
  });
</script>

<p>Time: {time || 'Loading...'}</p>

Handling Browser-Only Code

<script>
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';

  let windowWidth = 0;

  onMount(() => {
    if (browser) {
      windowWidth = window.innerWidth;
    }
  });
</script>

{#if browser}
  <p>Window width: {windowWidth}px</p>
{:else}
  <p>Measuring window...</p>
{/if}

Partial Hydration Tips

Sometimes you don’t need everything to be interactive:

<!-- Static content - no JS needed -->
<header>
  <h1>My Blog</h1>
  <nav>Links here</nav>
</header>

<!-- Interactive part - needs hydration -->
<main>
  <CommentSection />
  <LikeButton />
</main>

🎯 Hydration Quick Rules

🚀 Putting It All Together

<script>
  import { browser } from '$app/environment';
  import { onMount } from 'svelte';
  import { page } from '$app/stores';

  let mounted = false;
  let error = null;

  onMount(() => {
    mounted = true;
  });

  function riskyOperation() {
    try {
      // Do something risky
    } catch (e) {
      error = e.message;
    }
  }
</script>

{#if error}
  <!-- Error Boundary fallback -->
  <div class="error-state">
    <p>😢 {error}</p>
    <button onclick={() => error = null}>
      Try Again
    </button>
  </div>
{:else}
  <!-- Hydration-safe content -->
  {#if mounted}
    <InteractiveWidget />
  {:else}
    <div class="skeleton">Loading...</div>
  {/if}
{/if}

🎪 Circus Finale: Summary

graph TD
    A["Your Svelte App"] --> B{Error Occurs?}
    B -->|Yes| C["🛡️ Error Boundary Catches"]
    C --> D["Shows Fallback UI"]
    D --> E["User Can Recover"]

    B -->|No| F["💧 Hydration Process"]
    F --> G["Server Renders HTML"]
    G --> H["Browser Receives Page"]
    H --> I["JS Loads & Hydrates"]
    I --> J["🎮 Fully Interactive!"]

🌟 Key Takeaways

1. Error Boundaries = Safety nets for your components
2. Use +error.svelte for page-level errors in SvelteKit
3. Hydration = Server HTML + Browser JS = Interactive App
4. Always match server and client rendering
5. Use onMount for browser-only code
6. Check browser before using window/document

🎯 Remember This!

Error Boundaries: “If a clown falls, the show goes on!”

Hydration: “The server paints the picture, the browser brings it to life!”

You’ve got this! Your Svelte apps are now crash-proof and lightning-fast! 🚀