Closed7

Next.js on Cloudflare Pages のエラー監視として Baselime を試す

9sako69sako6

Cloudflare Pages & Next.js 構成のアプリケーションに Baselime によるエラーモニタリングを入れるチャレンジ。

https://baselime.io/docs/sending-data/platforms/cloudflare/pages/

現在無料プランのみ。データ保持期間は7日間。記録できるイベント数は月10億回まで。

環境

  • Next.js v14.2.7
  • @baselime/edge-logger@0.4.2
9sako69sako6

Add service で監視対象のアプリを追加した。

9sako69sako6

ドキュメントに書かれた例を参考にロガーを作った。

import "server-only";
import { BaselimeLogger } from "@baselime/edge-logger";
import { v4 as uuidv4 } from "uuid";

type Params = {
  message: string;
  namespace: string;
};

class Logger {
  private readonly service = "xxx-web";
  private readonly dataset = "cloudflare";
  private readonly apiKey = process.env.BASELIME_API_KEY!;
  private readonly isLocalDev = process.env.NODE_ENV === "development";

  private createLogger(namespace: string): BaselimeLogger {
    return new BaselimeLogger({
      service: this.service,
      namespace,
      dataset: this.dataset,
      apiKey: this.apiKey,
      ctx: { waitUntil: () => {}, passThroughOnException: () => {} },
      requestId: uuidv4(),
      isLocalDev: this.isLocalDev,
    });
  }

  private async log(
    level: "info" | "warn" | "error",
    { namespace, message }: Params,
  ) {
    const logger = this.createLogger(namespace);
    logger[level](message);
    await logger.flush();
  }

  public info(params: Params) {
    return this.log("info", params);
  }

  public error(params: Params) {
    return this.log("error", params);
  }

  public warn(params: Params) {
    return this.log("warn", params);
  }
}

export const logger = new Logger();

9sako69sako6

適当なサーバーサイドでロガーを呼び出す。

await logger.error(`This is test error message`);
9sako69sako6

Cloudflare Pages にデプロイしても動いた。素晴らしい。

このスクラップは19日前にクローズされました