frontend: better error handling

This commit is contained in:
Qing 2022-06-12 13:01:45 +08:00
parent fd1c1d29a7
commit 55197f2209
2 changed files with 18 additions and 7 deletions

View File

@ -34,7 +34,11 @@ export default async function inpaint(
method: 'POST', method: 'POST',
body: fd, body: fd,
}).then(async r => { }).then(async r => {
return r.blob() console.log(r)
if (r.ok) {
return r.blob()
}
throw new Error('Something went wrong on server side.')
}) })
return URL.createObjectURL(res) return URL.createObjectURL(res)

View File

@ -15,7 +15,7 @@ import {
TransformComponent, TransformComponent,
TransformWrapper, TransformWrapper,
} from 'react-zoom-pan-pinch' } from 'react-zoom-pan-pinch'
import { useRecoilValue } from 'recoil' import { useRecoilState, useRecoilValue } from 'recoil'
import { useWindowSize, useKey, useKeyPressEvent } from 'react-use' import { useWindowSize, useKey, useKeyPressEvent } from 'react-use'
import inpaint from '../../adapters/inpainting' import inpaint from '../../adapters/inpainting'
import Button from '../shared/Button' import Button from '../shared/Button'
@ -28,7 +28,7 @@ import {
loadImage, loadImage,
useImage, useImage,
} from '../../utils' } from '../../utils'
import { settingState } from '../../store/Atoms' import { settingState, toastState } from '../../store/Atoms'
const TOOLBAR_SIZE = 200 const TOOLBAR_SIZE = 200
const BRUSH_COLOR = '#ffcc00bb' const BRUSH_COLOR = '#ffcc00bb'
@ -73,6 +73,7 @@ function mouseXY(ev: SyntheticEvent) {
export default function Editor(props: EditorProps) { export default function Editor(props: EditorProps) {
const { file } = props const { file } = props
const settings = useRecoilValue(settingState) const settings = useRecoilValue(settingState)
const [toastVal, setToastState] = useRecoilState(toastState)
const [brushSize, setBrushSize] = useState(40) const [brushSize, setBrushSize] = useState(40)
const [original, isOriginalLoaded] = useImage(file) const [original, isOriginalLoaded] = useImage(file)
const [renders, setRenders] = useState<HTMLImageElement[]>([]) const [renders, setRenders] = useState<HTMLImageElement[]>([])
@ -144,12 +145,11 @@ export default function Editor(props: EditorProps) {
} }
const newLineGroups = [...lineGroups, curLineGroup] const newLineGroups = [...lineGroups, curLineGroup]
setLineGroups(newLineGroups)
setCurLineGroup([]) setCurLineGroup([])
setIsDraging(false) setIsDraging(false)
setIsInpaintingLoading(true) setIsInpaintingLoading(true)
drawAllLinesOnMask(newLineGroups) drawAllLinesOnMask(newLineGroups)
try { try {
const res = await inpaint( const res = await inpaint(
file, file,
@ -165,9 +165,16 @@ export default function Editor(props: EditorProps) {
const newRenders = [...renders, newRender] const newRenders = [...renders, newRender]
setRenders(newRenders) setRenders(newRenders)
draw(newRender, []) draw(newRender, [])
// Only append new LineGroup after inpainting success
setLineGroups(newLineGroups)
} catch (e: any) { } catch (e: any) {
// eslint-disable-next-line setToastState({
alert(e.message ? e.message : e.toString()) open: true,
desc: e.message ? e.message : e.toString(),
state: 'error',
duration: 2000,
})
drawOnCurrentRender([])
} }
setIsInpaintingLoading(false) setIsInpaintingLoading(false)
} }