Sentry 유저 피드백 UI 커스텀하기

[HidenLee]

결과

코드

Sentry.init({
    dsn: "",
    integrations: [
        Sentry.feedbackIntegration({
            colorScheme: "system",
            // 여기부터는 디자인 커스텀
            showBranding: false, // 유저 입력 폼안에 센트리 로고를 넣을지 선택
            triggerLabel: "버그 신고하기",
            triggerAriaLabel: "버그 신고하기",
            formTitle: "버그 신고하기",
            submitButtonLabel: "제출",
            cancelButtonLabel: "취소",
            addScreenshotButtonLabel: "사진 등록",
            removeScreenshotButtonLabel: "사진 삭제",
            nameLabel: "제보자",
            namePlaceholder: "이름을 입력해주세요",
            emailLabel: "이메일",
            isRequiredLabel: "(필수)",
            messageLabel: "버그 설명",
            messagePlaceholder: "상황을 자세하게 설명해주세요. \n감사히 읽고 수정 조치하겠습니다!",
            successMessageText: "신고가 접수되었어요. 감사합니다!"
        }),
    ],
});

참고자료

공식문서

추가요소

css inset 조정으로 버튼 위치를 변경할 수 있습니다.

#sentry-feedback {
  --inset: auto 0 10vh auto;
}

[moolmin]

감사합니다 👍