Implementation:Langgenius Dify UseLog

Knowledge Sources	Langgenius_Dify
Domains	Frontend, Logging, App Monitoring
Last Updated	2026-02-08 00:00 GMT

Overview

React Query hooks for fetching application log data including annotation counts, chat conversations, completion conversations, conversation details, and workflow logs.

Description

The UseLog module provides TanStack React Query hooks for the Dify application logging and monitoring system. It enables components to fetch and display log data for different application types. The module is organized into five sections:

• Annotations Count -- useAnnotationsCount retrieves the total count of annotations for an app.
• Chat Conversations -- useChatConversations fetches paginated chat conversation logs with filter parameters.
• Completion Conversations -- useCompletionConversations fetches paginated completion conversation logs.
• Chat Conversation Detail -- useChatConversationDetail retrieves full details of a specific chat conversation.
• Completion Conversation Detail -- useCompletionConversationDetail retrieves full details of a specific completion conversation.
• Workflow Logs -- useWorkflowLogs fetches workflow execution logs with filter parameters.

All queries are namespaced under log and are conditionally enabled based on the presence of required IDs.

Usage

Use these hooks in the Dify console log viewer pages to display application usage logs, conversation histories, and workflow execution records for monitoring and debugging purposes.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/service/use-log.ts

Signature

export const useAnnotationsCount: (appId: string) => UseQueryResult<AnnotationsCountResponse>
export const useChatConversations: (params: { appId: string, params?: Partial<ChatConversationsRequest> }) => UseQueryResult<ChatConversationsResponse>
export const useCompletionConversations: (params: { appId: string, params?: Partial<CompletionConversationsRequest> }) => UseQueryResult<CompletionConversationsResponse>
export const useChatConversationDetail: (appId?: string, conversationId?: string) => UseQueryResult<ChatConversationFullDetailResponse>
export const useCompletionConversationDetail: (appId?: string, conversationId?: string) => UseQueryResult<CompletionConversationFullDetailResponse>
export const useWorkflowLogs: (params: { appId: string, params?: Record<string, string | number | boolean | undefined> }) => UseQueryResult<WorkflowLogsResponse>

Import

import {
  useAnnotationsCount,
  useChatConversations,
  useCompletionConversations,
  useChatConversationDetail,
  useCompletionConversationDetail,
  useWorkflowLogs,
} from '@/service/use-log'

I/O Contract

Inputs

Name	Type	Required	Description
appId	string	Yes	Application ID to fetch logs for
conversationId	string	Yes (detail hooks)	Conversation ID for fetching full conversation details
params	Partial<ChatConversationsRequest>	No	Pagination and filter parameters (page, limit, keyword, etc.)

Outputs

Name	Type	Description
AnnotationsCountResponse	AnnotationsCountResponse	Total annotation count for the application
ChatConversationsResponse	ChatConversationsResponse	Paginated list of chat conversation summaries
CompletionConversationsResponse	CompletionConversationsResponse	Paginated list of completion conversation summaries
ChatConversationFullDetailResponse	ChatConversationFullDetailResponse	Full chat conversation including all messages
CompletionConversationFullDetailResponse	CompletionConversationFullDetailResponse	Full completion conversation with all messages
WorkflowLogsResponse	WorkflowLogsResponse	Paginated workflow execution log entries

Usage Examples

import { useChatConversations, useChatConversationDetail, useWorkflowLogs } from '@/service/use-log'

// Fetch chat conversation logs
const { data: conversations } = useChatConversations({
  appId: 'app-123',
  params: { page: 1, limit: 20 },
})

// Fetch a specific conversation's details
const { data: detail } = useChatConversationDetail('app-123', 'conv-456')

// Fetch workflow logs
const { data: workflowLogs } = useWorkflowLogs({
  appId: 'app-123',
  params: { page: 1, limit: 50 },
})

Related Pages

• Langgenius_Dify_Annotation_Service - Annotation CRUD service functions used alongside log views
• Langgenius_Dify_Fetch_Layer - Underlying HTTP fetch layer for API requests