feat: implement cron task logging functionality with enhanced error handling and UI for viewing logs in the settings page

Author: tacxou

apps/api/src/_common/functions/handler-logger.ts

@@ -3,6 +3,10 @@ import path from 'path'
 import { ConfigService } from '@nestjs/config'
 import { Logger } from '@nestjs/common'
 
+export function toSafeHandlerName(handler: string): string {
+  return handler.replace(/[^a-zA-Z0-9-_]/g, '_').toLowerCase()
+}
+
 function ensureDir(dir: string) {
   try {
     fs.mkdirSync(dir, { recursive: true, mode: 0o777 })
@@ -18,7 +22,7 @@ function stripAnsiCodes(str: string): string {
 }
 
 export function createHandlerLogger(config: ConfigService, handler: string) {
-  const safeHandler = handler.replace(/[^a-zA-Z0-9-_]/g, '_').toLowerCase()
+  const safeHandler = toSafeHandlerName(handler)
   const logDir = config.get('cron.logDirectory') || path.join(process.cwd(), 'logs', 'handlers')
   const logFile = path.join(logDir, `${safeHandler}.log`)
 
@@ -61,7 +65,7 @@ export function createHandlerLogger(config: ConfigService, handler: string) {
   return {
     log: (msg: string) => log(msg),
     error: (msg: string) => error(msg),
-    close: () => () => {
+    close: () => {
       jump(2)
       stream?.close()
     },

apps/api/src/core/cron/cron.controller.ts

@@ -1,5 +1,5 @@
 
-import { Controller, Get, Res, HttpStatus, Query } from '@nestjs/common'
+import { Controller, Get, Res, HttpStatus, Query, Param, DefaultValuePipe, ParseIntPipe, NotFoundException } from '@nestjs/common'
 import { ApiTags } from '@nestjs/swagger'
 import { CronService } from './cron.service'
 import { Response } from 'express'
@@ -69,10 +69,36 @@ export class CronController {
   })
   @ApiReadResponseDecorator(CronDto)
   public async read(
+    @Param('name') name: string,
     @Res() res: Response,
   ): Promise<Response> {
+    const data = await this.cronService.read(name)
+    if (!data) {
+      throw new NotFoundException(`Cron task <${name}> not found`)
+    }
+
+    return res.json({
+      statusCode: HttpStatus.OK,
+      data,
+    })
+  }
+
+  @Get(':name/logs')
+  @UseRoles({
+    resource: '/core/cron',
+    action: AC_ACTIONS.READ,
+    possession: AC_DEFAULT_POSSESSION,
+  })
+  public async readLogs(
+    @Param('name') name: string,
+    @Query('tail', new DefaultValuePipe(500), ParseIntPipe) tail: number,
+    @Res() res: Response,
+  ): Promise<Response> {
+    const data = await this.cronService.readLogs(name, tail)
+
     return res.json({
       statusCode: HttpStatus.OK,
+      data,
     })
   }
 }

apps/api/src/core/cron/cron.service.ts

@@ -5,6 +5,10 @@ import { CronHooksService } from './cron-hooks.service'
 import { pick } from 'radash'
 import { CronTaskDTO } from './_dto/config-task.dto'
 import { CronJob } from 'cron'
+import path from 'node:path'
+import { existsSync, readFileSync, statSync } from 'node:fs'
+import { ConfigService } from '@nestjs/config'
+import { toSafeHandlerName } from '~/_common/functions/handler-logger'
 
 @Injectable()
 export class CronService {
@@ -13,6 +17,7 @@ export class CronService {
   public constructor(
     private schedulerRegistry: SchedulerRegistry,
     private readonly cronHooksService: CronHooksService,
+    private readonly configService: ConfigService,
   ) {
   }
 
@@ -112,4 +117,55 @@ export class CronService {
       _job,
     }
   }
+
+  public async readLogs(name: string, tail = 500): Promise<{
+    name: string
+    exists: boolean
+    file: string
+    updatedAt: string | null
+    content: string
+  }> {
+    const safeName = toSafeHandlerName(name)
+    const logDir = this.configService.get('cron.logDirectory') || path.join(process.cwd(), 'logs', 'handlers')
+    const logFile = path.join(logDir, `${safeName}.log`)
+
+    if (!existsSync(logFile)) {
+      return {
+        name,
+        exists: false,
+        file: logFile,
+        updatedAt: null,
+        content: '',
+      }
+    }
+
+    const stats = statSync(logFile)
+    const fullContent = readFileSync(logFile, 'utf-8')
+    const boundedTail = Math.min(Math.max(tail || 200, 1), 2_000)
+    const maxLineChars = 4_000
+    const maxContentChars = 200_000
+
+    const tailedLines = fullContent
+      .split('\n')
+      .slice(-boundedTail)
+      .map((line) => {
+        if (line.length <= maxLineChars) {
+          return line
+        }
+        return `${line.slice(0, maxLineChars)} … [line truncated]`
+      })
+
+    let content = tailedLines.join('\n')
+    if (content.length > maxContentChars) {
+      content = `... [output truncated to last ${maxContentChars} characters]\n${content.slice(-maxContentChars)}`
+    }
+
+    return {
+      name,
+      exists: true,
+      file: logFile,
+      updatedAt: stats.mtime.toISOString(),
+      content,
+    }
+  }
 }

apps/web/src/composables/useDebug.ts

@@ -51,12 +51,17 @@ export function useDebug() {
   }
 
   const monacoOptions = computed<Monaco.editor.IStandaloneEditorConstructionOptions>(() => {
+    ;(window as any).MonacoEnvironment = {
+      locale: 'fr'
+    }
+
     return {
       theme: $q.dark.isActive ? 'vs-dark' : 'vs-light',
       readOnly: true,
       minimap: {
         enabled: true,
       },
+      largeFileOptimizations: true,
       scrollBeyondLastColumn: 0,
       scrollBeyondLastLine: false,
     }

apps/web/src/pages/settings/cron.vue

@@ -16,15 +16,49 @@
     )
       template(#top-table)
         sesame-core-pan-filters(:columns='columns' mode='simple' placeholder='Rechercher par nom, description, ...')
-      //template(v-slot:row-actions='{ row }')
-        //q-btn(:to='toPathWithQueries(`/settings/cron/${row.name}`)' color='primary' icon='mdi-eye' size='sm' flat round dense)
+      template(v-slot:row-actions='{ row }')
+        q-btn(
+          :disable='!hasPermission("/core/cron", "read")'
+          color='primary'
+          icon='mdi-file-document-outline'
+          size='sm'
+          flat
+          round
+          dense
+          @click='openLogsModal(row)'
+        )
+          q-tooltip.text-body2.bg-negative.text-white(
+            v-if="!hasPermission('/core/cron', 'read')"
+            anchor="top middle"
+            self="center middle"
+          ) Vous n'avez pas les permissions nécessaires pour effectuer cette action
       template(#body-cell-enabled="props")
         q-td
           q-checkbox(:model-value="props.row.enabled" :disable="true" size="xs")
+  q-dialog(v-model='logsDialog' maximized)
+    q-card.fit.column.no-wrap(style='overflow: hidden;')
+      q-toolbar.bg-info.text-white(bordered dense style='height: 28px; line-height: 28px;')
+        q-toolbar-title Logs de la tâche "{{ selectedCronName }}"
+        q-space
+        q-btn(flat round dense icon='mdi-refresh' :loading='logsLoading' @click='loadCronLogs')
+        q-btn(flat round dense icon='mdi-close' v-close-popup)
+      q-separator
+      q-card-section.col.q-pa-none(ref='logsContainer' style='min-height: 0; overflow: auto;')
+        q-inner-loading(:showing='logsLoading')
+        div.text-center(v-if='!logsLoading && !logsExists').text-grey-7 Aucun fichier de log trouvé pour cette tâche.
+        client-only(v-if='logsExists')
+          MonacoEditor.fit(
+            ref='logsMonacoEditor'
+            :model-value="logsContent || 'Aucun contenu de log.'"
+            :options='logsMonacoOptions'
+            lang='shell'
+            @load='onLogsEditorLoad'
+          )
 </template>
 
 <script lang="ts">
 import type { LocationQueryValue } from 'vue-router'
+import { computed, ref } from 'vue'
 import { NewTargetId } from '~/constants/variables'
 
 export default defineNuxtComponent({
@@ -80,8 +114,32 @@ export default defineNuxtComponent({
   async setup() {
     const { useHttpPaginationOptions, useHttpPaginationReactive } = usePagination()
     const { toPathWithQueries, navigateToTab } = useRouteQueries()
+    const { hasPermission } = useAccessControl()
+    const { monacoOptions } = useDebug()
+
+    const editorEl = useTemplateRef<HTMLDivElement>('logsMonacoEditor')
 
     const paginationOptions = useHttpPaginationOptions()
+    const logsDialog = ref(false)
+    const selectedCronName = ref('')
+    const logsLoading = ref(false)
+    const logsTail = ref(250)
+    const logsTailStep = 250
+    const logsTailMax = 5_000
+    const logsFullyLoaded = ref(false)
+    const logsContent = ref('')
+    const logsExists = ref(false)
+    const logsMonacoEditor = ref<any>(null)
+    const logsMonacoOptions = computed(() => ({
+      ...monacoOptions.value,
+      minimap: { enabled: false },
+      readOnly: true,
+      wordWrap: 'off',
+      scrollBeyondLastLine: false,
+      lineNumbers: 'off',
+      folding: false,
+      glyphMargin: false,
+    }))
 
     const {
       data: cronTasks,
@@ -109,6 +167,19 @@ export default defineNuxtComponent({
       refresh,
       toPathWithQueries,
       navigateToTab,
+      hasPermission,
+      editorEl,
+      logsDialog,
+      selectedCronName,
+      logsLoading,
+      logsTail,
+      logsTailStep,
+      logsTailMax,
+      logsFullyLoaded,
+      logsContent,
+      logsExists,
+      logsMonacoEditor,
+      logsMonacoOptions,
     }
   },
   computed: {
@@ -139,6 +210,74 @@ export default defineNuxtComponent({
       }
       return 'N/A'
     },
+    async openLogsModal(cronTask: any): Promise<void> {
+      this.selectedCronName = cronTask?.name || ''
+      this.logsTail = this.logsTailStep
+      this.logsFullyLoaded = false
+      this.logsDialog = true
+      await this.loadCronLogs()
+    },
+    async loadCronLogs(): Promise<void> {
+      if (!this.selectedCronName) {
+        return
+      }
+
+      this.logsLoading = true
+      try {
+        const response = await this.$http.get(`/core/cron/${encodeURIComponent(this.selectedCronName)}/logs`, {
+          query: {
+            tail: this.logsTail,
+          },
+        })
+        this.logsContent = response?._data?.data?.content || ''
+        this.logsExists = !!response?._data?.data?.exists
+        const lineCount = this.logsContent ? this.logsContent.split('\n').length : 0
+        this.logsFullyLoaded = this.logsTail >= this.logsTailMax || lineCount < this.logsTail
+      } catch (error: any) {
+        this.logsContent = ''
+        this.logsExists = false
+        this.logsFullyLoaded = true
+        this.$q.notify({
+          message: error?.response?._data?.message || 'Impossible de charger les logs de la tâche cron (timeout ou erreur réseau).',
+          color: 'negative',
+          position: 'top-right',
+          icon: 'mdi-alert-circle-outline',
+        })
+      } finally {
+        this.logsLoading = false
+      }
+    },
+    onLogsEditorLoad(editor: any): void {
+      this.logsMonacoEditor = editor
+      const model = editor.getModel()
+      const lineCount = model?.getLineCount() || 1
+      editor.revealLineNearTop(lineCount)
+      editor.onDidScrollChange(async () => {
+        const isAtTop = editor.getScrollTop() <= 0
+        if (!isAtTop || this.logsLoading || this.logsFullyLoaded || !this.logsExists) {
+          return
+        }
+
+        const nextTail = Math.min(this.logsTail + this.logsTailStep, this.logsTailMax)
+        if (nextTail <= this.logsTail) {
+          this.logsFullyLoaded = true
+          return
+        }
+
+        this.logsTail = nextTail
+        const previousModel = editor.getModel()
+        const previousLineCount = previousModel?.getLineCount() || 1
+        const anchorLine = editor.getVisibleRanges()?.[0]?.startLineNumber || 1
+        await this.loadCronLogs()
+        this.$nextTick(() => {
+          const updatedModel = editor.getModel()
+          const updatedLineCount = updatedModel?.getLineCount() || previousLineCount
+          const addedLines = Math.max(updatedLineCount - previousLineCount, 0)
+          const nextAnchorLine = Math.min(anchorLine + addedLines, updatedLineCount)
+          editor.revealLineNearTop(nextAnchorLine)
+        })
+      })
+    },
   },
 })
 </script>