Handle ProblemDetail errors in comment and reply forms

Author: ruibaby

packages/comment-widget/src/comment-form.ts

@@ -18,6 +18,7 @@ import {
   versionContext,
 } from './context';
 import type { ToastManager } from './lit-toast';
+import type { ProblemDetail } from './types';
 import {
   type CaptchaRequiredResponse,
   getCaptchaCodeHeader,
@@ -156,8 +157,14 @@ export class CommentForm extends LitElement {
           this.toastManager?.warn(detail);
           return;
         }
-      }
 
+        const problemDetail = error.data as unknown as ProblemDetail;
+        this.toastManager?.error(
+          [problemDetail?.title, problemDetail?.detail].join(' - ') ||
+            msg('Comment failed, please try again later')
+        );
+        return;
+      }
       this.toastManager?.error(msg('Comment failed, please try again later'));
     } finally {
       this.submitting = false;

packages/comment-widget/src/reply-form.ts

@@ -20,6 +20,7 @@ import {
   toastContext,
 } from './context';
 import type { ToastManager } from './lit-toast';
+import type { ProblemDetail } from './types';
 import {
   type CaptchaRequiredResponse,
   getCaptchaCodeHeader,
@@ -160,6 +161,13 @@ export class ReplyForm extends LitElement {
           this.toastManager?.warn(detail);
           return;
         }
+
+        const problemDetail = error.data as unknown as ProblemDetail;
+        this.toastManager?.error(
+          [problemDetail?.title, problemDetail?.detail].join(' - ') ||
+            msg('Comment failed, please try again later')
+        );
+        return;
       }
 
       this.toastManager?.error(msg('Comment failed, please try again later'));

packages/comment-widget/src/types/index.ts

@@ -32,3 +32,13 @@ interface AvatarConfig {
 interface EditorConfig {
   placeholder?: string;
 }
+
+export interface ProblemDetail {
+  type: string;
+  title: string;
+  status: number;
+  detail: string;
+  instance: string;
+  requestId: string;
+  timestamp: string;
+}