@ 1mn/ 反应

反应约束 1分钟 SDK——内置 产品分析、误差跟踪、, 用户管理 (postHog/ Sentry-like) 用于您的 React 或 Next.js app.

自足:它捆绑了SDK核心,所以 npm install +一个提供者是您需要的。 没有 片段,没有脚本标签.

• 📈 分析 ——自动页面视图(包括SPA导航),会话,网络要害,以及自定义事件.
• 👥 用户管理 ——识别您的登录用户(使用电子邮件),并在您1mn的仪表板上观看.
• 🐛 错误 ——未发现例外和未处理的拒绝自动捕获并分组.
• 💬 反馈 ——一来一来 <FeedbackWidget> (或无头钩),将客户反馈作为门票存档.
• 🎬 会话重放 – 从您的仪表盘中选择每个键入;记录器(rrweb)懒惰的负载只用于被采样的会话,所以它永远不会触及到这个捆绑的大小. 默认关闭; 输入被掩盖 .
• QQ~9 KB,零运行时间依赖,SSR安全.

安装

npm install @1mn/react

快速启动

将您的应用程序包装一次 OnemnProvider 并传递公用钥匙1mn_pk_…从 用户 选项卡 在您的1mn仪表板)加上您的登录用户:

import { OnemnProvider } from "@1mn/react";

export default function App({ children, user }) {
  return (
    <OnemnProvider apiKey="1mn_pk_xxx" user={user}>
      {children}
    </OnemnProvider>
  );
}

就是这样——网页视图,网络动态,错误自动被捕获 user 已确认 (与 email编号 :name) 凡所设. 何时 user 变成 null SDK重装.

自定义事件

import { useOnemn } from "@1mn/react";

function CheckoutButton() {
  const onemn = useOnemn();
  return (
    <button onClick={() => onemn.capture("checkout_started", { plan: "pro" })}>
      Upgrade
    </button>
  );
}

客户反馈

收集一个组件的应用反馈。 在部件中放入浮动发射器+模式:

import { FeedbackWidget } from "@1mn/react";

<FeedbackWidget />;

或从自己的按钮驱动模式( 无发射装置) :

import { useState } from "react";
import { FeedbackWidget } from "@1mn/react";

function Sidebar() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Feedback</button>
      <FeedbackWidget launcher={false} open={open} onOpenChange={setOpen} />
    </>
  );
}

你更喜欢自己的UI? 使用无头钩( 或 useOnemn().feedback:

import { useFeedback } from "@1mn/react";

const { send } = useFeedback();
send("Love the new dashboard!");

每一份划界案都发出a $feedback 活动。 在你的1mn仪表板中,这些被归档为 反馈 罚单 在你积压的 分解—— 他们从来没有触发一个自主的代理 运行自己.

Next.js (App路由器) (英语)

OnemnProvider 是客户部分——将其变成 "use client" 边界(例如a) providers.tsx 包起来 children 在您的根布局中。 这是SSR安全:没有运行直到 浏览器水合物. <FeedbackWidget> 也是客户部分.

反应路由器 7 / Remix / TanStack Start (SSR)

OnemnProvider - 安全无虞 普通模块 在您的根路径中( 例如) . app/root.tsx包着你的 <Outlet />数字 :

// app/root.tsx — a normal module, NOT a *.client.tsx file
import { OnemnProvider } from "@1mn/react";
import { useSession } from "./lib/auth-client";

export default function App() {
  const { data: session } = useSession();
  return (
    <OnemnProvider apiKey="1mn_pk_xxx" user={session?.user}>
      <Outlet />
    </OnemnProvider>
  );
}

⚠️ 别放 OnemnProvider (或周围的包装) *.client.tsx 归档和渲染 在SSR树上. 反应路由器 7, Remix 和 Vite 空 *.client.* 服务器构建中的模块, 因此导入是 undefined 在SSR和React中弹出 <undefined> —— 说 HTTP 500 每架 路线. OnemnProvider 不需要只为客户;它已经是SSR安全了.

狦 user/会话钩是只客户(它生活在 *.client.* 模块,或为 undefined 打开 服务器,保留 OnemnProvider 安全无虞的安保部 将识别电话传到一个小孩身上 后加护卫useOnemn().identify(...) 内置 a useEffect)————别让 仅限整个供应商客户端。 把它接入后,确认现场还在返回 200没有 500。 。 。 .

API 密码

<OnemnProvider apiKey host? user? >

useOnemn()

回返 { capture, identify, reset, set, feedback, optOut, optIn }. 互为稳定; SSR-安全(服务器上和init前没有操作).

• capture(event, properties?) ——定制事件.
• identify(id, set?, setOnce?) - 通常不需要,如果你通过了 user 到供养.
• set(properties) ——更新人物属性而无需重新识别.
• feedback(message, properties?) ——发送应用反馈/支持信息.
• reset() 明确身份(日志);当 user 清除.
• optOut() 编号 : optIn() ——停止/恢复发送.

<FeedbackWidget />

滴入回馈发射装置+模式. 所有道具可选 :

useFeedback()

回返 { send(message, properties?) } 用于构建自己的反馈 UI.

getOnemn()

现场客户端(或 null ,用于非组件代码.

隐私

默认情况下, SDK 捕捉到没有 DOM 内容( 没有自动捕捉) 和没有 IP 衍生的地理和船只 optOut()。 。 。 . 会话重放 只有一个例外,而且 关闭,除非你启用它 您的钥匙 在1mn仪表板中:当操作时,它记录了抽样部分会话的DOM/交互通过 rrweb,默认情况下隐藏文本输入(添加) onemn-block 编号 : onemn-mask )),以隐藏区域. optOut() 也停止录音。 您是终端用户数据的数据控制器—— 如果您启用的话 重新播放,告诉访客(欧盟/英国/CA同意).

许可证

麻省理工学院——见 自由主义。 。 。 .