From 31f829dfa1e61ddcaf0ffd7de51bb21632fc0726 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 9 Sep 2022 00:00:39 +0200
Subject: [PATCH] [fix] error cleanup rework (#6675)

- add missing changeset, closes #6664
- enhance docs, closes #6669
- fix fallback message in client
---
 .changeset/long-icons-hope.md             |  5 ++++
 documentation/docs/07-hooks.md            | 34 ++++++++++++++++++++++-
 packages/kit/src/runtime/client/client.js |  2 +-
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/long-icons-hope.md

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