Sentry

Sentry memonitor aplikasi dari backend hingga frontend. TurboJet menyertakan SDK di dalam @repo/monitoring — Anda mengonfigurasi env dan menghubungkan setiap app yang harus melapor.

Buat proyek Sentry

1. Daftar di Sentry dan buat organisasi jika perlu.
2. Buat proyek dengan platform Next.js dan salin DSN.

Aktifkan lewat environment

Tambahkan ke .env root (lihat Environment):

NEXT_PUBLIC_ENABLE_SENTRY=true
NEXT_PUBLIC_SENTRY_DSN=https://…@….ingest.sentry.io/…
# Opsional — upload source map saat build
SENTRY_AUTH_TOKEN=

Sentry aktif hanya jika features.sentry menyala (NEXT_PUBLIC_ENABLE_SENTRY !== "false") dan NEXT_PUBLIC_SENTRY_DSN tidak kosong (IS_SENTRY_ACTIVE di @repo/monitoring).

Buat auth token di dashboard Sentry di Settings → Auth Tokens jika Anda ingin source map diunggah saat build.

Sesuaikan opsi build

Edit org/project (dan opsi lain) di packages/monitoring/src/next-config.ts. Default saat ini:

• org: hilmirfs-org
• project: javascript-nextjs
• tunnelRoute: /monitoring

withMonitoring membungkus withSentryConfig dan mengembalikan config Next apa adanya saat Sentry tidak aktif.

Hubungkan sebuah app

Ulangi untuk apps/marketing dan/atau apps/docs.

1. Tambah dependency

Tambahkan @repo/monitoring sebagai dependency workspace app. Sertakan di transpilePackages di next.config app itu jika package workspace lain sudah terdaftar di sana.

2. Bungkus config Next.js

Contoh marketing (susun dengan plugin yang ada; urutan penting):

import { withMonitoring } from "@repo/monitoring/next-config";

export default withMonitoring(withNextIntl(nextConfig));

Untuk docs, bungkus apa pun yang sudah Anda ekspor (misalnya withMDX(...)).

3. Instrumentasi server / edge

Buat src/instrumentation.ts:

import { initSentry } from "@repo/monitoring/config";
import { captureRequestError } from "@repo/monitoring/instrumentation";

export async function register() {
	if (process.env.NEXT_RUNTIME === "nodejs") {
		initSentry("server");
	}

	if (process.env.NEXT_RUNTIME === "edge") {
		initSentry("edge");
	}
}

export const onRequestError = captureRequestError;

4. Instrumentasi client

Di instrumentation-client.ts yang sudah ada (PostHog sudah di sini), init juga Sentry:

import { initPostHogClient } from "@repo/analytics/client";
import { initSentryClient } from "@repo/monitoring/client";

initPostHogClient();
initSentryClient();

Jangan mengimpor @repo/monitoring/client dari edge/server instrumentation.

5. Global error handler

Di src/app/global-error.tsx, laporkan error ke Sentry:

"use client";

import * as Sentry from "@sentry/nextjs";
import { useEffect } from "react";

export default function GlobalError({
	error,
}: {
	error: Error & { digest?: string };
}) {
	useEffect(() => {
		Sentry.captureException(error);
	}, [error]);

	// ... UI yang sudah ada
}

6. Kecualikan tunnel di proxy.ts

Tunnel Sentry adalah /monitoring. Perluas matcher proxy agar middleware i18n tidak menulis ulang path itu:

export const config = {
	matcher: [
		"/((?!api|monitoring|_next|_vercel|.*\\..*).*)",
	],
};

Capture dari kode app

Gunakan helper dari @repo/monitoring saat Anda butuh konteks lebih kaya:

import { addException, setUser } from "@repo/monitoring";

setUser({ user: { id: user.id, email: user.email } });

addException({
	category: "api",
	message: "Checkout failed",
	error,
	context: { orderId },
});

Bacaan lanjutan

• Setup manual Sentry Next.js
• Ringkasan Monitoring