@oopsie-app/react

Wrapper oficial de React para @oopsie-app/browser.

Instalação

npm install @oopsie-app/browser @oopsie-app/react

Uso

import { OopsieProvider, OopsieErrorBoundary } from "@oopsie-app/react";

<OopsieProvider
  config={{
    projectKey: "pk_xxx",
    endpoint: "https://www.oopsie.com.br/api/ingest/rum",
    env: "production",
    release: "v1.0.0",
  }}
>
  <OopsieErrorBoundary fallback={<div>Algo deu errado.</div>}>
    <App />
  </OopsieErrorBoundary>
</OopsieProvider>

Hook

import { useOopsie } from "@oopsie-app/react";

function SaveButton() {
  const oopsie = useOopsie();

  return (
    <button
      onClick={() => {
        oopsie.captureEvent("ui.save_click", { area: "settings" });
      }}
    >
      Save
    </button>
  );
}

Router

Para React Router, a recomendação é manter o OopsieProvider acima do router e usar captureEvent() quando quiser marcar rotas ou ações específicas do produto.