Update `error()` and `PageError` types to include `details` property for more descriptive error messages

[daleweaver777]

Describe the problem

When throwing an error, it would be nice to pass more info to the Error Page than just a single message property. Kit already allows me to pass an object to the error() function and access it in +error.svelte. However, I get type errors.

+page.server.ts

throw error(401, {
    message: 'Not Logged In',
    details: 'Please login to access this page.'
});

+error.svelte

<h1>
    {$paged.error?.message}
</h1>
<p>
    {$page.error?.details ?? ''}
</p>

Example Error Page

Describe the proposed solution

Update types for PageError interface and error() function to include an optional property details.

ambient.d.ts

export interface PageError {
    message: string;
    details?: string;
}

index.d.ts

export function error(
    status: number,
    // this overload ensures you can omit the argument or pass in a string if App.PageError is of type { message: string }
    body?: { message: string, details?: string } extends App.PageError ? App.PageError | string | undefined : never
): HttpError;

Alternatives considered

Would be nice to include any # of optional properties but I'm not sure how to type that.

Importance

nice to have

Additional Information

No response

[dummdidumm]

You can type PageError yourself in src/app.d.ts:

//app.d.ts
declare namespace {
  PageError {
    message: string;
    details?: string;
  }
}

You also need to implement the handleError functions and return the details for them to actually show up.

[daleweaver777]

@dummdidumm thanks for the info. I didn't realize I could type my own PageError. This is very helpful and solved my problem. I didn't have to do anything with handleError function to access the additional properties in my svelte page.