如何在Svelte中優(yōu)雅地處理全局錯(cuò)誤和異常捕獲

在Svelte中處理全局錯(cuò)誤和異常捕獲可以通過使用onerror函數(shù)來實(shí)現(xiàn)。以下是一種優(yōu)雅的方式來處理全局錯(cuò)誤和異常捕獲：

1. 創(chuàng)建一個(gè)App.svelte組件，作為應(yīng)用的根組件。

<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函數(shù)中處理全局錯(cuò)誤，可以在這里記錄錯(cuò)誤信息或者發(fā)送錯(cuò)誤日志給服務(wù)器。

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

<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. 創(chuàng)建一個(gè)ErrorBoundary.svelte組件來處理子組件中的錯(cuò)誤。

<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來向父組件傳遞錯(cuò)誤信息。

通過以上步驟，在Svelte應(yīng)用中就可以優(yōu)雅地處理全局錯(cuò)誤和異常捕獲了。