Skip to content

Commit

Permalink
Using API error messages in the interface (#149)
Browse files Browse the repository at this point in the history
* show messages from ApiError

* format
  • Loading branch information
trean authored Jan 23, 2024
1 parent b3ed30a commit 01b44b3
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 15 deletions.
8 changes: 3 additions & 5 deletions src/components/ToastNotifications/ErrorNotifier.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,21 @@ import PropTypes from 'prop-types';
import { useSnackbar } from 'notistack';
import { getSnackbarOptions } from '../Common/utils/snackbarOptions';

export const ErrorNotifier = ({ message }) => {
export const ErrorNotifier = ({ message = 'Something went wrong', callback }) => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const errorSnackbarOptions = getSnackbarOptions('error', closeSnackbar, 6000);

useEffect(() => {
enqueueSnackbar(message, errorSnackbarOptions);
typeof callback === 'function' && callback();
}, [enqueueSnackbar, errorSnackbarOptions, message]);

return null;
};

ErrorNotifier.defaultProps = {
message: 'We are sorry, but something went wrong. Please, try again later.',
};

ErrorNotifier.propTypes = {
message: PropTypes.string,
callback: PropTypes.func,
};

export default ErrorNotifier;
31 changes: 31 additions & 0 deletions src/lib/get-error-message.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/**
* Get error message from error object
* @param {Error} e - error object
* @param {?Object} [options] - options: {defaultMessage: string, withApiKey: {apiKey: string}}
* @param {?string} [options.fallbackMessage] - fallback error message
* @param {?Object} [options.withApiKey] - object with apiKey
* @param {?string} [options.withApiKey.apiKey] - apiKey
* @return {null|string}
*/
export const getErrorMessage = (e, options = {}) => {
const { fallbackMessage = 'Something went wrong.', withApiKey = null } = options;
const { apiKey } = withApiKey || {};
let message;

try {
// error is instance of ApiError
const error = e.getActualType();
if ((error.status === 401 || error.status === 403) && withApiKey) {
if (!apiKey) {
return null;
} else {
return 'Your API key is invalid. Please, set a new one.';
}
}
message = error.data?.status?.error || e.message || fallbackMessage;
} catch (err) {
// error is not instance of ApiError
message = e.message || fallbackMessage;
}
return message;
};
7 changes: 5 additions & 2 deletions src/pages/Collection.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { CenteredFrame } from '../components/Common/CenteredFrame';
import Box from '@mui/material/Box';
import { SnapshotsTab } from '../components/Snapshots/SnapshotsTab';
import CollectionInfo from '../components/Collections/CollectionInfo';
import { getErrorMessage } from '../lib/get-error-message';

function Collection() {
const pageSize = 10;
Expand Down Expand Up @@ -58,7 +59,8 @@ function Collection() {
setPoints({ points: newPoints });
setErrorMessage(null);
} catch (error) {
setErrorMessage(error.message);
const message = getErrorMessage(error, { withApiKey: { apiKey: qdrantClient.getApiKey() } });
message && setErrorMessage(message);
setPoints({});
}
} else {
Expand All @@ -75,7 +77,8 @@ function Collection() {
setNextPageOffset(newPoints?.next_page_offset);
setErrorMessage(null);
} catch (error) {
setErrorMessage(error.message);
const message = getErrorMessage(error, { withApiKey: { apiKey: qdrantClient.getApiKey() } });
message && setErrorMessage(message);
setPoints({});
}
}
Expand Down
13 changes: 5 additions & 8 deletions src/pages/Collections.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Typography, Grid } from '@mui/material';
import ErrorNotifier from '../components/ToastNotifications/ErrorNotifier';
import { CenteredFrame } from '../components/Common/CenteredFrame';
import { SnapshotsUpload } from '../components/Snapshots/SnapshotsUpload';
import { getErrorMessage } from '../lib/get-error-message';

function Collections() {
const [rawCollections, setRawCollections] = useState(null);
Expand All @@ -20,13 +21,9 @@ function Collections() {
setRawCollections(collections.collections.sort((a, b) => a.name.localeCompare(b.name)));
setErrorMessage(null);
} catch (error) {
if (error.status === 403 || error.status === 401) {
if (qdrantClient.getApiKey()) {
setErrorMessage('Your API key is invalid. Please, set a new one.');
}
} else {
setErrorMessage(error.message);
}
const apiKey = qdrantClient.getApiKey();
const message = getErrorMessage(error, { withApiKey: { apiKey } });
message && setErrorMessage(message);
setRawCollections(null);
}
}
Expand All @@ -42,7 +39,7 @@ function Collections() {
return (
<>
<CenteredFrame>
{errorMessage !== null && <ErrorNotifier {...{ message: errorMessage }} />}
{errorMessage !== null && <ErrorNotifier message={errorMessage} />}
<Grid container maxWidth={'xl'} spacing={3}>
<Grid xs={12} item>
<Typography variant="h4">Collections</Typography>
Expand Down

0 comments on commit 01b44b3

Please sign in to comment.