Skip to content

Commit

Permalink
[fix] error cleanup rework (#6675)
Browse files Browse the repository at this point in the history
- add missing changeset, closes #6664
- enhance docs, closes #6669
- fix fallback message in client
  • Loading branch information
dummdidumm authored Sep 8, 2022
1 parent 842f69b commit 31f829d
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/long-icons-hope.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/kit': patch
---

[breaking] hooks file renames; error shape defined through handleError
34 changes: 33 additions & 1 deletion documentation/docs/07-hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
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.
2 changes: 1 addition & 1 deletion packages/kit/src/runtime/client/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 31f829d

Please sign in to comment.