フロント側のログをファイル出力する方法(node.js)

フロント側でのログをファイルに書き出す要件があり、
やり方を調べてみました。

APIやミドルウェアの知見がなく、
間違えがあるかもですが、整理します。

まず、ブラウザの仕様として、フロント側から直接ファイル出力はできないらしい。
なので、フロントからサーバ側にデータを送りつけて、
それを出力するみたいな感じにしました。

サーバ立てるのに、express(node.js)フレームワークを使いました。
/save_logという、エンドポイントを受けたら、
log.txtというファイルを作り、リクエストボディを書き出しますよって感じです。

const express = require("express");
const fs  = require("fs")
const port = 3000

const app = express();
app.use(express.json())

app.post("/save_log", (req, res) => {
  const { log } = req.body;

  fs.appendFile("log.txt", log + "\n", (err) => {
    console.log("エラー", err);
  });
});

app.listen(port, () => {
  console.log(`server is running at localhost:${port}`)
});

フロント側はfetchapiで、エンドポイントにpostを投げる処理になっている。

fetch("http://localhost:3000/save_log", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ log: "entry point for log"}),
})
  .then(response => {
    if (response.ok) {
      console.log("saved log accurately");
    }
  })
    .catch(error => {
      console.error("faild to save log", error);
  });

ここで1つ勘違いしたのは、
サーバ起動して、エンドポイントをブラウザで叩けばデータ送れるだろうと思ってしまったこと。
送れないことに、10秒くらい考えて気づきました。

ブラウザでURLを叩く作業は、GETリクエストなので、
POSTとしては動かないのです。
なので、curlなどで送る必要がある。

curl -X POST http://localhost:3000/save_log \
  -H "Content-Type: application/json" \
  -d '{"log": "This is a test log"}'

curlも少し調べたら、
-Xはリクエストメソッド(post、get)を指定し、
-Hはヘッダーを指定、
-dは、リクエストボディ(データ)ということで一連の流れの基礎を学びました。

仕事で使うときは、APIなりJSONなり、
サーバとフロントのデータ送受信は、必須だなと思いました。