Add error handling

optuna_dashboard/_app.py

@@ -411,18 +411,30 @@ def create_app(storage: BaseStorage, debug: bool = False) -> Bottle:
         response.status = 204  # No content
         return {}
 
-    @app.put("/api/studies/<study_id:int>/<trial_id:int>")
+    @app.post("/api/studies/<study_id:int>/<trial_id:int>/tell")
     @json_api_view
-    def save_trial_value(study_id: int, trial_id: int) -> BottleViewReturn:
-        value = float(request.json.get("value", None))
+    def tell_trial_value(study_id: int, trial_id: int) -> BottleViewReturn:
+        try:
+            value = float(request.json.get("value", None))
+        except ValueError:
+            response.status = 400  # Bad request
+            return {"reason": "You need to pass float castable value"}
+ 
         try:
             study_name = storage.get_study_name_from_id(study_id)
-            study = optuna.load_study(storage=storage, study_name=study_name)
         except KeyError:
             response.status = 404  # Not found
             return {"reason": f"study_id={study_id} is not found"}
-        study.tell(trial_id, value)
-        response.status = 204  # No content
+
+        study = optuna.load_study(storage=storage, study_name=study_name)
+
+        try:
+            study.tell(trial_id, value)
+        except Exception as e:
+            response.status = 400  # Bad request
+            return {"reason": e.args}
+
+        response.status = 201
         return {}
 
     @app.put("/api/studies/<study_id:int>/<trial_id:int>/note")

optuna_dashboard/ts/action.ts

@@ -269,16 +269,17 @@ export const actionCreator = () => {
   const saveTrialValue = (
     studyId: number,
     trialId: number,
-    value: number
+    value: string
   ) => {
     saveTrialValueAPI(studyId, trialId, value)
       .then(() => {
-        enqueueSnackbar(`Success to update trial value (id=${studyId})`, {
+        enqueueSnackbar(`Success to update trial value (id=${trialId}, value=${value})`, {
           variant: "success",
         })
       })
       .catch((err) => {
-        enqueueSnackbar(`Failed to update trial value (id=${studyId})`, {
+        const reason = err.response?.data.reason
+        enqueueSnackbar(`Failed to update trial value (id=${trialId}, value=${value}). Reason: ${reason}`, {
           variant: "error",
         })
         console.log(err)

optuna_dashboard/ts/apiClient.ts

@@ -220,10 +220,10 @@ export const saveTrialNoteAPI = (
 export const saveTrialValueAPI = (
   studyId: number,
   trialId: number,
-  value: number,
+  value: string,
 ): Promise<void> => {
   return axiosInstance
-    .put<void>(`/api/studies/${studyId}/${trialId}`, {value: value})
+    .post<void>(`/api/studies/${studyId}/${trialId}/tell`, {value: value})
     .then((res) => {
       return
     })

optuna_dashboard/ts/components/TrialTable.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react"
+import React, { ChangeEvent, FC, FormEvent, useState } from "react"
 import { Typography, Grid, Box, IconButton } from "@mui/material"
 import LinkIcon from "@mui/icons-material/Link"
 
@@ -268,19 +268,13 @@ export const TrialTable: FC<{
 
   const collapseBody = (index: number) => {
     const [value, setValue] = useState("")
-    const handleSubmit = (e) => {
+    const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {
       e.preventDefault()
-      const v = (+value) as number;
       const studyId = (studyDetail as StudyDetail).id
       const trialId = trials[index].number
-      action.saveTrialValue(studyId, trialId, v)
-      console.log({
-        index,
-        value,
-      })
-
+      action.saveTrialValue(studyId, trialId, value)
     }
-    const handleChangeValue = (e) => {
+    const handleChangeValue = (e: ChangeEvent<HTMLInputElement>): void => {
       setValue(e.target.value)
     }