如何在Svelte中優雅地處理全局錯誤和異常捕獲

在Svelte中處理全局錯誤和異常捕獲可以通過使用onerror函數來實現。以下是一種優雅的方式來處理全局錯誤和異常捕獲：

1. 創建一個App.svelte組件，作為應用的根組件。

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

  onMount(() => {
    window.onerror = (message, source, lineno, colno, error) => {
      console.error('Global error:', message, source, lineno, colno, error);
    };
  });
</script>

<main>
  <!-- Your app content here -->
</main>

2. 在window.onerror函數中處理全局錯誤，可以在這里記錄錯誤信息或者發送錯誤日志給服務器。

3. 使用<ErrorBoundary>組件可以捕獲子組件中的錯誤，并展示錯誤信息。

<script>
  import { onMount } from 'svelte';
  import ErrorBoundary from './ErrorBoundary.svelte';

  onMount(() => {
    window.onerror = (message, source, lineno, colno, error) => {
      console.error('Global error:', message, source, lineno, colno, error);
    };
  });
</script>

<main>
  <ErrorBoundary>
    <!-- Your app content here -->
  </ErrorBoundary>
</main>

4. 創建一個ErrorBoundary.svelte組件來處理子組件中的錯誤。

<script>
  let error = null;
  let errorInfo = null;

  function handleOnError(event) {
    error = event.detail.error;
    errorInfo = event.detail.errorInfo;
  }

  function handleResetClick() {
    error = null;
    errorInfo = null;
  }
</script>

{#if error !== null}
  <div>
    <h2>An error occurred:</h2>
    <pre>{error.message}</pre>
    <pre>{errorInfo.component}</pre>
    <button on:click={handleResetClick}>Reset</button>
  </div>
{:else}
  <slot on:error={handleOnError}/>
{/if}

5. 在ErrorBoundary組件中，使用<slot>來插入子組件，并在子組件中使用on:error來向父組件傳遞錯誤信息。

通過以上步驟，在Svelte應用中就可以優雅地處理全局錯誤和異常捕獲了。