التثبيت حسب المنصة

Next.js وReact

التثبيت npm install @blipit/nextjs

تمنحك @blipit/nextjs أخطاء المتصفح ومؤشرات الويب الحيوية وإعادة تشغيل الجلسات من مكوّن واحد في تخطيطك، وأخطاء مكوّنات الخادم ومعالجات المسارات وإجراءات الخادم من سطر واحد في instrumentation.ts. تستخدم تطبيقات React العادية @blipit/browser.

1التثبيت

npm install @blipit/nextjs

2جهة المتصفح

أضف المكوّن مرة واحدة في التخطيط الجذر. يستخدم المفتاح العام، وهو آمن في كود المتصفح؛ ضعه في NEXT_PUBLIC_BLIPIT_KEY.

app/layout.tsx

import { Blipit } from "@blipit/nextjs";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Blipit
          publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!}
          environment={process.env.NEXT_PUBLIC_VERCEL_ENV ?? "development"}
          release={process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA}
          replay={{ onErrorSampleRate: 1 }}
        />
        {children}
      </body>
    </html>
  );
}

3جهة الخادم

يستدعي Next.js 15 وما بعده onRequestError لأخطاء مكوّنات الخادم ومعالجات المسارات وإجراءات الخادم. سطر واحد يربطه بـ Blipit. اضبط BLIPIT_SECRET_KEY في بيئة الخادم، وليس أبدًا كـ NEXT_PUBLIC_.

instrumentation.ts

export { captureRequestError as onRequestError } from "@blipit/nextjs/server";

4سياسة أمان المحتوى

إذا كان تطبيقك يضبط CSP، فأضف https://in.blipit.io إلى connect-src. يُحزم SDK مع كودك، لذا لا يحتاج script-src إلى مضيف جديد ولا إلى nonce.

5خرائط المصدر (اختياري)

لتعرض الـ stack traces مصدرك بدلًا من الحزمة المصغّرة، ارفع الخرائط لكل إصدار من خطوة البناء لديك.

BLIPIT_KEY=<secret key> npx @blipit/cli sourcemaps upload .next/static --release "$VERCEL_GIT_COMMIT_SHA"

6تحقق من أنه يعمل

أضف زرًا يرمي خطأً، أو شغّل هذا في console المتصفح. افتح المشكلات في app.blipit.io. يظهر الحدث الأول خلال بضع ثوانٍ، مجمّعًا في مشكلة، ويتلقى المسؤولون بريدًا إلكترونيًا.

import { captureMessage } from "@blipit/nextjs";
captureMessage("Hello from Next.js");

من المفيد معرفته

React عادي بدون Next.js: npm install @blipit/browser واستدعِ Blipit.init قبل العرض؛ راجع «أي موقع إلكتروني».
تأخذ environment وrelease افتراضيًا قيمتي VERCEL_ENV وVERCEL_GIT_COMMIT_SHA على الخادم عند تركهما.
هل تستخدم Sentry SDK بالفعل؟ يعمل @sentry/nextjs دون تغيير مع DSN بقيمة https://<public key>@in.blipit.io/<project id>؛ تخطَّ withSentryConfig الذي يرفع خرائط المصدر إلى Sentry.

هل واجهتك مشكلة؟ راسل support@blipit.io. المفاتيح وDSN الدقيق لكل مشروع موجودة تحت مفاتيح API في app.blipit.io.