Логване на информация с Web Workers от Vue 3 към сървъра

Web Workers са малки, но мощни скриптове, които работят на 'заден план' в браузъра. И понеже не пречат на рендирането на приложението Ви, може да ги товарите с разни задачи, които да изпълняват.

Ползвам Web Workers по два начина - В първия не връщат информация обратно към приложението и след свършване на работа се самоунищожават. При втория връщат резултат и тогава приложението се грижи, дали и кога Web Worker-а да се унищожи. Тук ще разгледаме само първия начин на работа, а за втория ще напиша отделна статия.

LOG WORKER

Най-често използвам първия начин на работа Web Workers за логване на информацията от приложението към сървъра, но не само.

Създавам директория, която се казва workers и в нея създавам файл - в нашия случай LOGS.ts. Файла винаги е с главни букви, за да го разпознавам лесно при импорта и е с говоримо име. С времето съм възприел, че всеки вид задача, която изпълнява даден Web Worker, трябва да е в отделен файл.

// workers/LOGS.ts

import axios from "axios";

self.onmessage = async (event) => {
  const { message, code, type } = event.data;
  await axios.post("/api/log", { type: `${message}`, statusCode: code }, { contentType: "text/plain" });

  /**
   * Log Worker does not return data,
   * so we close the worker after the POST request,
   * even if there is an error with writing to the server,
   * the worker will close.
   */
  self.close();
};

За да използвате Web Workers във Вашето приложение, много трябва да внимавате с импорта му. За Vue 3 с Composition API и <script lang='ts' setup> има специална директива worker, подобна на query string в адреса към файла.

import LOGS from "~/workers/LOGS?worker";

Използването е лесно и най-често го извиквам в try-catch блок, за да запиша грешките на сървъра.

// criticalJob.vue
<script lang='ts' setup>
import LOGS from "~/workers/LOGS?worker";

const doSomeCriticalJob = async (id: string) => {
  try {
    // await do some critical job
  } catch (error) {
    const logsWorker = new LOGS();
    logsWorker.postMessage({ message: `Critical Job with ID: ${id} got error: ${error}`, code: 500, type: "error" });
  }
};
</script>

<template></template>