better error reporting (#13636)

This commit is contained in:
Vadim Ogievetsky 2023-01-05 20:00:33 -08:00 committed by GitHub
parent fdc8aa2833
commit 4ee4d99b8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 41 additions and 21 deletions

View File

@ -23,9 +23,7 @@ import { ShowLog } from './show-log';
describe('ShowLog', () => {
it('describe show log', () => {
const showLog = (
<ShowLog status="RUNNING" endpoint="/druid/index/test/log" downloadFilename="test" />
);
const showLog = <ShowLog tail endpoint="/druid/index/test/log" downloadFilename="test" />;
const { container } = render(showLog);
expect(container.firstChild).toMatchSnapshot();
});

View File

@ -39,7 +39,7 @@ export interface ShowLogProps {
endpoint: string;
downloadFilename?: string;
tailOffset?: number;
status?: string;
tail?: boolean;
}
export interface ShowLogState {
@ -85,9 +85,9 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
}
componentDidMount(): void {
const { status } = this.props;
const { tail } = this.props;
if (status === 'RUNNING') {
if (tail) {
this.addTailer();
}
@ -138,13 +138,13 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
};
render(): JSX.Element {
const { endpoint, downloadFilename, status } = this.props;
const { endpoint, downloadFilename, tail } = this.props;
const { logState } = this.state;
return (
<div className="show-log">
<div className="top-actions">
{status === 'RUNNING' && (
{tail && (
<Switch
className="tail-log"
label="Tail log"

View File

@ -22,13 +22,17 @@
&.#{$bp-ns}-dialog {
width: 75%;
top: 5%;
height: 75vh;
}
.#{$bp-ns}-tabs {
position: relative;
height: 100%;
width: 100%;
height: 75vh;
.#{$bp-ns}-tab-list {
max-width: 300px;
overflow: auto;
}
.#{$bp-ns}-tab-panel {
flex: 1;

View File

@ -112,12 +112,11 @@ export class SnitchDialog extends React.PureComponent<SnitchDialogProps, SnitchD
}
renderHistoryDialog(): JSX.Element | null {
const { className, title, historyRecords } = this.props;
const { title, historyRecords } = this.props;
if (!historyRecords) return null;
return (
<HistoryDialog
className={className}
title={title + ' history'}
historyRecords={historyRecords}
onBack={this.back}

View File

@ -28,7 +28,7 @@ interface TaskTableActionDialogProps {
taskId: string;
actions: BasicAction[];
onClose: () => void;
status?: string;
status: string;
}
export const TaskTableActionDialog = React.memo(function TaskTableActionDialog(
@ -95,7 +95,7 @@ export const TaskTableActionDialog = React.memo(function TaskTableActionDialog(
)}
{activeTab === 'log' && (
<ShowLog
status={status}
tail={status === 'RUNNING'}
endpoint={`${taskEndpointBase}/log`}
downloadFilename={`task-log-${taskId}.log`}
tailOffset={16000}

View File

@ -16,7 +16,7 @@
* limitations under the License.
*/
import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
import * as JSONBig from 'json-bigint-native';
export class Api {
@ -24,6 +24,25 @@ export class Api {
static initialize(config?: AxiosRequestConfig): void {
Api.instance = axios.create(config);
// Intercept the request and if we get an error (status code > 2xx) and we have a "message" in the response then
// show it as it will be more informative than the default "Request failed with status code xxx" message.
Api.instance.interceptors.response.use(
resp => resp,
(error: AxiosError) => {
const responseData = error.response?.data;
const message = responseData?.message;
if (typeof message === 'string') {
return Promise.reject(new Error(message));
}
if (error.config.method?.toLowerCase() === 'get' && typeof responseData === 'string') {
return Promise.reject(new Error(responseData));
}
return Promise.reject(error);
},
);
}
static getDefaultConfig(): AxiosRequestConfig {

View File

@ -1243,7 +1243,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
)}
{inputQueryState.isLoading() && <Loader />}
{inputQueryState.error && (
<CenterMessage>{`Error: ${inputQueryState.getErrorMessage()}`}</CenterMessage>
<CenterMessage>{inputQueryState.getErrorMessage()}</CenterMessage>
)}
</>
);
@ -1479,7 +1479,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
)}
{parserQueryState.isLoading() && <Loader />}
{parserQueryState.error && (
<CenterMessage>{`Error: ${parserQueryState.getErrorMessage()}`}</CenterMessage>
<CenterMessage>{parserQueryState.getErrorMessage()}</CenterMessage>
)}
</div>
);
@ -1721,7 +1721,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
)}
{timestampQueryState.isLoading() && <Loader />}
{timestampQueryState.error && (
<CenterMessage>{`Error: ${timestampQueryState.getErrorMessage()}`}</CenterMessage>
<CenterMessage>{timestampQueryState.getErrorMessage()}</CenterMessage>
)}
</div>
);
@ -1900,7 +1900,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
)}
{transformQueryState.isLoading() && <Loader />}
{transformQueryState.error && (
<CenterMessage>{`Error: ${transformQueryState.getErrorMessage()}`}</CenterMessage>
<CenterMessage>{transformQueryState.getErrorMessage()}</CenterMessage>
)}
</div>
);
@ -2112,7 +2112,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
)}
{filterQueryState.isLoading() && <Loader />}
{filterQueryState.error && (
<CenterMessage>{`Error: ${filterQueryState.getErrorMessage()}`}</CenterMessage>
<CenterMessage>{filterQueryState.getErrorMessage()}</CenterMessage>
)}
</div>
);
@ -2297,7 +2297,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
)}
{schemaQueryState.isLoading() && <Loader />}
{schemaQueryState.error && (
<CenterMessage>{`Error: ${schemaQueryState.getErrorMessage()}`}</CenterMessage>
<CenterMessage>{schemaQueryState.getErrorMessage()}</CenterMessage>
)}
</div>
);