前提・実現したいこと
liff.sendmessage()にてLINEにメッセージ送信が出来ない機種と何故送信出来ないかの原因の理解
発生している問題・エラーメッセージ
webからliff.sendmessage()をしてもLINE側にメッセージが送信されない事象が発生しています。 全ての端末ではなくAndroidが大半を占めているそうです。
知り合いのお店で運用しており、OSまでは聞いているのですが具体的な機種や挙動等は不明です。
該当のソースコード
import React, { useState, useCallback } from "react";
import TextInput from "../components/TextInput";
import RadioGroup from "../components/RadioGroup";
import { useLiff } from "react-liff";
import { menu } from "../assets/js/menu.js";
const Reservation = () => {
const [date, setDate] = useState("");
const [hour, setHour] = useState("");
const [radio, setRadio] = useState(menu[0]);
const [name, setName] = useState("");
const [remarks, setRemarks] = useState("");
const [flag, setFlag] = useState(true);
const { error, liff, loggedIn, ready } = useLiff();
const handleRadioChange = (event) => {
const target = menu.find((obj) => {
return obj.value === event.target.value;
});
setRadio(target);
};
const inputDate = useCallback((e) => {
setDate(e.target.value);
}, []);
const inputHour = useCallback((e) => {
setHour(e.target.value);
}, []);
const inputName = useCallback((e) => {
setName(e.target.value);
}, []);
const inputRemarks = useCallback((e) => {
setRemarks(e.target.value);
}, []);
const sendText = () => {
if (date !== "" && hour !== "" && name !== "") {
setFlag(true);
const objectDate = new Date(date);
const textDate = `${objectDate.getMonth() + 1}/${objectDate.getDate()}`;
const text = `希望日:${textDate} ${hour}\nメニュー:${radio.label}\nお名前:${name}\n備考:${remarks}`;
if (!liff.isInClient()) {
// Webブラウザからメッセージ送信
liff
.shareTargetPicker([
{
type: "text",
text: text,
},
])
.catch(function (error) {
console.log("Webブラウザからのメッセージ送信エラー:" + error);
throw new Error(error);
});
} else {
// LINEトーク画面上でメッセージ送信
liff
.sendMessages([
{
type: "text",
text: text,
},
])
.then(function () {
liff.closeWindow();
})
.catch(function (error) {
console.log("LINEトーク画面上のメッセージ送信エラー:" + error);
throw new Error(error);
});
}
} else {
setFlag(false);
}
};
return (
<div className="reservation_box">
<p className="reservation_box_description">
以下に予約情報を入力して送信ボタンを押してください!
</p>
<div className="reservation_box_form">
<p>
希望日<span className="required">必須</span>
</p>
<div>
<TextInput
value={date}
type={"date"}
onChange={inputDate}
label={"日付"}
/>
</div>
<div>
<TextInput
value={hour}
type={"time"}
onChange={inputHour}
label={"時間"}
/>
</div>
</div>
<div className="reservation_box_form">
<p>
メニュー<span className="required">必須</span>
</p>
<div>
<RadioGroup
ariaLable="menu"
name="menu"
value={radio.value}
handleChange={handleRadioChange}
radioGroup={menu}
/>
</div>
</div>
<div className="reservation_box_form">
<p>
お名前<span className="required">必須</span>
</p>
<div>
<TextInput value={name} type={"text"} onChange={inputName} />
</div>
</div>
<div className="reservation_box_form">
<p>備考/ご要望・ご相談等</p>
<div>
<TextInput
value={remarks}
type={"text"}
onChange={inputRemarks}
multiline={true}
rows={3}
/>
</div>
</div>
<div className="loginbtn-wrap">
<button className="loginbtn" onClick={sendText}>
送信
</button>
</div>
<p className="form-validation-msg">
{flag ? "" : "必須項目を入力してください"}
</p>
{/* <div>{showDisplayName()}</div> */}
</div>
);
};
export default Reservation;
試したこと
catch時にエラーを投げてsentryに通知するようにしましたが、検知できておらず。
補足情報(FW/ツールのバージョンなど)
"@line/liff": "^2.12.0" "react": "^17.0.2"