ثبّت Blipit

اختر ما بُني به تطبيقك. ستحصل على الخطوات الدقيقة من دليله، وبنقرة واحدة تراها في app.blipit.io ومفاتيحك معبّأة فيها.

1اختر التقنية

2خطوات أي موقع إلكتروني

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

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

1احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

2عبر npm

استدعِ init مرة واحدة في ملف الدخول، قبل عرض التطبيق، بالمفتاح العام. مع Vite (React وVue وSvelte)، احتفظ بالمفتاح في .env باسم VITE_BLIPIT_KEY؛ فلا تصل إلى المتصفح إلا متغيرات VITE_، ولا يقرأ خادم التطوير ملف .env إلا عند بدء تشغيله.

sh
npm install @blipit/browser
.env
VITE_BLIPIT_KEY=blipit_pk_your_public_key
src/main.js
import * as Blipit from "@blipit/browser";

Blipit.init({
  key: import.meta.env.VITE_BLIPIT_KEY,
  environment: import.meta.env.MODE,
  release: "2026.09.28",
  replay: { onErrorSampleRate: 1 },
});

3بدون أداة حزم: وسم script واحد

الصق هذا في <head> كل صفحة، أو في خانة الكود المخصص في منصتك، مع كتابة مفتاحك العام فيه. لا بأس بذلك: فالمفتاح العام لا يستطيع سوى إرسال الأحداث.

html
<script src="https://blipit.io/sdk/blipit.js"></script>
<script>
  Blipit.init({ key: "blipit_pk_your_public_key", environment: "production", release: "2026.09.28", replay: { onErrorSampleRate: 1 } });
</script>

4أبقِ المفاتيح خارج git

احتفظ بالمفاتيح في متغيرات البيئة أو في الإعدادات السرية لمنصة الاستضافة، وليس أبدًا في كود تودعه في المستودع، وأضف ملفات .env إلى .gitignore. وجود مفتاح عام في صفحة ويب أمر طبيعي. إذا انتهى مفتاح سري يومًا في git أو صفحة عامة أو لقطة شاشة أو محادثة، فافتح «مفاتيح API»، واضغط «إنشاء مفتاح سري جديد»، والصق المفتاح الجديد في كل مكان كان يُستخدم فيه القديم: يتوقف المفتاح القديم عن العمل فورًا.

.gitignore
.env
.env.local
.env.*.local

5أخبر Blipit من هو المستخدم (اختياري)

بعد تسجيل الدخول، أرفق المستخدم لتُظهر المشكلات من تأثر ويمكن العثور على إعادات التشغيل حسب المستخدم.

js
Blipit.setUser({ id: "42", email: "ana@example.com" });

6React وVue وAngular وSvelte: أبلغ عن الأخطاء الملتقطة

تلتقط أطر العمل الأخطاء داخل المكوّنات قبل أن يراها المتصفح، لذا مرّرها إلى Blipit أيضًا. أما الأخطاء غير الملتقطة في أي مكان آخر فيُبلَّغ عنها تلقائيًا.

React 19 (src/main.tsx)
createRoot(document.getElementById("root")!, {
  onCaughtError: (error) => Blipit.captureException(error),
  onUncaughtError: (error) => Blipit.captureException(error),
}).render(<App />);
أو، React 18 وما قبله: حدّ أخطاء (error boundary)
class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { failed: boolean }> {
  state = { failed: false };
  static getDerivedStateFromError() {
    return { failed: true };
  }
  componentDidCatch(error: Error) {
    Blipit.captureException(error);
  }
  render() {
    return this.state.failed ? <p>Something went wrong.</p> : this.props.children;
  }
}
Vue (src/main.ts)
const app = createApp(App);
app.config.errorHandler = (err) => Blipit.captureException(err);
app.mount("#app");
Angular (app.config.ts)
import { ErrorHandler } from "@angular/core";
import * as Blipit from "@blipit/browser";

class BlipitErrorHandler implements ErrorHandler {
  handleError(error: unknown) {
    Blipit.captureException(error);
    console.error(error);
  }
}

export const appConfig = { providers: [{ provide: ErrorHandler, useClass: BlipitErrorHandler }] };
SvelteKit (src/hooks.client.ts)
import * as Blipit from "@blipit/browser";
import type { HandleClientError } from "@sveltejs/kit";

export const handleError: HandleClientError = ({ error }) => {
  Blipit.captureException(error);
};

7بلاغات الأخطاء: زر «أبلغ عن خطأ»

بمجرد أن تبدأ SDK بمفتاحك العام، يظهر زر «أبلغ عن خطأ» في الزاوية السفلية اليمنى من كل صفحة، بلغة الزائر. تفتح النقرة نافذة الإبلاغ: لقطة شاشة للصفحة لوضع العلامات عليها، وأداة لاختيار عنصر، وتسجيل اختياري للشاشة، وعنوان ووصف. غيّر الموضع والشكل والنص واللون واختصار لوحة المفاتيح في الكود كما هو موضح أدناه، أو لكل المواقع دفعة واحدة في app.blipit.io، «إعدادات المشروع»، «أداة تقارير الأخطاء»؛ والأولوية لخيارات الكود. يعرض دليل زر الإبلاغ عن الأخطاء كل خيار مع لقطات شاشة وعرض تجريبي مباشر.

js
Blipit.init({
  key: import.meta.env.VITE_BLIPIT_KEY,
  feedbackWidget: {
    position: "bottom-left",
    style: "icon",
    text: "Report Issue",
    color: "#E11D48",
    shortcut: "ctrl+shift+b",
  },
});
زر «أبلغ عن خطأ» الافتراضي، أسفل اليمين.
زر «أبلغ عن خطأ» الافتراضي، أسفل اليمين.
نافذة الإبلاغ: لقطة شاشة عليها علامات، والعنوان، وما حدث.
نافذة الإبلاغ: لقطة شاشة عليها علامات، والعنوان، وما حدث.

8فتح نافذة الإبلاغ من زرك الخاص

لوضع زر أبلغ عن خطأ في ترويسة موقعك أو قائمتك، استخدم الزر الرسمي: تُرجع Blipit.reportButton() زرًا جاهزًا فيه أيقونة Blipit وعبارة أبلغ عن خطأ بلغة الزائر، ويمكن لتطبيقات React عرض <BlipitReportButton /> من @blipit/nextjs/react (npm install @blipit/nextjs). تفضّل تصميمك الخاص؟ استدعِ openReport() من أي معالج نقر، أو attachReport(element) لربط عنصر موجود بالفعل. في الحالتين تُفتح نافذة الإبلاغ تمامًا كما تُفتح من الزر العائم. لا يجوز استخدام أيقونة Blipit إلا بجانب عبارة أبلغ عن خطأ، كما يظهر في الزر الرسمي.

الزر الرسمي، HTML عادي
<nav id="help-menu"></nav>
<script>
  document.getElementById("help-menu").append(Blipit.reportButton());
</script>
الزر الرسمي، React
import { BlipitReportButton } from "@blipit/nextjs/react";

export function Header() {
  return (
    <header>
      <a href="/">Acme</a>
      <BlipitReportButton variant="outline" size="sm" />
    </header>
  );
}
الزر الرسمي، Vue
<script setup>
import { onMounted, ref } from "vue";
import { reportButton } from "@blipit/browser";

const slot = ref();
onMounted(() => slot.value.append(reportButton({ variant: "outline", size: "sm" })));
</script>

<template>
  <span ref="slot"></span>
</template>
HTML عادي
<button id="report-issue">Report Issue</button>
<script>
  Blipit.attachReport(document.getElementById("report-issue"));
</script>

<button onclick="Blipit.openReport()">Report Issue</button>
React
import { openReport } from "@blipit/browser";

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}
Vue
<script setup>
import { openReport } from "@blipit/browser";
</script>

<template>
  <button @click="openReport()">Report Issue</button>
</template>
زر أبلغ عن خطأ الرسمي في ترويسة موقع.
زر أبلغ عن خطأ الرسمي في ترويسة موقع.
زر Report Issue مخصص في ترويسة الصفحة يفتح نافذة الإبلاغ في Blipit.
زر Report Issue مخصص في ترويسة الصفحة يفتح نافذة الإبلاغ في Blipit.

9إخفاء الزر الافتراضي

للاحتفاظ بزرك الخاص فقط، أوقف الزر العائم باستخدام feedbackWidget: false في الكود (feedbackWidget={false} على <Blipit />)، أو أوقف «إظهار زر الإبلاغ عن الأخطاء» في إعدادات «أداة تقارير الأخطاء» للمشروع لإخفائه في كل موقع يستخدم المفتاح. تستمر openReport() وattachReport() في العمل في الحالتين.

js
Blipit.init({ key: import.meta.env.VITE_BLIPIT_KEY, feedbackWidget: false });

10املأ نافذة الإبلاغ مسبقًا وأضف السياق

استدعِ setUser بعد تسجيل الدخول: يُملأ اسم المُبلِّغ وبريده تلقائيًا، ويصله بريد عندما ترد أو تغيّر الحالة. تضيف setReportMetadata حقولك الخاصة، مثل الخطة أو حجم سلة التسوق، إلى كل بلاغ؛ وتعمل عند إرسال البلاغ، لذا تكون القيم محدّثة.

js
Blipit.setUser({ id: "42", username: "Ana Lima", email: "ana@example.com" });

Blipit.setReportMetadata(() => ({ plan: "pro", cartItems: cart.length }));

11كل الخيارات والدوال

  • key: المفتاح العام (blipit_pk_). مطلوب.
  • environment وrelease: يظهران على كل حدث؛ ويتيح release اكتشاف التراجعات وخرائط المصدر. القيمة الافتراضية لـ environment هي production.
  • debug: true يسجّل ما تفعله SDK في وحدة التحكم، في أسطر تبدأ بـ [blipit].
  • تتحكم sampleRate (من 0 إلى 1) وignoreErrors (نصوص أو أنماط) وbeforeSend (عدّل حدثًا، أو أرجع null لإسقاطه) في ما يُرسل. يُسقط autoMuteExtensions (مفعّل افتراضيًا) الأخطاء القادمة من إضافات المتصفح فقط.
  • webVitals (مفعّل افتراضيًا)، وreplay ({ sessionSampleRate, onErrorSampleRate })، وautoSessionTracking (معدلات الخلو من الأعطال، ويحتاج إلى release).
  • feedbackWidget: false يخفي زر «أبلغ عن خطأ»، أو يغيّره كائن يحتوي position وstyle وtext وcolor وshortcut. يحدد theme: "light" أو "dark" أو "auto" مظهر نافذة الإبلاغ.
  • يملأ user ({ id, name, email }) وcompany (اسم أو { id, name }) نافذة الإبلاغ ويُضافان إلى البلاغات.
  • endpoint: فقط لخادم استقبال مستضاف ذاتيًا؛ القيمة الافتراضية https://in.blipit.io/api/v1/events.
  • الدوال: captureException(error)، وcaptureMessage(text, level)، وsetUser، وsetTag(key, value)، وaddBreadcrumb({ category, message })، وopenReport()، وattachReport(element)، وreportButton(options)، وupdateWidget(options)، وsetReportMetadata(fn)، وshowFeedback()، وflush() التي تُرجع promise بعد إرسال الأحداث المنتظرة في الطابور.
  • تصل تغييرات إعدادات الأداة في لوحة التحكم إلى المتصفحات خلال ساعة، لأن SDK تحتفظ بها طوال هذه المدة؛ وتعرض النافذة الخاصة التغيير فورًا.

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

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

js
Blipit.captureMessage("Hello from " + location.host, "info");

13إذا لم يظهر الزر أو الأحداث

  • افتح وحدة تحكم المتصفح وابحث عن الأسطر التي تبدأ بـ [blipit]. فعّل debug (debug: true في init، أو debug على <Blipit />) لترى هل عُرض الزر، أم أُوقف في الكود، أم أخفاه إعداد المشروع.
  • لا يرسل Next.js إلى المتصفح إلا المتغيرات التي تبدأ أسماؤها بـ NEXT_PUBLIC_، لذا استخدم NEXT_PUBLIC_BLIPIT_KEY. ولا يرسل Vite إلا متغيرات VITE_، لذا استخدم VITE_BLIPIT_KEY. مع أي اسم آخر يكون المفتاح فارغًا في المتصفح ولا يبدأ Blipit.
  • أعد تشغيل خادم التطوير بعد إضافة .env أو .env.local أو تغييرهما، فهو لا يقرؤهما إلا عند بدء تشغيله.
  • في Vercel أو أي منصة استضافة أخرى، أضف المتغير نفسه في متغيرات البيئة للمشروع وانشر مجددًا. تُكتب قيم NEXT_PUBLIC_ وVITE_ داخل البناء، لذا لا يرى النشر الجاري أبدًا قيمة أُضيفت لاحقًا.
  • استخدم المفتاح العام (blipit_pk_). يُرفض المفتاح السري (blipit_sk_) في المتصفح مع خطأ في وحدة التحكم؛ وإذا ظهر مفتاح سري في صفحة يومًا، فأنشئ مفتاحًا سريًا جديدًا.
  • في Next.js، يوضع <Blipit /> في ملف app/layout.tsx الجذري (أو pages/_app.tsx) ليعمل في كل صفحة. في التطبيقات الأخرى، استدعِ init مرة واحدة في ملف الدخول، قبل عرض التطبيق.
  • يجب أن يكون «إظهار زر الإبلاغ عن الأخطاء» مفعّلًا في app.blipit.io، «إعدادات المشروع»، «أداة تقارير الأخطاء»، ويجب ألا يمرّر كودك feedbackWidget: false. تحتفظ SDK بإعدادات المشروع لمدة تصل إلى ساعة، لذا اختبر أي تغيير في نافذة خاصة.
  • قد تحظر أدوات حظر الإعلانات وإضافات الخصوصية in.blipit.io. جرّب نافذة خاصة مع إيقاف الإضافات.
  • إذا كان موقعك يرسل Content Security Policy، فاسمح بـ script-src https://blipit.io وبـ connect-src https://in.blipit.io وبـ img-src data: وبـ media-src blob:. يُحمَّل محرر نافذة الإبلاغ من blipit.io/sdk عند أول نقرة، وتُرسم لقطة الشاشة من صورة data:، وتُرفع تسجيلات الشاشة أيضًا إلى in.blipit.io. عند تفعيل debug تذكر وحدة التحكم متى منعت السياسة لقطة الشاشة. لتسجيل الصوت مع تسجيل الشاشة، يجب أن تسمح ترويسة Permissions-Policy في موقعك بـ microphone=(self)، وبـ display-capture=(self) لتسجيل الشاشة؛ ومع microphone=() تعمل التسجيلات دون صوت.
  • تحقق من الإصدار المثبّت باستخدام npm ls @blipit/browser @blipit/nextjs (أو pnpm list @blipit/browser @blipit/nextjs) وقارنه بسجل التغييرات. ينتظر pnpm 11 يومًا قبل أن يثبّت إصدارًا جديدًا (minimum-release-age)، لذلك يثبّت pnpm add في يوم الإصدار الإصدار السابق دون أي تنبيه. للحصول على الإصدار الجديد فورًا: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
  • ما زلت عالقًا؟ راسل support@blipit.io مع أسطر [blipit] من وحدة التحكم.

افتح دليل أي موقع إلكتروني كاملاً

2خطوات Next.js وReact

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

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

1التثبيت

sh
npm install @blipit/nextjs

2احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

3ضع المفاتيح في .env.local

أنشئ ملف .env.local في جذر المشروع يحتوي المفتاح العام للمتصفح، والمفتاح السري للخادم إذا كنت تستخدم جانب الخادم أدناه. لا تصل إلى المتصفح إلا الأسماء التي تبدأ بـ NEXT_PUBLIC_، لذا لا تمنح المفتاح السري هذه البادئة أبدًا. أعد تشغيل npm run dev بعد حفظ الملف. للإنتاج، أضف المتغيرات نفسها في منصة الاستضافة (في Vercel: Project، Settings، Environment Variables، لكل من Production وPreview) وانشر مجددًا: تُكتب قيم NEXT_PUBLIC_ داخل البناء، لذا فإن أي نشر تم قبل إضافتها يحمل مفتاحًا فارغًا.

.env.local
NEXT_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

4جهة المتصفح

أضف المكوّن مرة واحدة في التخطيط الجذري. يقرأ المفتاح العام من 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>
  );
}

5جهة الخادم

يستدعي Next.js 15 وما بعده onRequestError لأخطاء مكوّنات الخادم ومعالجات المسارات وإجراءات الخادم. سطر واحد في instrumentation.ts يربطه بـ Blipit. بدءًا من @blipit/nextjs 0.2.1 يعمل السطر نفسه أيضًا في التطبيقات التي تحتوي على middleware.ts وفي مسارات Edge (runtime = "edge"): يُبنى التطبيق، وتُبلَّغ أخطاء middleware وEdge أيضًا. لا يحتوي Next.js 14 على onRequestError، لذا غلّف كل معالج مسار وكل إجراء خادم بـ withBlipit كما في المثال الثاني: فهو يبلّغ عن الخطأ ثم يرميه من جديد، ويتجاهل عمليات إعادة التوجيه وnotFound(). اضبط BLIPIT_SECRET_KEY في بيئة الخادم، وليس أبدًا كـ NEXT_PUBLIC_.

instrumentation.ts
export { captureRequestError as onRequestError } from "@blipit/nextjs/server";
app/api/orders/route.ts
import { withBlipit } from "@blipit/nextjs/server";

export const GET = withBlipit(async (request: Request) => {
  return Response.json(await loadOrders());
});

6الخدمات المرتبطة وصحة الخادم

بدءًا من @blipit/nextjs 0.3، صدّر register أيضًا ليبدأ Blipit عند تشغيل الخادم. عندها يسجل طلبات قاعدة البيانات والخدمات الخارجية في صفحة الخدمات المرتبطة، والمعالج والذاكرة وحلقة الأحداث للخادم في صفحة صحة الخوادم. لا يفعل شيئًا في بيئة Edge. على Vercel قد لا يرى register الطلب الوارد: منذ @blipit/nextjs 0.4، غلّف معالجات المسارات وإجراءات الخادم بـ withBlipit فيصبح كل منها طلباً في صفحة Pulse مع استدعاءاته لقاعدة البيانات والخدمات الخارجية، ويُرسل بعد الرد دون أن يؤخره.

instrumentation.ts
export { captureRequestError as onRequestError, register } from "@blipit/nextjs/server";
app/api/orders/route.ts
import { withBlipit } from "@blipit/nextjs/server";

export const GET = withBlipit(async (request: Request) => Response.json(await loadOrders()));

7الأخطاء التي يلتقطها error.tsx

الأخطاء التي تلتقطها حدود الأخطاء في error.tsx أو global-error.tsx لا تصل أبدًا إلى معالج أخطاء المتصفح، لذا أبلغ عنها من داخل حدود الخطأ. كلا الملفين مكوّنا عميل (client components).

app/error.tsx
"use client";

import { useEffect } from "react";
import { captureException } from "@blipit/nextjs";

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    captureException(error);
  }, [error]);
  return (
    <div>
      <p>Something went wrong.</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}
app/global-error.tsx
"use client";

import { useEffect } from "react";
import { captureException } from "@blipit/nextjs";

export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
  useEffect(() => {
    captureException(error);
  }, [error]);
  return (
    <html>
      <body>
        <p>Something went wrong.</p>
      </body>
    </html>
  );
}

8أبقِ المفاتيح خارج git

احتفظ بالمفاتيح في متغيرات البيئة أو في الإعدادات السرية لمنصة الاستضافة، وليس أبدًا في كود تودعه في المستودع، وأضف ملفات .env إلى .gitignore. وجود مفتاح عام في صفحة ويب أمر طبيعي. إذا انتهى مفتاح سري يومًا في git أو صفحة عامة أو لقطة شاشة أو محادثة، فافتح «مفاتيح API»، واضغط «إنشاء مفتاح سري جديد»، والصق المفتاح الجديد في كل مكان كان يُستخدم فيه القديم: يتوقف المفتاح القديم عن العمل فورًا.

.gitignore
.env
.env.local
.env.*.local

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

إذا كان موقعك يرسل Content Security Policy، فاسمح بـ script-src https://blipit.io (وسم السكربت، ومحرر نافذة الإبلاغ وإضافة إعادة التشغيل اللذان يُحمَّلان من blipit.io/sdk/<version>/ عند أول استخدام)، وبـ connect-src https://in.blipit.io (تذهب الأحداث ولقطات الشاشة وتسجيلات الشاشة كلها إلى in.blipit.io)، وبـ img-src data: (تُرسم لقطة الشاشة من صورة للصفحة)، وبـ media-src blob: (تُعرض التسجيلات داخل نافذة الإبلاغ). تعيد لقطة الشاشة تحميل صور الصفحة وخطوطها، لذا أضف نطاقاتها إلى connect-src أيضًا، وإلا ظهرت فارغة. لا حاجة لأي تغيير في style-src. مع وسم السكربت، استدعِ Blipit.init من ملف .js خاص بك أو أعطِ السكربت المضمّن nonce، لأن السياسة الصارمة تمنع السكربتات المضمّنة. لتسجيل الصوت مع تسجيل الشاشة، يجب أن تسمح ترويسة Permissions-Policy في موقعك بـ microphone=(self)، وبـ display-capture=(self) لتسجيل الشاشة؛ ومع microphone=() تعمل التسجيلات دون صوت.

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

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

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

11بلاغات الأخطاء: زر «أبلغ عن خطأ»

بمجرد أن تبدأ SDK بمفتاحك العام، يظهر زر «أبلغ عن خطأ» في الزاوية السفلية اليمنى من كل صفحة، بلغة الزائر. تفتح النقرة نافذة الإبلاغ: لقطة شاشة للصفحة لوضع العلامات عليها، وأداة لاختيار عنصر، وتسجيل اختياري للشاشة، وعنوان ووصف. غيّر الموضع والشكل والنص واللون واختصار لوحة المفاتيح في الكود كما هو موضح أدناه، أو لكل المواقع دفعة واحدة في app.blipit.io، «إعدادات المشروع»، «أداة تقارير الأخطاء»؛ والأولوية لخيارات الكود. يعرض دليل زر الإبلاغ عن الأخطاء كل خيار مع لقطات شاشة وعرض تجريبي مباشر.

app/layout.tsx
<Blipit
  publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!}
  feedbackWidget={{
    position: "bottom-left",
    style: "icon",
    text: "Report Issue",
    color: "#E11D48",
    shortcut: "ctrl+shift+b",
  }}
/>
زر «أبلغ عن خطأ» الافتراضي، أسفل اليمين.
زر «أبلغ عن خطأ» الافتراضي، أسفل اليمين.
نافذة الإبلاغ: لقطة شاشة عليها علامات، والعنوان، وما حدث.
نافذة الإبلاغ: لقطة شاشة عليها علامات، والعنوان، وما حدث.

12فتح نافذة الإبلاغ من زرك الخاص

ضع الزر الرسمي في أي مكان باستخدام <BlipitReportButton />، حتى في مكوّنات الخادم: يعرض أيقونة Blipit وعبارة أبلغ عن خطأ بلغة الزائر ويفتح نافذة الإبلاغ. تفضّل تصميمك الخاص؟ يجب أن يكون المكوّن الذي يستدعي openReport مكوّن عميل، لذا ضع "use client" في أعلى ملفه. يجب أن يكون <Blipit /> موجودًا بالفعل في app/layout.tsx. تستورد تطبيقات React التي لا تستخدم Next.js الزر من @blipit/nextjs/react وopenReport من @blipit/browser.

app/header.tsx
import { BlipitReportButton } from "@blipit/nextjs";

export function Header() {
  return (
    <header>
      <a href="/">Acme</a>
      <BlipitReportButton />
    </header>
  );
}
React بدون Next.js
import { BlipitReportButton } from "@blipit/nextjs/react";

<BlipitReportButton variant="outline" size="sm" />
app/report-issue.tsx
"use client";

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

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}
React (@blipit/browser)
import { openReport } from "@blipit/browser";

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}
زر أبلغ عن خطأ الرسمي في ترويسة موقع.
زر أبلغ عن خطأ الرسمي في ترويسة موقع.
تطبيق Next.js: زر Report Issue المخصص في الترويسة فتح نافذة الإبلاغ في Blipit.
تطبيق Next.js: زر Report Issue المخصص في الترويسة فتح نافذة الإبلاغ في Blipit.

13إخفاء الزر الافتراضي

للاحتفاظ بزرك الخاص فقط، أوقف الزر العائم باستخدام feedbackWidget: false في الكود (feedbackWidget={false} على <Blipit />)، أو أوقف «إظهار زر الإبلاغ عن الأخطاء» في إعدادات «أداة تقارير الأخطاء» للمشروع لإخفائه في كل موقع يستخدم المفتاح. تستمر openReport() وattachReport() في العمل في الحالتين.

app/layout.tsx
<Blipit publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!} feedbackWidget={false} />

14املأ نافذة الإبلاغ مسبقًا وأضف السياق

استدعِ setUser بعد تسجيل الدخول: يُملأ اسم المُبلِّغ وبريده تلقائيًا، ويصله بريد عندما ترد أو تغيّر الحالة. تضيف setReportMetadata حقولك الخاصة، مثل الخطة أو حجم سلة التسوق، إلى كل بلاغ؛ وتعمل عند إرسال البلاغ، لذا تكون القيم محدّثة.

app/blipit-user.tsx
"use client";

import { useEffect } from "react";
import { setReportMetadata, setUser } from "@blipit/nextjs";

export function BlipitUser({ user }: { user: { id: string; name: string; email: string; plan: string } }) {
  useEffect(() => {
    setUser({ id: user.id, username: user.name, email: user.email });
    setReportMetadata(() => ({ plan: user.plan }));
  }, [user]);
  return null;
}

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

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

tsx
"use client";
import { captureMessage } from "@blipit/nextjs";

export function TestBlipit() {
  return <button onClick={() => captureMessage("Hello from Next.js")}>Send a test event</button>;
}

16إذا لم يظهر الزر أو الأحداث

  • افتح وحدة تحكم المتصفح وابحث عن الأسطر التي تبدأ بـ [blipit]. فعّل debug (debug: true في init، أو debug على <Blipit />) لترى هل عُرض الزر، أم أُوقف في الكود، أم أخفاه إعداد المشروع.
  • لا يرسل Next.js إلى المتصفح إلا المتغيرات التي تبدأ أسماؤها بـ NEXT_PUBLIC_، لذا استخدم NEXT_PUBLIC_BLIPIT_KEY. ولا يرسل Vite إلا متغيرات VITE_، لذا استخدم VITE_BLIPIT_KEY. مع أي اسم آخر يكون المفتاح فارغًا في المتصفح ولا يبدأ Blipit.
  • أعد تشغيل خادم التطوير بعد إضافة .env أو .env.local أو تغييرهما، فهو لا يقرؤهما إلا عند بدء تشغيله.
  • في Vercel أو أي منصة استضافة أخرى، أضف المتغير نفسه في متغيرات البيئة للمشروع وانشر مجددًا. تُكتب قيم NEXT_PUBLIC_ وVITE_ داخل البناء، لذا لا يرى النشر الجاري أبدًا قيمة أُضيفت لاحقًا.
  • استخدم المفتاح العام (blipit_pk_). يُرفض المفتاح السري (blipit_sk_) في المتصفح مع خطأ في وحدة التحكم؛ وإذا ظهر مفتاح سري في صفحة يومًا، فأنشئ مفتاحًا سريًا جديدًا.
  • في Next.js، يوضع <Blipit /> في ملف app/layout.tsx الجذري (أو pages/_app.tsx) ليعمل في كل صفحة. في التطبيقات الأخرى، استدعِ init مرة واحدة في ملف الدخول، قبل عرض التطبيق.
  • يجب أن يكون «إظهار زر الإبلاغ عن الأخطاء» مفعّلًا في app.blipit.io، «إعدادات المشروع»، «أداة تقارير الأخطاء»، ويجب ألا يمرّر كودك feedbackWidget: false. تحتفظ SDK بإعدادات المشروع لمدة تصل إلى ساعة، لذا اختبر أي تغيير في نافذة خاصة.
  • قد تحظر أدوات حظر الإعلانات وإضافات الخصوصية in.blipit.io. جرّب نافذة خاصة مع إيقاف الإضافات.
  • إذا كان موقعك يرسل Content Security Policy، فاسمح بـ script-src https://blipit.io وبـ connect-src https://in.blipit.io وبـ img-src data: وبـ media-src blob:. يُحمَّل محرر نافذة الإبلاغ من blipit.io/sdk عند أول نقرة، وتُرسم لقطة الشاشة من صورة data:، وتُرفع تسجيلات الشاشة أيضًا إلى in.blipit.io. عند تفعيل debug تذكر وحدة التحكم متى منعت السياسة لقطة الشاشة. لتسجيل الصوت مع تسجيل الشاشة، يجب أن تسمح ترويسة Permissions-Policy في موقعك بـ microphone=(self)، وبـ display-capture=(self) لتسجيل الشاشة؛ ومع microphone=() تعمل التسجيلات دون صوت.
  • تحقق من الإصدار المثبّت باستخدام npm ls @blipit/browser @blipit/nextjs (أو pnpm list @blipit/browser @blipit/nextjs) وقارنه بسجل التغييرات. ينتظر pnpm 11 يومًا قبل أن يثبّت إصدارًا جديدًا (minimum-release-age)، لذلك يثبّت pnpm add في يوم الإصدار الإصدار السابق دون أي تنبيه. للحصول على الإصدار الجديد فورًا: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
  • ما زلت عالقًا؟ راسل support@blipit.io مع أسطر [blipit] من وحدة التحكم.

افتح دليل Next.js وReact كاملاً

2خطوات Node.js

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

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

1التثبيت

sh
npm install @blipit/node

2احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

3احتفظ بالمفتاح في البيئة

يستخدم Node المفتاح السري. ضعه في متغير بيئة، وليس في الكود أبدًا: محليًا في ملف .env يحمّله Node 20.6 وما بعده عبر --env-file، وفي الإنتاج في بيئة منصة الاستضافة أو إعداداتها السرية (Fly secrets وDocker وsystemd وRender وVercel). أعد تشغيل العملية بعد تغييره.

.env
BLIPIT_SECRET_KEY=blipit_sk_your_secret_key
sh
node --env-file=.env --import ./instrument.mjs server.mjs

4أبقِ المفاتيح خارج git

احتفظ بالمفاتيح في متغيرات البيئة أو في الإعدادات السرية لمنصة الاستضافة، وليس أبدًا في كود تودعه في المستودع، وأضف ملفات .env إلى .gitignore. وجود مفتاح عام في صفحة ويب أمر طبيعي. إذا انتهى مفتاح سري يومًا في git أو صفحة عامة أو لقطة شاشة أو محادثة، فافتح «مفاتيح API»، واضغط «إنشاء مفتاح سري جديد»، والصق المفتاح الجديد في كل مكان كان يُستخدم فيه القديم: يتوقف المفتاح القديم عن العمل فورًا.

.gitignore
.env
.env.local
.env.*.local

5التهيئة أولًا

ضع هذا في ملف يعمل قبل تطبيقك، واستورده أولًا.

instrument.mjs
import * as Blipit from "@blipit/node";

Blipit.init({
  key: process.env.BLIPIT_SECRET_KEY,
  environment: process.env.NODE_ENV,
  release: process.env.RELEASE,
  serverName: "api",
});

6Express أو Fastify أو Koa أو Hono أو NestJS

أضف المعالج بعد مساراتك لتصل الأخطاء المعالجة وغير المعالجة معًا إلى Blipit، مع طريقة الطلب وعنوانه ووكيل المستخدم. تحتاج Koa وHono وNestJS إلى سطر واحد لكل منها: وسيط Koa يأتي أولاً، ووسيط Hono قبل المسارات. وتبلّغ عن الأخطاء ذات الحالة 500 أو أعلى. وتظهر الطلبات بعدها في صفحة Pulse حسب المسار، مثل GET /users/:id، بدلاً من سطر لكل رابط.

js
import "./instrument.mjs";
import * as Blipit from "@blipit/node";
import express from "express";

const app = express();
app.get("/", (req, res) => res.send("ok"));
app.use(Blipit.expressErrorHandler());
app.listen(3000);
Fastify
await app.register(Blipit.fastifyPlugin());
Koa
app.use(Blipit.koaMiddleware());
Hono
app.use(Blipit.honoMiddleware());
NestJS
app.useGlobalInterceptors(Blipit.nestInterceptor());

7بدون خادم: AWS Lambda وVercel

توقف الاستضافات بدون خادم الدالة فور ردّها، ولا يشغّل Lambda خادم HTTP الخاص بـ Node، لذا غلّف المعالج. يسجّل wrapHandler الطلب (أحداث API Gateway وروابط الدوال وموازن الأحمال حسب الطريقة والمسار، والأحداث الأخرى حسب اسم الدالة)، ويبلّغ عن الأخطاء ويرسل كل شيء قبل أن يعود المعالج؛ ولا ينتظر إلا عند وجود ما يُرسل، ثانيتين على الأكثر. ويفعل traceRequest الشيء نفسه لأي معالج يستقبل Request. وعلى Vercel تُرسل البيانات بعد الرد عبر waitUntil، فلا يتأخر شيء. وفي Next.js استخدم withBlipit (راجع دليل Next.js).

js
import * as Blipit from "@blipit/node";

export const handler = Blipit.wrapHandler(async (event, context) => {
  return { statusCode: 200, body: "ok" };
});
traceRequest
export default { fetch: (request) => Blipit.traceRequest(request, () => app.fetch(request)) };

8الالتقاط اليدوي والسجلات ومحاولات تسجيل الدخول

js
Blipit.captureException(err);
Blipit.captureMessage("cache miss rate above 50%", "warning");
Blipit.setUser({ id: "user-42" });
Blipit.log.info("order placed", { order_id: 42 });
Blipit.captureSecurity({ kind: "login_failed", actor: email, ip, userAgent, outcome: "bad_password" });
await Blipit.flush();

9الخدمات المرتبطة وصحة الخادم

بدءًا من 0.2 يسجل SDK أيضًا طلبات قاعدة البيانات والخدمات الخارجية، والمعالج والذاكرة وحلقة الأحداث لخادمك. راجع دليلي الخدمات المرتبطة وصحة الخوادم؛ ويتحكم في ذلك tracesSampleRate و tracing: false و metrics: false.

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

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

js
Blipit.captureMessage("Hello from Node");

افتح دليل Node.js كاملاً

2خطوات Python

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

التثبيت pip install blipit

1التثبيت

sh
pip install blipit

2التهيئة عند بدء التشغيل

في Django، ضعه في أعلى settings.py. وفي Flask أو FastAPI، قبل إنشاء التطبيق. المفتاح موجود في صفحة مفاتيح المشروع. إذا كان المفتاح فارغًا، يسجّل init تحذيرًا ويعيد False بدل رفع استثناء، فلا يمنع غياب المفتاح التطبيق من البدء أبدًا.

python
import blipit

blipit.init(
    key="<public key>",
    environment="production",
    release="myapp@1.4.2",
)

3احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

4احتفظ بالمفتاح في البيئة

ترسل هذه الحزمة بالمفتاح العام من صفحة مفاتيح API الخاصة بالمشروع. احتفظ به في متغير بيئة: محليًا في ملف .env يحمّله إطار العمل أو python-dotenv، وفي الإنتاج في إعدادات الاستضافة. استخدم المفتاح السري فقط إذا كنت ترسل محاولات تسجيل الدخول.

.env
BLIPIT_KEY=blipit_pk_your_public_key
python
import os
import blipit

blipit.init(key=os.environ.get("BLIPIT_KEY"))

5أبقِ المفاتيح خارج git

احتفظ بالمفاتيح في متغيرات البيئة أو في الإعدادات السرية لمنصة الاستضافة، وليس أبدًا في كود تودعه في المستودع، وأضف ملفات .env إلى .gitignore. وجود مفتاح عام في صفحة ويب أمر طبيعي. إذا انتهى مفتاح سري يومًا في git أو صفحة عامة أو لقطة شاشة أو محادثة، فافتح «مفاتيح API»، واضغط «إنشاء مفتاح سري جديد»، والصق المفتاح الجديد في كل مكان كان يُستخدم فيه القديم: يتوقف المفتاح القديم عن العمل فورًا.

.gitignore
.env
.env.local
.env.*.local

6الالتقاط اليدوي ومحاولات تسجيل الدخول

تتطلب محاولات تسجيل الدخول المفتاح السري: على الخادم، ابدأ التهيئة بالمفتاح السري بدلاً من المفتاح العام، وإلا فسترفضها خدمة الاستقبال بالرمز 403 security_needs_secret_key. خطة Scale.

python
blipit.capture_exception(err)
blipit.capture_message("cache miss rate above 50%", level="warning")
blipit.set_user({"id": "42", "email": "ana@example.com"})
blipit.set_context("order", {"id": 1042, "total": 99.5})
blipit.capture_security("login_failed", actor=email, ip=request.META.get("REMOTE_ADDR"), outcome="bad_password")

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

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

python
blipit.capture_message("Hello from Python")

افتح دليل Python كاملاً

2خطوات PHP وLaravel

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

التثبيت composer require blipit/blipit

1التثبيت

sh
composer require blipit/blipit

2التهيئة عند بدء التشغيل

PHP العادية: في أعلى وحدة التحكم الأمامية، قبل معالجة أي طلب. أما Laravel فيشغّل Blipit من إعداداته، كما في الخطوة التالية. المفتاح موجود في صفحة مفاتيح المشروع. إذا كان المفتاح فارغًا، يكتب init تحذيرًا في سجل الأخطاء ويعيد false بدل رمي استثناء.

php
use Blipit\Blipit;

Blipit::init([
    "key" => "<public key>",
    "environment" => "production",
    "release" => "myapp@1.4.2",
]);

3احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

4احتفظ بالمفتاح في البيئة

ترسل هذه الحزمة بالمفتاح العام. في Laravel: أضفه إلى .env وإلى config/services.php؛ يُكتشف مزوّد خدمة Blipit تلقائيًا ويشغّل Blipit من تلك الإعدادات، فلا حاجة إلى أي شيء آخر. اقرأ القيم عبر config، لأن env() لا تعيد شيئًا في كود التطبيق بعد تخزين الإعدادات مؤقتًا. في PHP العادية: اقرأ المفتاح بـ getenv() من بيئة الخادم.

.env
BLIPIT_KEY=blipit_pk_your_public_key
config/services.php
'blipit' => [
    'key' => env('BLIPIT_KEY'),
    'environment' => env('APP_ENV'),
    'release' => env('GIT_SHA'),
],

5أبقِ المفاتيح خارج git

احتفظ بالمفاتيح في متغيرات البيئة أو في الإعدادات السرية لمنصة الاستضافة، وليس أبدًا في كود تودعه في المستودع، وأضف ملفات .env إلى .gitignore. وجود مفتاح عام في صفحة ويب أمر طبيعي. إذا انتهى مفتاح سري يومًا في git أو صفحة عامة أو لقطة شاشة أو محادثة، فافتح «مفاتيح API»، واضغط «إنشاء مفتاح سري جديد»، والصق المفتاح الجديد في كل مكان كان يُستخدم فيه القديم: يتوقف المفتاح القديم عن العمل فورًا.

.gitignore
.env
.env.local
.env.*.local

6Laravel وSymfony

Laravel: كل استثناء يبلّغ عنه معالج الاستثناءات يصل إلى Blipit، فتبقى أخطاء 404 وأخطاء التحقق خارجًا. تتحول الاستعلامات وأسطر السجل واستدعاءات عميل HTTP إلى مسارات تنقل (breadcrumbs)، وتُتتبَّع المهام في الطوابير. يمكن إبقاء سطر Blipit::captureException الموجود لديك في bootstrap/app.php: فالاستثناء نفسه لا يُرسل مرتين أبدًا. Symfony: سجّل المستمع في config/services.yaml واستدعِ Blipit::init مبكرًا في public/index.php وbin/console.

config/services.yaml
Blipit\Symfony\BlipitListener:
    arguments: ['@router']
    tags:
        - { name: kernel.event_listener, event: kernel.exception, method: onKernelException }
        - { name: kernel.event_listener, event: kernel.request, method: onKernelRequest }
        - { name: kernel.event_listener, event: kernel.terminate, method: onKernelTerminate }
        - { name: kernel.event_listener, event: console.error, method: onConsoleError }

7الالتقاط اليدوي ومحاولات تسجيل الدخول

تتطلب محاولات تسجيل الدخول المفتاح السري: على الخادم، ابدأ التهيئة بالمفتاح السري بدلاً من المفتاح العام، وإلا فسترفضها خدمة الاستقبال بالرمز 403 security_needs_secret_key. خطة Scale.

php
Blipit::captureException($e);
Blipit::captureMessage("cache miss rate above 50%", "warning");
Blipit::setUser(["id" => "42", "email" => "ana@example.com"]);
Blipit::captureSecurity("login_failed", $email, "bad_password", null, $request->ip(), $request->userAgent());

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

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

php
Blipit::captureMessage("Hello from PHP");

افتح دليل PHP وLaravel كاملاً

2خطوات Ruby وRails

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

التثبيت gem install blipit

1Gemfile

ruby
gem "blipit"

2التهيئة عند بدء التشغيل

Rails: config/initializers/blipit.rb؛ لا شيء آخر لتثبيته، لأن Blipit يضيف وسيط Rack والإبلاغ عن Active Job وRails.error تلقائيًا. تضيف تطبيقات Rack وSinatra السطر use Blipit::Rack. السكربتات: قبل تشغيل الكود. المفتاح موجود في صفحة مفاتيح المشروع. إذا كان المفتاح فارغًا، يطبع init تحذيرًا ويعيد false بدل رفع استثناء.

ruby
Blipit.init(
  key: "<public key>",
  environment: Rails.env,
  release: ENV["RELEASE"],
)

3احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

4احتفظ بالمفتاح في Rails credentials

ترسل هذه الحزمة بالمفتاح العام. في Rails، احتفظ به في بيانات الاعتماد المشفرة واقرأه في ملف التهيئة؛ وفي غيره، استخدم متغير بيئة.

sh
bin/rails credentials:edit
credentials
blipit:
  key: blipit_pk_your_public_key
config/initializers/blipit.rb
Blipit.init(
  key: Rails.application.credentials.dig(:blipit, :key),
  environment: Rails.env,
)

5أبقِ المفاتيح خارج git

احتفظ بالمفاتيح في متغيرات البيئة أو في الإعدادات السرية لمنصة الاستضافة، وليس أبدًا في كود تودعه في المستودع، وأضف ملفات .env إلى .gitignore. وجود مفتاح عام في صفحة ويب أمر طبيعي. إذا انتهى مفتاح سري يومًا في git أو صفحة عامة أو لقطة شاشة أو محادثة، فافتح «مفاتيح API»، واضغط «إنشاء مفتاح سري جديد»، والصق المفتاح الجديد في كل مكان كان يُستخدم فيه القديم: يتوقف المفتاح القديم عن العمل فورًا.

.gitignore
.env
.env.local
.env.*.local

6الالتقاط اليدوي ومحاولات تسجيل الدخول

تتطلب محاولات تسجيل الدخول المفتاح السري: على الخادم، ابدأ التهيئة بالمفتاح السري بدلاً من المفتاح العام، وإلا فسترفضها خدمة الاستقبال بالرمز 403 security_needs_secret_key. خطة Scale.

ruby
Blipit.capture_exception(e)
Blipit.capture_message("cache miss rate above 50%", level: :warning)
Blipit.set_user(id: "42", email: "ana@example.com")
Blipit.capture_security("login_failed", email, outcome: "bad_password", ip: request.remote_ip, user_agent: request.user_agent)

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

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

ruby
Blipit.capture_message("Hello from Rails")

افتح دليل Ruby وRails كاملاً

2خطوات Go

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

التثبيت go get github.com/blipit-io/blipit-go

1التثبيت

sh
go get github.com/blipit-io/blipit-go

2التهيئة في main

لا يسبب Init حالة panic أبدًا: إذا كان المفتاح أو معرّف المشروع فارغًا يعيد خطأ ويبقى Blipit متوقفًا، لذا سجّل الخطأ بدل إنهاء البرنامج.

go
import (
    "log"
    "time"

    "github.com/blipit-io/blipit-go"
)

func main() {
    if err := blipit.Init(blipit.Options{
        Key:         "<public key>",
        Project:     "<project id>",
        Environment: "production",
        Release:     "myapp@1.4.2",
    }); err != nil {
        log.Printf("blipit: %v", err)
    }
    defer blipit.Flush(2 * time.Second)
}

3احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

4احتفظ بالمفتاح في البيئة

ترسل هذه SDK باستخدام المفتاح العام ومعرّف المشروع. اقرأهما من متغيرات البيئة التي تضبطها منصة الاستضافة، أو وحدة systemd، أو docker run -e.

go
blipit.Init(blipit.Options{
    Key:     os.Getenv("BLIPIT_KEY"),
    Project: os.Getenv("BLIPIT_PROJECT"),
})

5أبقِ المفاتيح خارج git

احتفظ بالمفاتيح في متغيرات البيئة أو في الإعدادات السرية لمنصة الاستضافة، وليس أبدًا في كود تودعه في المستودع، وأضف ملفات .env إلى .gitignore. وجود مفتاح عام في صفحة ويب أمر طبيعي. إذا انتهى مفتاح سري يومًا في git أو صفحة عامة أو لقطة شاشة أو محادثة، فافتح «مفاتيح API»، واضغط «إنشاء مفتاح سري جديد»، والصق المفتاح الجديد في كل مكان كان يُستخدم فيه القديم: يتوقف المفتاح القديم عن العمل فورًا.

.gitignore
.env
.env.local
.env.*.local

6الالتقاط اليدوي ومحاولات تسجيل الدخول

تتطلب محاولات تسجيل الدخول المفتاح السري: على الخادم، ابدأ التهيئة بالمفتاح السري بدلاً من المفتاح العام، وإلا فسترفضها خدمة الاستقبال بالرمز 403 security_needs_secret_key. خطة Scale.

go
blipit.CaptureException(err)
blipit.CaptureMessage("cache miss rate above 50%")
blipit.SetUser(blipit.User{ID: "42", Email: "ana@example.com"})
blipit.CaptureSecurity(blipit.Security{Kind: "login_failed", Actor: email, IP: ip, UserAgent: agent, Outcome: "bad_password"})

7حالات panic وnet/http

يبلّغ defer blipit.Recover() في أعلى main أو أي goroutine عن حالة panic مع مكدسها، ثم يرسل ما في الطابور ويعيد إطلاق الـ panic. غلّف المعالج الذي تقدّمه بـ blipit.Handler للإبلاغ عن حالات panic مع الطلب وقياس زمن كل طلب في Pulse، مسمّى بنمط ServeMux الخاص به. تستخدم Gin وEcho وFiber الدوال StartRequest وSetRoute وEnd، كما في ملف README للحزمة.

go
go func() {
    defer blipit.Recover()
    work()
}()

mux := http.NewServeMux()
mux.HandleFunc("GET /items/{id}", item)
http.ListenAndServe(":8080", blipit.Handler(mux))

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

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

go
blipit.CaptureMessage("Hello from Go")

افتح دليل Go كاملاً

2خطوات Java وKotlin

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

التثبيت com.github.blipit-io:blipit-java

1أضف المستودع والاعتمادية

build.gradle.kts
repositories {
    mavenCentral()
    maven("https://jitpack.io")
}

dependencies {
    implementation("com.github.blipit-io:blipit-java:v0.2.1")
}
pom.xml
<repositories>
  <repository>
    <id>jitpack.io</id>
    <url>https://jitpack.io</url>
  </repository>
</repositories>

<dependency>
  <groupId>com.github.blipit-io</groupId>
  <artifactId>blipit-java</artifactId>
  <version>v0.2.1</version>
</dependency>

2التهيئة عند بدء التشغيل

Spring Boot: في أعلى main، قبل SpringApplication.run، أو في دالة @PostConstruct ضمن صنف @Configuration. تُكتب الاستثناءات غير الملتقطة في أي خيط إلى طابور على القرص قبل توقف التطبيق، ثم تُرسل، فيُبلَّغ عن العطل حتى لو كانت الشبكة متوقفة؛ وما يتبقى يُرسل عند التشغيل التالي.

java
import io.blipit.Blipit;
import io.blipit.BlipitOptions;

Blipit.init(BlipitOptions.builder()
    .key("<public key>")
    .project(<project id>)
    .environment("production")
    .release("myapp@1.4.2")
    .build());

3احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

4احتفظ بالمفتاح في البيئة

ترسل هذه SDK باستخدام المفتاح العام ومعرّف المشروع. اقرأهما من متغيرات البيئة، أو في Spring Boot من application.properties المملوء من البيئة.

application.properties
blipit.key=${BLIPIT_KEY}
blipit.project=${BLIPIT_PROJECT}
java
Blipit.init(BlipitOptions.builder()
    .key(System.getenv("BLIPIT_KEY"))
    .project(Long.parseLong(System.getenv("BLIPIT_PROJECT")))
    .build());

5أبقِ المفاتيح خارج git

احتفظ بالمفاتيح في متغيرات البيئة أو في الإعدادات السرية لمنصة الاستضافة، وليس أبدًا في كود تودعه في المستودع، وأضف ملفات .env إلى .gitignore. وجود مفتاح عام في صفحة ويب أمر طبيعي. إذا انتهى مفتاح سري يومًا في git أو صفحة عامة أو لقطة شاشة أو محادثة، فافتح «مفاتيح API»، واضغط «إنشاء مفتاح سري جديد»، والصق المفتاح الجديد في كل مكان كان يُستخدم فيه القديم: يتوقف المفتاح القديم عن العمل فورًا.

.gitignore
.env
.env.local
.env.*.local

6الالتقاط اليدوي ومحاولات تسجيل الدخول

تتطلب محاولات تسجيل الدخول المفتاح السري: على الخادم، ابدأ التهيئة بالمفتاح السري بدلاً من المفتاح العام، وإلا فسترفضها خدمة الاستقبال بالرمز 403 security_needs_secret_key. خطة Scale.

java
Blipit.captureException(err);
Blipit.captureMessage("cache miss rate above 50%");
Blipit.captureMessage("disk almost full", Level.WARNING);
Blipit.setUser("42", "ana@example.com");
Blipit.addBreadcrumb("GET /api/cart 500", "http", Level.ERROR);
Blipit.captureSecurity("login_failed", email, "bad_password", null, ip, userAgent, null);

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

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

java
Blipit.captureMessage("Hello from Java");

افتح دليل Java وKotlin كاملاً

2خطوات ‎.NET‎

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

التثبيت dotnet add package Blipit

1التثبيت

sh
dotnet add package Blipit

2التهيئة عند بدء التشغيل

أبقِ المقبض المُعاد حيًّا طوال عمر العملية. القيمتان موجودتان في صفحة مفاتيح المشروع.

Program.cs
using Blipit;

using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = "<public key>",
    Project = "<project id>",
    Environment = "production",
    Release = "myapp@1.4.2",
});

3احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

4احتفظ بالمفتاح في ملفات الإعداد

ترسل هذه SDK باستخدام المفتاح العام ومعرّف المشروع. احتفظ بهما في user secrets أثناء التطوير وفي متغيرات البيئة في الإنتاج (Blipit__Key وBlipit__Project)، ثم اقرأهما من configuration.

sh
dotnet user-secrets set "Blipit:Key" "blipit_pk_your_public_key"
dotnet user-secrets set "Blipit:Project" "12"
Program.cs
using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = builder.Configuration["Blipit:Key"],
    Project = builder.Configuration["Blipit:Project"],
});

5أبقِ المفاتيح خارج git

احتفظ بالمفاتيح في متغيرات البيئة أو في الإعدادات السرية لمنصة الاستضافة، وليس أبدًا في كود تودعه في المستودع، وأضف ملفات .env إلى .gitignore. وجود مفتاح عام في صفحة ويب أمر طبيعي. إذا انتهى مفتاح سري يومًا في git أو صفحة عامة أو لقطة شاشة أو محادثة، فافتح «مفاتيح API»، واضغط «إنشاء مفتاح سري جديد»، والصق المفتاح الجديد في كل مكان كان يُستخدم فيه القديم: يتوقف المفتاح القديم عن العمل فورًا.

.gitignore
.env
.env.local
.env.*.local

6ASP.NET Core والسجلات

لا شيء آخر لإضافته: استدعِ Init في أعلى Program.cs. يُبلّغ عن الاستثناءات الصادرة من نقاط النهاية ووحدات التحكم والوسائط مع الطلب، حتى عندما يعالجها UseExceptionHandler، ومع ضبط TracesSampleRate يُقاس زمن كل طلب مأخوذ في العينة في Pulse حسب مساره. يحوّل BlipitLoggerProvider مستوى Information وما فوقه إلى مسارات تنقل (breadcrumbs) ومستوى Error وما فوقه إلى أحداث.

Program.cs
var builder = WebApplication.CreateBuilder(args);
using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = builder.Configuration["Blipit:Key"],
    Project = builder.Configuration["Blipit:Project"],
    TracesSampleRate = 0.2,
});
builder.Logging.AddProvider(new BlipitLoggerProvider());

7الالتقاط اليدوي ومحاولات تسجيل الدخول

تتطلب محاولات تسجيل الدخول المفتاح السري: على الخادم، ابدأ التهيئة بالمفتاح السري بدلاً من المفتاح العام، وإلا فسترفضها خدمة الاستقبال بالرمز 403 security_needs_secret_key. خطة Scale.

csharp
Blipit.Blipit.CaptureException(ex);
Blipit.Blipit.CaptureMessage("cache miss rate above 50%", BlipitLevel.Warning);
Blipit.Blipit.SetUser(id: "42", email: "ana@example.com");
Blipit.Blipit.CaptureSecurity("login_failed", email, "bad_password", null, ip, userAgent, null);

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

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

csharp
Blipit.Blipit.CaptureMessage("Hello from .NET");

افتح دليل ‎.NET‎ كاملاً

2خطوات iOS وAndroid وFlutter وReact Native

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

التثبيت one package per platform

1احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

2React Native

تربط الحزمة وحدة أصلية صغيرة تشغّل حزم Blipit الخاصة لأندرويد وiOS لالتقاط الأعطال الأصلية؛ ويضيف ملف Gradle الخاص بها مستودع JitPack تلقائيًا. غلّف المكوّن الجذري حتى يُبلَّغ عن أخطاء العرض أيضًا.

sh
npm install @blipit/react-native
npx pod-install
tsx
import * as Blipit from "@blipit/react-native";

Blipit.init({ key: "<public key>", project: <project id>, environment: "production", release: "myapp@1.4.2" });

export default Blipit.wrap(App);

3Flutter

استبدل runApp في main.dart بـ Blipit.init. تشغّل الإضافة حزم Blipit الخاصة لأندرويد وiOS لالتقاط الأعطال الأصلية، ويُبلَّغ عن أخطاء إطار Flutter والأخطاء غير المتزامنة غير الملتقطة تلقائيًا.

sh
flutter pub add blipit_flutter
main.dart
import 'package:blipit_flutter/blipit_flutter.dart';

Future<void> main() async {
  await Blipit.init(
    key: '<public key>',
    project: <project id>,
    environment: 'production',
    release: 'myapp@1.4.2',
    appRunner: () => runApp(const MyApp()),
  );
}

4iOS وmacOS ‏(Swift Package)

في Xcode، اختر File ثم Add Package Dependencies، وأدخل رابط المستودع؛ أو أضفه إلى Package.swift وأضف BlipitSwift إلى الهدف. مع CocoaPods، استخدم pod باسم BlipitSwift. ثم استدعِ start مرة واحدة عند التشغيل. إذا كان المفتاح أو معرّف المشروع فارغًا، يطبع start تحذيرًا ويعيد false بدل إيقاف التطبيق.

Package.swift
.package(url: "https://github.com/blipit-io/blipit-swift", from: "0.6.0")
Podfile
pod "BlipitSwift", "~> 0.6.0"
swift
import BlipitSwift

Blipit.start(key: "<public key>", project: "<project id>", environment: "production", release: "myapp@1.4.2")

5Android

أضف JitPack إلى المستودعات في settings.gradle.kts، والاعتمادية إلى وحدة التطبيق، واستدعِ init في Application.onCreate.

settings.gradle.kts
dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven("https://jitpack.io")
    }
}
‎build.gradle.kts (app)‎
implementation("com.github.blipit-io:blipit-android:v0.6.0")
kotlin
import io.blipit.android.Blipit

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        Blipit.init(this) {
            key = "<public key>"
            project = "<project id>"
            environment = "production"
            release = "myapp@1.4.2"
        }
    }
}

6أين يوضع المفتاح في التطبيق

تتضمن التطبيقات المفتاح العام ومعرّف المشروع داخلها، ولا بأس بذلك: فالمفتاح العام لا يستطيع سوى إرسال الأحداث. لا تضع المفتاح السري في تطبيق أبدًا. مرّرهما وقت البناء حتى يبقيا خارج مستودعك.

Flutter
flutter run --dart-define=BLIPIT_KEY=blipit_pk_your_public_key --dart-define=BLIPIT_PROJECT=12
main.dart
const key = String.fromEnvironment('BLIPIT_KEY');
const project = int.fromEnvironment('BLIPIT_PROJECT');
Expo (.env)
EXPO_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
EXPO_PUBLIC_BLIPIT_PROJECT=12
Android build.gradle.kts
buildConfigField("String", "BLIPIT_KEY", ""${project.findProperty("blipitKey")}"")
iOS xcconfig
BLIPIT_KEY = blipit_pk_your_public_key

7بلاغات الأخطاء في التطبيقات

استدعِ showReport من عنصر قائمة في تطبيقك، أو فعّل زر الإبلاغ عن خطأ العائم. تسأل أداة الإبلاغ أولًا عن طريقة عرض المشكلة: التقاط لقطة شاشة، أو تسجيل الشاشة (iOS)، أو وصفها فقط. تُفتح لقطة الشاشة بملء الشاشة والأدوات فوقها وتحتها وليس عليها أبدًا؛ كبّر بإصبعين أو بنقرتين، وحدّد المشكلة، ثم أضف عنوانًا وما حدث وأرسل. تصل البلاغات إلى قسم بلاغات الأخطاء مع تفاصيل الجهاز. يحتاج React Native إلى react-native-view-shot لالتقاط لقطات الشاشة.

React Native
import * as Blipit from "@blipit/react-native";

export default function Root() {
  return (
    <Blipit.BlipitReporter showButton>
      <App />
    </Blipit.BlipitReporter>
  );
}

Blipit.showReport();
Flutter
appRunner: () => runApp(const BlipitReporter(showButton: true, child: MyApp())),

Blipit.showReport();
iOS
Blipit.showReportButton()

Blipit.showReport()
Android
Blipit.showReportButton()

Blipit.showReport()

8أبلغ من الشاشة التي فيها الخطأ

عنصر الإبلاغ عن خطأ في قائمة مثل الملف الشخصي يلتقط القائمة لا المشكلة. فعّل الطرق التي تبدأ من الشاشة نفسها؛ كلها متوقفة افتراضيًا ولا تطلب أي إذن. يفتح shakeToReport نموذج البلاغ عند هزّ الهاتف. يسأل screenshotToReport "هل تريد الإبلاغ عن خطأ في هذه الشاشة؟" بعد لقطة شاشة عادية ويرفق لقطة Blipit الخاصة (iOS وAndroid 14 وما بعده). يفتحه twoFingerReport بعد الضغط المطوّل بإصبعين لنحو ثانية دون أن يعيق لمسات التطبيق. يسأل reportAfterCrash عمّا كان الشخص يفعله عند أول تشغيل بعد العطل ويربط البلاغ بذلك العطل. يتيح screenPicker، المفعّل افتراضيًا، لمن يفتح نموذج البلاغ من قائمة أن يختار أي شاشة من الشاشات الأخيرة فيها الخطأ: تبقى اللقطات في ذاكرة الجهاز ولا يُرفع إلا ما يختاره. تسمّي تطبيقات Jetpack Compose وSwiftUI شاشاتها عبر setScreen.

Android
Blipit.init(this) {
    key = "<public key>"
    project = "<project id>"
    shakeToReport = true
    screenshotToReport = true
    twoFingerReport = true
    reportAfterCrash = true
}

navController.addOnDestinationChangedListener { _, destination, _ ->
    Blipit.setScreen(destination.route ?: "screen")
}
iOS
Blipit.start(key: "<public key>", project: "<project id>") { options in
    options.shakeToReport = true
    options.screenshotToReport = true
    options.twoFingerReport = true
    options.reportAfterCrash = true
}

CartView().onAppear { Blipit.setScreen("Cart") }
React Native
Blipit.init({
  key: "<public key>",
  project: <project id>,
  shakeToReport: true,
  screenshotToReport: true,
  twoFingerReport: true,
  reportAfterCrash: true,
});

<NavigationContainer ref={navigation} onReady={() => Blipit.trackNavigation(navigation)}>
Flutter
await Blipit.init(
  key: '<public key>',
  project: <project id>,
  shakeToReport: true,
  screenshotToReport: true,
  twoFingerReport: true,
  reportAfterCrash: true,
  appRunner: () => runApp(BlipitReporter(child: MaterialApp(navigatorObservers: [BlipitNavigatorObserver()], home: const Home()))),
);

9زر عائم للمختبرين فقط

في app.blipit.io افتح المشروع، ومن إعدادات زر الإبلاغ عن الأخطاء اضبط الزر العائم في تطبيقات الهاتف على الجميع أو المختبرين فقط، مع معرّف مستخدم أو بريد إلكتروني لكل مختبر. يرسل التطبيق الشخص الذي حدده عبر setUser ولا يجيب Blipit إلا بنعم أو لا، فلا تُشحن قائمة المختبرين داخل التطبيق أبدًا. استدعاء showReportButton (أو showButton في React Native وFlutter) يظل يُظهر الزر للجميع.

Android
Blipit.setUser(id = user.id, email = user.email)
iOS
Blipit.setUser(id: user.id, email: user.email)
React Native
Blipit.setUser({ id: user.id, email: user.email });
Flutter
Blipit.setUser(BlipitUser(id: user.id, email: user.email));

10رصد التطبيق عندما يتوقف

بعض الأعطال لا تسبب انهيارًا أبدًا: تبقى شاشة البدء تدور، أو لا يعود تسجيل الدخول. فعّل waitForReady واستدعِ reportReady عند ظهور أول شاشة قابلة للاستخدام. ضع المسارات مثل تسجيل الدخول بين startFlow وendFlow، وحدّد الخطوات باستخدام flowStep. إذا لم يكتمل أحدها في الوقت المحدد، يفتح Blipit مشكلة من نوع متوقف مع آخر خطوة والمسار الذي سبقها. يُحتسب الوقت على الشاشة فقط، وBlipit هو من يحدد المهل. تُرسل الأسماء كما كُتبت، لذا استخدم أسماء ثابتة، ولا تستخدم أبدًا عناوين البريد أو أي بيانات للمستخدم.

Android
Blipit.init(this) {
    key = "<public key>"
    project = "<project id>"
    waitForReady = true
}

Blipit.reportReady()

Blipit.startFlow("sign-in")
Blipit.flowStep("sign-in", "google-picker")
Blipit.endFlow("sign-in")
iOS
Blipit.start(key: "<public key>", project: "<project id>", waitForReady: true)

Blipit.reportReady()

Blipit.startFlow("sign-in")
Blipit.flowStep("sign-in", "apple-sheet")
Blipit.endFlow("sign-in")
React Native
Blipit.init({ key: "<public key>", project: <project id>, waitForReady: true });

Blipit.reportReady();

Blipit.startFlow("sign-in");
Blipit.flowStep("sign-in", "google-picker");
Blipit.endFlow("sign-in");
Flutter
await Blipit.init(key: '<public key>', project: <project id>, waitForReady: true, appRunner: () => runApp(const MyApp()));

Blipit.reportReady();

Blipit.startFlow('sign-in');
Blipit.flowStep('sign-in', 'google-picker');
Blipit.endFlow('sign-in');

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

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

افتح دليل iOS وAndroid وFlutter وReact Native كاملاً

2خطوات Odoo

هل سجّلت الدخول إلى Blipit؟ افتح صفحة المفاتيح لترى هذه الخطوات ومفاتيح مشروعك معبّأة فيها وجاهزة للنسخ.

اعرض مفاتيحي

التثبيت Blipit Error Monitoring on the Odoo Apps store

1ثبّت الوحدة

نزّلها من apps.odoo.com ‏(blipit_monitor، مجانية) لإصدار Odoo لديك وثبّتها كأي وحدة: التطبيقات، تحديث قائمة التطبيقات، تثبيت Blipit Error Monitoring. لا يسمح Odoo Online بتطبيقات الطرف الثالث؛ أما Odoo.sh والتثبيت المحلي فيسمحان.

2احصل على مفاتيحك

سجّل الدخول في app.blipit.io وافتح «مفاتيح API» في الشريط الجانبي، ثم مشروعك. لكل مشروع مفتاحان. يبدأ المفتاح العام بـ blipit_pk_: يوضع في كود المتصفح والتطبيقات، ولا يستطيع سوى إرسال الأحداث، ومن الآمن أن يراه أي شخص. يبدأ المفتاح السري بـ blipit_sk_: يبقى على خادمك أو في Odoo، وليس في متصفح أبدًا، لأنه يستطيع أيضًا قراءة المشكلات وتغييرها. يُعرض المفتاح السري مرة واحدة فقط، فور إنشائه، لذا انسخه حينها؛ وإذا فقدته، فاضغط «إنشاء مفتاح سري جديد»، فيتوقف القديم عن العمل فورًا. تحتاج بعض حزم SDK أيضًا إلى معرّف المشروع، المعروض في الصفحة نفسها.

مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
مفاتيح API في app.blipit.io: المفتاح العام (blipit_pk_) لكود المتصفح، والمفتاح السري (blipit_sk_) للخوادم وOdoo.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.
يُعرض المفتاح السري الجديد مرة واحدة. انسخه الآن: يُخزّن مجزّأً (hashed) ولا يمكن عرضه مرة أخرى.

3الاتصال

الإعدادات، Blipit: الصق المفتاح السري للمشروع، وحدد الموافقة على الشروط وترخيص الوحدة، واضغط حفظ. تتصل من تلقاء نفسها وتعرض «متصل بـ <project>». يُرفض المفتاح العام أو المفتاح المرتبط بقاعدة بيانات أخرى مع ذكر السبب.

4المسؤولون

اختر من يتلقى البريد، لكل شركة إن كان لديك عدة شركات. يشغل كل شخص مقعدًا واحدًا من خطتك؛ ويتحقق Blipit من العدد عند الحفظ.

5بلاغات الأخطاء من Odoo

تضيف الوحدة زر «أبلغ عن خطأ» إلى Odoo نيابةً عنك؛ فلا حاجة لكتابة أي كود. ضمن «الإعدادات، Blipit، بلاغات الأخطاء، يظهر لـ»، اختر من يراه: «المستخدمون الداخليون» أو «زوار الموقع» أو «كلاهما» أو «لا أحد»، ويمكنك اختياريًا قصر المستخدمين الداخليين على مجموعة واحدة. تحمل البلاغات النموذج والسجل والحقل الذي كان فيه الشخص، ويُملأ اسم المستخدم المسجّل دخوله وبريده تلقائيًا. يأتي الموضع واللون والنص والشكل من app.blipit.io، «إعدادات المشروع»، «أداة تقارير الأخطاء». راجع دليل زر الإبلاغ عن الأخطاء لمعرفة كل الخيارات.

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

افتح تطبيق Blipit في Odoo. يظهر الخطأ التالي هناك وفي بريد المسؤولين. انقر على «تحديث من Blipit» للتحقق فورًا.

افتح دليل Odoo كاملاً