diff --git a/.changeset/long-icons-hope.md b/.changeset/long-icons-hope.md new file mode 100644 index 000000000000..59f471c25317 --- /dev/null +++ b/.changeset/long-icons-hope.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/kit': patch +--- + +[breaking] hooks file renames; error shape defined through handleError diff --git a/documentation/docs/07-hooks.md b/documentation/docs/07-hooks.md index 827d9e7a7ff1..86a507e54ea5 100644 --- a/documentation/docs/07-hooks.md +++ b/documentation/docs/07-hooks.md @@ -140,6 +140,18 @@ If an unexpected error is thrown during loading or rendering, this function will - you can log the error - you can generate a custom representation of the error that is safe to show to users, omitting sensitive details like messages and stack traces. The returned value, which defaults to `{ message: 'Internal Error' }`, becomes the value of `$page.error`. To make this type-safe, you can customize the expected shape by declaring an `App.PageError` interface (which must include `message: string`, to guarantee sensible fallback behavior). +The following code shows an example of typing the error shape as `{ message: string; code: string }` and returning it accordingly from the `handleError` functions: + +```ts +/// file: src/app.d.ts +declare namespace App { + interface PageError { + message: string; + code: string; + } +} +``` + ```js /// file: src/hooks.server.js // @errors: 2322 2571 @@ -160,8 +172,28 @@ export function handleError({ error, event }) { } ``` +```js +/// file: src/hooks.client.js +// @errors: 2322 2571 +// @filename: ambient.d.ts +const Sentry: any; + +// @filename: index.js +// ---cut--- +/** @type {import('@sveltejs/kit').HandleClientError} */ +export function handleError({ error, event }) { + // example integration with https://sentry.io/ + Sentry.captureException(error, { event }); + + return { + message: 'Whoops!', + code: error.code ?? 'UNKNOWN' + }; +} +``` + > In `src/hooks.client.js`, the type of `handleError` is `HandleClientError` instead of `HandleServerError`, and `event` is a `NavigationEvent` rather than a `RequestEvent`. This function is not called for _expected_ errors (those thrown with the [`error`](/docs/modules#sveltejs-kit-error) function imported from `@sveltejs/kit`). -During development, if an error occurs because of a syntax error in your Svelte code, a `frame` property will be appended highlighting the location of the error. \ No newline at end of file +During development, if an error occurs because of a syntax error in your Svelte code, the passed in error has a `frame` property appended highlighting the location of the error. diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js index 755f0d85c428..09be6d707ab3 100644 --- a/packages/kit/src/runtime/client/client.js +++ b/packages/kit/src/runtime/client/client.js @@ -1506,7 +1506,7 @@ async function load_data(url, invalid) { * @returns {App.PageError} */ function handle_error(error, event) { - return hooks.handleError({ error, event }) ?? /** @type {any} */ ({ error: 'Internal Error' }); + return hooks.handleError({ error, event }) ?? /** @type {any} */ ({ message: 'Internal Error' }); } // TODO remove for 1.0