LukeParke/developer.sailpoint.com
1
0
Fork 0
mirror of https://github.com/LukeHagar/developer.sailpoint.com.git synced 2025-12-10 12:27:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

added docs for the rest of the app dev process

Browse Source
This commit is contained in:
Philip Ellis
2025-08-21 16:53:31 -04:00
parent 8000d87f59
commit b6d5268045
6 changed files with 864 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
docs/tools/ui-development-kit/error-handling.md
View File

@@ -11,128 +11,54 @@ slug: /tools/ui-development-kit/error-handling
tags: ['UI', 'Error']
---
Ideally, everything in your custom UIs will work smoothly, but you will likely encounter errors at some point when you're implementing a page. If you provide an invalid filter or sorter, the list accounts endpoint will return a 400 error, for example. You can handle this error by adding a `try catch` block to the server side of the accounts list page.
Ideally, everything in your custom UIs will work smoothly, but you will likely encounter errors at some point when you're implementing a page. For example, if you provide an invalid filter or sorter, the list accounts endpoint will return a 400 error. Even though the actual calls happen in the backend electron code, you almost never need to interact with that part of the application. Instead, it is best to handle all the errors on the front end
If any of your backend calls result in a server error or bad request, you also want to handle those errors.
Read this guide to learn how to use the UI Development Kit to handle errors.
## 400 bad request
## Handling errors in your code
If you provide an invalid filter or sorter, the [List Accounts Endpoint](https://developer.sailpoint.com/docs/api/v3/list-accounts) returns a 400 error. This example awaits the response and doesn't exit the program when a 4xx level status is received. If a 4xx level status is received, the user is redirected to an error page.
If you provide an invalid filter or sorter, the [List Accounts Endpoint](https://developer.sailpoint.com/docs/api/v2025/list-accounts) returns a 400 error. This example uses a try/catch to handle the error and present the user with what went wrong.
Refer to this code block to learn how to implement error handling for invalid filters or sorters:
This is just one example of how things can be handled during an error event. Sometimes it can be better to present the user with a popup, or you can use a snackbar to show a quick popup on the bottom of the page.
```typescript
import {createConfiguration} from '$lib/sailpoint/sdk.js';
import {getFilters, getLimit, getPage, getSorters} from '$lib/Utils.js';
import {error} from '@sveltejs/kit';
import {AccountsApi} from 'sailpoint-api-client';
export const load = async ({url, locals}) => {
const config = createConfiguration(
locals.session!.baseUrl,
locals.idnSession!.access_token,
);
const api = new AccountsApi(config);
// initially, set error to false and have no error message
this.error = false;
this.errorMessage = '';
const page = getPage(url);
const limit = getLimit(url);
const sorters = getSorters(url);
const filters = getFilters(url);
const reportResp = await api.listAccounts(
{
count: true,
sorters: sorters,
filters: filters,
limit: Number(limit),
offset: Number(page) * Number(limit),
},
{
validateStatus: function (status) {
return status < 500;
},
},
);
if (reportResp.status !== 200) {
error(400, {
message:
'an error occurred while fetching accounts. Please examine your filters and and sorters and try again.',
context: {params: {page, limit, filters, sorters}},
urls: [
'https://developer.sailpoint.com/idn/api/standard-collection-parameters#filtering-results',
],
errData: reportResp.data,
});
}
const totalCount = reportResp.headers['x-total-count'];
const accountData = reportResp.data;
return {accountData, totalCount, params: {page, limit, sorters, filters}};
};
try {
const response = await this.sdk.listAccounts(request);
if (response.status !== 200) { // check to see if the response code is the expected value. In case it's not, just throw an error as it will be handled in the try catch block
throw new Error(`Failed to load accounts: ${response.statusText}`);
}
this.accounts = response.data;
} catch (error) { // In case the SDK encounters some error in the request
console.error('Error loading accounts:', error);
this.error = true;
this.errorMessage = error instanceof Error ? error.message : String(error);
this.accounts = [];
} finally {
this.loading = false;
}
```
## 500 server issues
Present the user with the error message if there is an error present during loading any data
```html
<div *ngIf="error" class="error-message mat-elevation-z1">
<mat-icon color="warn">error</mat-icon>
<span>Error loading accounts: {{ errorMessage }}</span>
</div>
```
You can update the code block to handle more than just the 400 level statuses. You can see the highlighted code changes to handle any error response from the API call. You can send back an error to the user with the status, a detailed message, the details about the parameters used that caused the error, and the error response from the API.
## Retrieving logs from the app
Refer to this code block to learn how to implement error handling for other non-400 errors:
When running the built app locally, you can retrieve details logging from the app by running the executable with the `--enable-logging` flag enabled. For example:
```typescript
import {createConfiguration} from '$lib/sailpoint/sdk.js';
import {getFilters, getLimit, getPage, getSorters} from '$lib/Utils.js';
import {error} from '@sveltejs/kit';
import {AccountsApi} from 'sailpoint-api-client';
export const load = async ({url, locals}) => {
const config = createConfiguration(
locals.session!.baseUrl,
locals.idnSession!.access_token,
);
const api = new AccountsApi(config);
const page = getPage(url);
const limit = getLimit(url);
const sorters = getSorters(url);
const filters = getFilters(url);
const reportResp = await api.listAccounts(
{
count: true,
sorters: sorters,
filters: filters,
limit: Number(limit),
offset: Number(page) * Number(limit),
},
{
validateStatus: function (status) {
// highlight-next-line
return status < 550;
},
},
);
if (reportResp.status !== 200) {
// highlight-next-line
error(reportResp.status, {
message:
'an error occurred while fetching accounts. Please examine your filters and and sorters and try again.',
context: {params: {page, limit, filters, sorters}},
urls: [
'https://developer.sailpoint.com/idn/api/standard-collection-parameters#filtering-results',
],
errData: reportResp.data,
});
}
const totalCount = reportResp.headers['x-total-count'];
const accountData = reportResp.data;
return {accountData, totalCount, params: {page, limit, sorters, filters}};
};
```powershell
& '.\sailpoint-ui-development-kit 1.0.0.exe' --enable-logging
```
## Discuss