Instalar o Blipit

1Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

2Com npm

Chame init uma única vez no seu arquivo de entrada, antes de o app renderizar, com a chave pública. Com Vite (React, Vue, Svelte), mantenha a chave em .env como VITE_BLIPIT_KEY; só as variáveis VITE_ chegam ao navegador, e o servidor de desenvolvimento lê o .env apenas ao iniciar.

npm install @blipit/browser

VITE_BLIPIT_KEY=blipit_pk_your_public_key

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 },
});

3Sem bundler: uma tag script

Cole isto no <head> de todas as páginas, ou no espaço de código personalizado da sua plataforma, com a sua chave pública escrita nele. Não há problema: a chave pública só pode enviar eventos.

<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>

4Mantenha as chaves fora do git

Mantenha as chaves em variáveis de ambiente ou nas configurações de segredos do seu host, nunca em código que você faz commit, e adicione seus arquivos .env ao .gitignore. Uma chave pública em uma página web é normal. Se uma chave secreta for parar no git, em uma página pública, em uma captura de tela ou em um chat, abra Chaves de API, clique em Criar uma nova chave secreta e cole a nova chave onde a antiga era usada: a chave antiga para de funcionar na hora.

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

5Diga ao Blipit quem é o usuário (opcional)

Depois do login, anexe o usuário para que os problemas mostrem quem foi afetado e os replays possam ser encontrados por usuário.

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

6React, Vue, Angular e Svelte: reporte os erros capturados

Os frameworks capturam erros dentro dos componentes antes que o navegador os veja, então passe esses erros ao Blipit também. Erros não capturados em qualquer outro lugar são reportados automaticamente.

createRoot(document.getElementById("root")!, {
  onCaughtError: (error) => Blipit.captureException(error),
  onUncaughtError: (error) => Blipit.captureException(error),
}).render(<App />);

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;
  }
}

const app = createApp(App);
app.config.errorHandler = (err) => Blipit.captureException(err);
app.mount("#app");

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 }] };

import * as Blipit from "@blipit/browser";
import type { HandleClientError } from "@sveltejs/kit";

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

7Relatórios de bugs: o botão Reportar erro

Assim que o SDK inicia com a sua chave pública, um botão Reportar erro aparece no canto inferior direito de cada página, no idioma do visitante. Um clique abre o formulário de relato: uma captura de tela da página para marcar, um seletor de elementos, uma gravação de tela opcional, e um título e uma descrição. Altere a posição, o estilo, o texto, a cor e o atalho de teclado no código, como abaixo, ou para todos os sites de uma vez no app.blipit.io, em Configurações do projeto, Widget de relatório de bugs; as opções no código prevalecem. O guia do botão de relatório de bug mostra cada opção com capturas de tela e uma demonstração ao vivo.

Blipit.init({
  key: import.meta.env.VITE_BLIPIT_KEY,
  feedbackWidget: {
    position: "bottom-left",
    style: "icon",
    text: "Report Issue",
    color: "#E11D48",
    shortcut: "ctrl+shift+b",
  },
});

8Abra o formulário de relato a partir do seu próprio botão

Para colocar um botão Reportar erro no seu próprio cabeçalho ou menu, use o oficial: Blipit.reportButton() devolve um botão pronto com o ícone do Blipit e Reportar erro no idioma do visitante, e apps React podem mostrar <BlipitReportButton /> de @blipit/nextjs/react (npm install @blipit/nextjs). Prefere o seu próprio design? Chame openReport() de qualquer manipulador de clique, ou attachReport(element) para ligar um elemento que já existe. Em ambos os casos o formulário abre exatamente como pelo botão flutuante. O ícone do Blipit só pode ser usado ao lado de Reportar erro, como mostra o botão oficial.

<nav id="help-menu"></nav>
<script>
  document.getElementById("help-menu").append(Blipit.reportButton());
</script>

import { BlipitReportButton } from "@blipit/nextjs/react";

export function Header() {
  return (
    <header>
      <a href="/">Acme</a>
      <BlipitReportButton variant="outline" size="sm" />
    </header>
  );
}

<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>

<button id="report-issue">Report Issue</button>
<script>
  Blipit.attachReport(document.getElementById("report-issue"));
</script>

<button onclick="Blipit.openReport()">Report Issue</button>

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

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}

<script setup>
import { openReport } from "@blipit/browser";
</script>

<template>
  <button @click="openReport()">Report Issue</button>
</template>

9Ocultar o botão padrão

Para manter só o seu próprio botão, desative o flutuante com feedbackWidget: false no código (feedbackWidget={false} em <Blipit />), ou desligue Mostrar o botão de relatório nas configurações do Widget de relatório de bugs do projeto para ocultá-lo em todos os sites que usam a chave. openReport() e attachReport() continuam funcionando de qualquer forma.

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

10Preencha o formulário de relato e adicione contexto

Chame setUser após o login: o nome e o e-mail de quem relata já vêm preenchidos, e essa pessoa recebe um e-mail quando você responde ou muda o status. setReportMetadata adiciona seus próprios campos, como o plano ou o tamanho do carrinho, a cada relatório; ele roda quando o relatório é enviado, então os valores estão sempre atualizados.

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

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

11Todas as opções e funções

• key: a chave pública (blipit_pk_). Obrigatória.
• environment e release: exibidos em cada evento; release alimenta regressões e source maps. environment tem production como padrão.
• debug: true registra no console o que o SDK faz, em linhas que começam com [blipit].
• sampleRate (0 a 1), ignoreErrors (strings ou padrões) e beforeSend (edite um evento ou retorne null para descartá-lo) controlam o que é enviado. autoMuteExtensions (ativado por padrão) descarta erros que vêm apenas de extensões do navegador.
• webVitals (ativado por padrão), replay ({ sessionSampleRate, onErrorSampleRate }) e autoSessionTracking (taxas sem falhas, exige release).
• feedbackWidget: false oculta o botão Reportar erro, ou um objeto com position, style, text, color e shortcut o altera. theme: "light", "dark" ou "auto" define o tema do formulário de relato.
• user ({ id, name, email }) e company (um nome ou { id, name }) preenchem o formulário de relato e são adicionados aos relatórios.
• endpoint: só para um ingest auto-hospedado; o padrão é https://in.blipit.io/api/v1/events.
• Funções: captureException(error), captureMessage(text, level), setUser, setTag(key, value), addBreadcrumb({ category, message }), openReport(), attachReport(element), reportButton(options), updateWidget(options), setReportMetadata(fn), showFeedback() e flush(), que retorna uma promise quando os eventos na fila são enviados.
• As configurações do widget alteradas no painel chegam aos navegadores em até uma hora, porque o SDK as guarda por esse tempo; uma janela anônima mostra a alteração na hora.

12Confira se funciona

Recarregue o seu site. O botão Reportar erro aparece no canto inferior direito e, em até um minuto, a visualização de página aparece em Web vitals no app.blipit.io. Depois envie um evento de teste: chame captureMessage uma vez no seu código ou, com a tag script, rode a linha abaixo no console do navegador. Ele aparece em Problemas em poucos segundos.

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

13Se o botão ou os eventos não aparecerem

• Abra o console do navegador e procure linhas que começam com [blipit]. Ative o debug (debug: true no init, ou debug em <Blipit />) para ver se o botão foi exibido, desativado no código ou ocultado pela configuração do projeto.
• O Next.js só envia ao navegador as variáveis cujo nome começa com NEXT_PUBLIC_, então use NEXT_PUBLIC_BLIPIT_KEY. O Vite só envia variáveis VITE_, então use VITE_BLIPIT_KEY. Com qualquer outro nome, a chave fica vazia no navegador e o Blipit não inicia.
• Reinicie o servidor de desenvolvimento depois de adicionar ou alterar .env ou .env.local. Ele os lê apenas ao iniciar.
• Na Vercel ou em qualquer outro host, adicione a mesma variável nas variáveis de ambiente do projeto e faça o deploy novamente. Os valores NEXT_PUBLIC_ e VITE_ são gravados no build, então um deploy em execução nunca vê um valor adicionado depois.
• Use a chave pública (blipit_pk_). Uma chave secreta (blipit_sk_) é recusada no navegador com um erro no console; se alguma já esteve em uma página, crie uma nova chave secreta.
• No Next.js, <Blipit /> vai no app/layout.tsx raiz (ou em pages/_app.tsx) para rodar em todas as páginas. Em outros apps, chame init uma única vez no arquivo de entrada, antes de o app renderizar.
• Mostrar o botão de relatório precisa estar ativado no app.blipit.io, em Configurações do projeto, Widget de relatório de bugs, e o seu código não pode passar feedbackWidget: false. O SDK guarda as configurações do projeto por até uma hora, então teste uma alteração em uma janela anônima.
• Bloqueadores de anúncios e extensões de privacidade podem bloquear in.blipit.io. Teste em uma janela anônima com as extensões desativadas.
• Se o seu site envia uma Content Security Policy, permita script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: e media-src blob:. O editor do relato carrega de blipit.io/sdk no primeiro clique, a captura é desenhada a partir de uma imagem data: e as gravações de tela também são enviadas para in.blipit.io. Com debug ativado, o console avisa quando a política bloqueou a captura. Para que as gravações de tela tenham voz, o cabeçalho Permissions-Policy do site precisa permitir microphone=(self), e display-capture=(self) para a gravação de tela; com microphone=() as gravações funcionam sem som.
• Confira a versão instalada com npm ls @blipit/browser @blipit/nextjs (ou pnpm list @blipit/browser @blipit/nextjs) e compare com o changelog. O pnpm 11 espera um dia antes de instalar uma versão nova (minimum-release-age), então no dia do lançamento o pnpm add instala a versão anterior sem avisar. Para pegar a nova na hora: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
• Travou? Envie um e-mail para support@blipit.io com as linhas [blipit] do console.

1Instalar

npm install @blipit/nextjs

2Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

3Coloque as chaves em .env.local

Crie .env.local na raiz do projeto com a chave pública para o navegador e, se você usar o lado do servidor abaixo, a chave secreta para o servidor. Só os nomes que começam com NEXT_PUBLIC_ chegam ao navegador, então nunca dê esse prefixo à chave secreta. Reinicie o npm run dev depois de salvar o arquivo. Para produção, adicione as mesmas variáveis no seu host (na Vercel: Project, Settings, Environment Variables, para Production e Preview) e faça o deploy novamente: os valores NEXT_PUBLIC_ são gravados no build, então um deploy feito antes de você adicioná-los tem a chave vazia.

NEXT_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

4Lado do navegador

Adicione o componente uma única vez no layout raiz. Ele lê a chave pública de NEXT_PUBLIC_BLIPIT_KEY. Se a variável estiver vazia, ele não inicia nada e avisa no console do navegador.

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>
  );
}

5Lado do servidor

O Next.js 15 e posteriores chamam onRequestError para erros em server components, route handlers e server actions. Uma linha em instrumentation.ts o conecta ao Blipit. A partir do @blipit/nextjs 0.2.1, a mesma linha também funciona em apps com um middleware.ts e em rotas Edge (runtime = "edge"): o app compila, e os erros do middleware e do Edge também são reportados. O Next.js 14 não tem onRequestError, então envolva cada route handler e server action com withBlipit, como no segundo exemplo: ele reporta o erro e o lança de novo, e ignora redirecionamentos e notFound(). Defina BLIPIT_SECRET_KEY no ambiente do servidor, nunca como NEXT_PUBLIC_.

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

import { withBlipit } from "@blipit/nextjs/server";

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

6Dependências e saúde do servidor

A partir do @blipit/nextjs 0.3, exporte também register para que o Blipit arranque com o servidor. Assim regista as chamadas à base de dados e a serviços externos na página Dependências, e o CPU, memória e event loop do servidor em Saúde do servidor. Não faz nada no runtime Edge. Na Vercel, register pode não ver o pedido recebido: a partir de @blipit/nextjs 0.4, envolva os route handlers e server actions em withBlipit e cada um passa a ser um pedido na página Pulse com as suas chamadas à base de dados e a serviços externos, enviado depois da resposta sem a atrasar.

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

import { withBlipit } from "@blipit/nextjs/server";

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

7Erros capturados por error.tsx

Erros que um boundary error.tsx ou global-error.tsx captura nunca chegam ao handler de erros do navegador, então reporte-os a partir do boundary. Os dois arquivos são client components.

"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>
  );
}

"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>
  );
}

8Mantenha as chaves fora do git

Mantenha as chaves em variáveis de ambiente ou nas configurações de segredos do seu host, nunca em código que você faz commit, e adicione seus arquivos .env ao .gitignore. Uma chave pública em uma página web é normal. Se uma chave secreta for parar no git, em uma página pública, em uma captura de tela ou em um chat, abra Chaves de API, clique em Criar uma nova chave secreta e cole a nova chave onde a antiga era usada: a chave antiga para de funcionar na hora.

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

9Content Security Policy

Se o seu site envia uma Content Security Policy, permita script-src https://blipit.io (a tag script, e o editor do relato e o complemento de replay, que carregam de blipit.io/sdk/<version>/ no primeiro uso), connect-src https://in.blipit.io (eventos, capturas e gravações de tela vão todos para in.blipit.io), img-src data: (a captura é desenhada a partir de uma imagem da página) e media-src blob: (as gravações são reproduzidas no relato). A captura recarrega as imagens e fontes da página, então os hosts delas também precisam estar em connect-src, senão ficam em branco. Não é preciso mudar style-src. Com a tag script, chame Blipit.init a partir do seu próprio arquivo .js ou dê um nonce ao script inline, porque uma política rígida bloqueia scripts inline. Para que as gravações de tela tenham voz, o cabeçalho Permissions-Policy do site precisa permitir microphone=(self), e display-capture=(self) para a gravação de tela; com microphone=() as gravações funcionam sem som.

10Source maps (opcional)

Para que os stack traces mostrem seu código-fonte em vez do bundle minificado, envie os maps de cada release a partir da sua etapa de build.

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

11Relatórios de bugs: o botão Reportar erro

Assim que o SDK inicia com a sua chave pública, um botão Reportar erro aparece no canto inferior direito de cada página, no idioma do visitante. Um clique abre o formulário de relato: uma captura de tela da página para marcar, um seletor de elementos, uma gravação de tela opcional, e um título e uma descrição. Altere a posição, o estilo, o texto, a cor e o atalho de teclado no código, como abaixo, ou para todos os sites de uma vez no app.blipit.io, em Configurações do projeto, Widget de relatório de bugs; as opções no código prevalecem. O guia do botão de relatório de bug mostra cada opção com capturas de tela e uma demonstração ao vivo.

<Blipit
  publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!}
  feedbackWidget={{
    position: "bottom-left",
    style: "icon",
    text: "Report Issue",
    color: "#E11D48",
    shortcut: "ctrl+shift+b",
  }}
/>

12Abra o formulário de relato a partir do seu próprio botão

Coloque o botão oficial em qualquer lugar com <BlipitReportButton />, também em server components: ele mostra o ícone do Blipit e Reportar erro no idioma do visitante e abre o formulário. Prefere o seu próprio design? O componente que chama openReport precisa ser um client component, então coloque "use client" no início do arquivo. <Blipit /> já precisa estar em app/layout.tsx. Apps React sem Next.js importam o botão de @blipit/nextjs/react e openReport de @blipit/browser.

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

export function Header() {
  return (
    <header>
      <a href="/">Acme</a>
      <BlipitReportButton />
    </header>
  );
}

import { BlipitReportButton } from "@blipit/nextjs/react";

<BlipitReportButton variant="outline" size="sm" />

"use client";

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

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}

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

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}

13Ocultar o botão padrão

Para manter só o seu próprio botão, desative o flutuante com feedbackWidget: false no código (feedbackWidget={false} em <Blipit />), ou desligue Mostrar o botão de relatório nas configurações do Widget de relatório de bugs do projeto para ocultá-lo em todos os sites que usam a chave. openReport() e attachReport() continuam funcionando de qualquer forma.

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

14Preencha o formulário de relato e adicione contexto

Chame setUser após o login: o nome e o e-mail de quem relata já vêm preenchidos, e essa pessoa recebe um e-mail quando você responde ou muda o status. setReportMetadata adiciona seus próprios campos, como o plano ou o tamanho do carrinho, a cada relatório; ele roda quando o relatório é enviado, então os valores estão sempre atualizados.

"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;
}

15Confira se funciona

Recarregue o app. O botão Reportar erro aparece no canto inferior direito e, em até um minuto, a visualização de página aparece em Web vitals no app.blipit.io. Depois adicione um botão que chama captureMessage, ou um que lança um erro, e clique nele: o evento aparece em Problemas em poucos segundos.

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

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

16Se o botão ou os eventos não aparecerem

• Abra o console do navegador e procure linhas que começam com [blipit]. Ative o debug (debug: true no init, ou debug em <Blipit />) para ver se o botão foi exibido, desativado no código ou ocultado pela configuração do projeto.
• O Next.js só envia ao navegador as variáveis cujo nome começa com NEXT_PUBLIC_, então use NEXT_PUBLIC_BLIPIT_KEY. O Vite só envia variáveis VITE_, então use VITE_BLIPIT_KEY. Com qualquer outro nome, a chave fica vazia no navegador e o Blipit não inicia.
• Reinicie o servidor de desenvolvimento depois de adicionar ou alterar .env ou .env.local. Ele os lê apenas ao iniciar.
• Na Vercel ou em qualquer outro host, adicione a mesma variável nas variáveis de ambiente do projeto e faça o deploy novamente. Os valores NEXT_PUBLIC_ e VITE_ são gravados no build, então um deploy em execução nunca vê um valor adicionado depois.
• Use a chave pública (blipit_pk_). Uma chave secreta (blipit_sk_) é recusada no navegador com um erro no console; se alguma já esteve em uma página, crie uma nova chave secreta.
• No Next.js, <Blipit /> vai no app/layout.tsx raiz (ou em pages/_app.tsx) para rodar em todas as páginas. Em outros apps, chame init uma única vez no arquivo de entrada, antes de o app renderizar.
• Mostrar o botão de relatório precisa estar ativado no app.blipit.io, em Configurações do projeto, Widget de relatório de bugs, e o seu código não pode passar feedbackWidget: false. O SDK guarda as configurações do projeto por até uma hora, então teste uma alteração em uma janela anônima.
• Bloqueadores de anúncios e extensões de privacidade podem bloquear in.blipit.io. Teste em uma janela anônima com as extensões desativadas.
• Se o seu site envia uma Content Security Policy, permita script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: e media-src blob:. O editor do relato carrega de blipit.io/sdk no primeiro clique, a captura é desenhada a partir de uma imagem data: e as gravações de tela também são enviadas para in.blipit.io. Com debug ativado, o console avisa quando a política bloqueou a captura. Para que as gravações de tela tenham voz, o cabeçalho Permissions-Policy do site precisa permitir microphone=(self), e display-capture=(self) para a gravação de tela; com microphone=() as gravações funcionam sem som.
• Confira a versão instalada com npm ls @blipit/browser @blipit/nextjs (ou pnpm list @blipit/browser @blipit/nextjs) e compare com o changelog. O pnpm 11 espera um dia antes de instalar uma versão nova (minimum-release-age), então no dia do lançamento o pnpm add instala a versão anterior sem avisar. Para pegar a nova na hora: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
• Travou? Envie um e-mail para support@blipit.io com as linhas [blipit] do console.

1Instalar

npm install @blipit/node

2Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

3Mantenha a chave no ambiente

O Node usa a chave secreta. Coloque-a em uma variável de ambiente, nunca no código: localmente em um arquivo .env que o Node 20.6 ou posterior carrega com --env-file, e em produção no ambiente ou nas configurações de segredos do seu host (Fly secrets, Docker, systemd, Render, Vercel). Reinicie o processo depois de alterá-la.

BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

node --env-file=.env --import ./instrument.mjs server.mjs

4Mantenha as chaves fora do git

Mantenha as chaves em variáveis de ambiente ou nas configurações de segredos do seu host, nunca em código que você faz commit, e adicione seus arquivos .env ao .gitignore. Uma chave pública em uma página web é normal. Se uma chave secreta for parar no git, em uma página pública, em uma captura de tela ou em um chat, abra Chaves de API, clique em Criar uma nova chave secreta e cole a nova chave onde a antiga era usada: a chave antiga para de funcionar na hora.

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

5Inicialize primeiro

Coloque isto em um arquivo que rode antes do seu app, e importe-o primeiro.

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 ou NestJS

Adicione o handler depois das suas rotas para que erros tratados e não tratados cheguem ao Blipit, com o método, a URL e o user agent da requisição. Koa, Hono e NestJS precisam de uma linha cada: o middleware do Koa vem primeiro, o do Hono antes das rotas. Reportam erros com estado 500 ou superior. Os pedidos aparecem então na página Pulse por rota, como GET /users/:id, em vez de uma linha por URL.

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);

await app.register(Blipit.fastifyPlugin());

app.use(Blipit.koaMiddleware());

app.use(Blipit.honoMiddleware());

app.useGlobalInterceptors(Blipit.nestInterceptor());

7Serverless: AWS Lambda e Vercel

Os hosts serverless pausam a função assim que ela responde, e o Lambda não executa o servidor HTTP do Node, por isso envolva o handler. wrapHandler regista o pedido (eventos de API Gateway, URL de função e load balancer por método e rota, outros eventos pelo nome da função), reporta erros e envia tudo antes de o handler devolver; só espera quando há algo para enviar, no máximo 2 segundos. traceRequest faz o mesmo para qualquer handler que receba um Request. Na Vercel os dados saem depois da resposta através de waitUntil, por isso nada é atrasado. No Next.js use withBlipit (veja o guia do Next.js).

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

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

export default { fetch: (request) => Blipit.traceRequest(request, () => app.fetch(request)) };

8Captura manual, logs e tentativas de login

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();

9Dependências e saúde do servidor

A partir da 0.2, o SDK também regista as suas chamadas à base de dados e a serviços externos, e o CPU, memória e event loop do servidor. Veja os guias Dependências e Saúde do servidor; controla-se com tracesSampleRate, tracing: false e metrics: false.

10Confira se funciona

Abra Problemas em app.blipit.io. O primeiro evento aparece em alguns segundos, agrupado em um problema, e os responsáveis recebem um e-mail.

Blipit.captureMessage("Hello from Node");

1Instalar

pip install blipit

2Inicialize na inicialização

No Django, coloque no topo do settings.py. No Flask ou FastAPI, antes de criar o app. A chave fica na página Chaves do projeto. Com uma chave vazia, init registra um aviso e retorna False em vez de lançar uma exceção, então uma chave ausente nunca impede o app de iniciar.

import blipit

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

3Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

4Mantenha a chave no ambiente

Este SDK envia com a chave pública da página Chaves de API do projeto. Guarde-a em uma variável de ambiente: localmente em um arquivo .env carregado pelo seu framework ou pelo python-dotenv, em produção nas configurações do seu host. Use a chave secreta apenas se você enviar tentativas de login.

BLIPIT_KEY=blipit_pk_your_public_key

import os
import blipit

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

5Mantenha as chaves fora do git

Mantenha as chaves em variáveis de ambiente ou nas configurações de segredos do seu host, nunca em código que você faz commit, e adicione seus arquivos .env ao .gitignore. Uma chave pública em uma página web é normal. Se uma chave secreta for parar no git, em uma página pública, em uma captura de tela ou em um chat, abra Chaves de API, clique em Criar uma nova chave secreta e cole a nova chave onde a antiga era usada: a chave antiga para de funcionar na hora.

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

6Captura manual e tentativas de login

As tentativas de login precisam da chave secreta: no servidor, inicialize com a chave secreta em vez da pública, ou a ingestão as recusa com 403 security_needs_secret_key. Plano Scale.

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")

7Confira se funciona

Abra Problemas em app.blipit.io. O primeiro evento aparece em alguns segundos, agrupado em um problema, e os responsáveis recebem um e-mail.

blipit.capture_message("Hello from Python")

1Instalar

composer require blipit/blipit

2Inicialize na inicialização

PHP puro: no topo do seu front controller, antes de qualquer requisição ser tratada. O Laravel inicia o Blipit a partir da configuração, como no próximo passo. A chave fica na página Chaves do projeto. Com uma chave vazia, init grava um aviso no log de erros e retorna false em vez de lançar uma exceção.

use Blipit\Blipit;

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

3Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

4Mantenha a chave no ambiente

Este SDK envia com a chave pública. Laravel: adicione-a ao .env e ao config/services.php; o service provider do Blipit é descoberto sozinho e inicia o Blipit a partir dessa configuração, então não é preciso mais nada. Leia os valores por meio de config, porque env() não retorna nada no código do app depois que a configuração é colocada em cache. PHP puro: leia a chave com getenv() do ambiente do servidor.

BLIPIT_KEY=blipit_pk_your_public_key

'blipit' => [
    'key' => env('BLIPIT_KEY'),
    'environment' => env('APP_ENV'),
    'release' => env('GIT_SHA'),
],

5Mantenha as chaves fora do git

Mantenha as chaves em variáveis de ambiente ou nas configurações de segredos do seu host, nunca em código que você faz commit, e adicione seus arquivos .env ao .gitignore. Uma chave pública em uma página web é normal. Se uma chave secreta for parar no git, em uma página pública, em uma captura de tela ou em um chat, abra Chaves de API, clique em Criar uma nova chave secreta e cole a nova chave onde a antiga era usada: a chave antiga para de funcionar na hora.

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

6Laravel e Symfony

Laravel: toda exceção que o handler reporta chega ao Blipit, então 404s e erros de validação ficam de fora. Consultas, linhas de log e chamadas do cliente HTTP viram breadcrumbs, e jobs em fila são rastreados. Uma linha Blipit::captureException que você já tenha em bootstrap/app.php pode ficar: a mesma exceção nunca é enviada duas vezes. Symfony: registre o listener em config/services.yaml e chame Blipit::init logo no início de public/index.php e bin/console.

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 }

7Captura manual e tentativas de login

As tentativas de login precisam da chave secreta: no servidor, inicialize com a chave secreta em vez da pública, ou a ingestão as recusa com 403 security_needs_secret_key. Plano Scale.

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());

8Confira se funciona

Abra Problemas em app.blipit.io. O primeiro evento aparece em alguns segundos, agrupado em um problema, e os responsáveis recebem um e-mail.

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

1Gemfile

gem "blipit"

2Inicialize na inicialização

Rails: config/initializers/blipit.rb; não há mais nada para instalar, porque o Blipit adiciona sozinho o seu middleware Rack, o Active Job e o reporte via Rails.error. Apps Rack e Sinatra adicionam use Blipit::Rack. Scripts: antes do seu código rodar. A chave fica na página Chaves do projeto. Com uma chave vazia, init exibe um aviso e retorna false em vez de lançar uma exceção.

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

3Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

4Mantenha a chave nas credentials do Rails

Este SDK envia com a chave pública. No Rails, guarde-a nas credentials criptografadas e leia-a no initializer; em outros casos, use uma variável de ambiente.

bin/rails credentials:edit

blipit:
  key: blipit_pk_your_public_key

Blipit.init(
  key: Rails.application.credentials.dig(:blipit, :key),
  environment: Rails.env,
)

5Mantenha as chaves fora do git

Mantenha as chaves em variáveis de ambiente ou nas configurações de segredos do seu host, nunca em código que você faz commit, e adicione seus arquivos .env ao .gitignore. Uma chave pública em uma página web é normal. Se uma chave secreta for parar no git, em uma página pública, em uma captura de tela ou em um chat, abra Chaves de API, clique em Criar uma nova chave secreta e cole a nova chave onde a antiga era usada: a chave antiga para de funcionar na hora.

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

6Captura manual e tentativas de login

As tentativas de login precisam da chave secreta: no servidor, inicialize com a chave secreta em vez da pública, ou a ingestão as recusa com 403 security_needs_secret_key. Plano Scale.

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)

7Confira se funciona

Abra Problemas em app.blipit.io. O primeiro evento aparece em alguns segundos, agrupado em um problema, e os responsáveis recebem um e-mail.

Blipit.capture_message("Hello from Rails")

1Instalar

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

2Inicialize em main

Init nunca entra em panic: com uma chave ou um id de projeto vazio, ele retorna um erro e o Blipit fica desligado, então registre o erro em vez de encerrar.

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)
}

3Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

4Mantenha a chave no ambiente

Este SDK envia com a chave pública e o id do projeto. Leia-os de variáveis de ambiente definidas pelo seu host, por uma unit do systemd ou por docker run -e.

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

5Mantenha as chaves fora do git

Mantenha as chaves em variáveis de ambiente ou nas configurações de segredos do seu host, nunca em código que você faz commit, e adicione seus arquivos .env ao .gitignore. Uma chave pública em uma página web é normal. Se uma chave secreta for parar no git, em uma página pública, em uma captura de tela ou em um chat, abra Chaves de API, clique em Criar uma nova chave secreta e cole a nova chave onde a antiga era usada: a chave antiga para de funcionar na hora.

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

6Captura manual e tentativas de login

As tentativas de login precisam da chave secreta: no servidor, inicialize com a chave secreta em vez da pública, ou a ingestão as recusa com 403 security_needs_secret_key. Plano Scale.

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"})

7Panics e net/http

defer blipit.Recover() no topo de main ou de qualquer goroutine reporta um panic com a sua stack, envia o que está na fila e entra em panic de novo. Envolva o handler que você serve com blipit.Handler para reportar panics com a requisição e medir o tempo de cada requisição no Pulse, com o nome do padrão do ServeMux. Gin, Echo e Fiber usam StartRequest, SetRoute e End, mostrados no README do pacote.

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

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

8Confira se funciona

Abra Problemas em app.blipit.io. O primeiro evento aparece em alguns segundos, agrupado em um problema, e os responsáveis recebem um e-mail.

blipit.CaptureMessage("Hello from Go")

1Adicione o repositório e a dependência

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

dependencies {
    implementation("com.github.blipit-io:blipit-java:v0.2.1")
}

<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>

2Inicialize na inicialização

Spring Boot: no topo de main, antes de SpringApplication.run, ou em um método @PostConstruct de uma classe @Configuration. Exceções não capturadas em qualquer thread são gravadas em uma fila no disco antes de o app parar e depois enviadas, então uma falha é reportada mesmo sem rede; o que sobrar é enviado na próxima inicialização.

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());

3Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

4Mantenha a chave no ambiente

Este SDK envia com a chave pública e o id do projeto. Leia-os de variáveis de ambiente ou, no Spring Boot, de application.properties preenchido a partir do ambiente.

blipit.key=${BLIPIT_KEY}
blipit.project=${BLIPIT_PROJECT}

Blipit.init(BlipitOptions.builder()
    .key(System.getenv("BLIPIT_KEY"))
    .project(Long.parseLong(System.getenv("BLIPIT_PROJECT")))
    .build());

5Mantenha as chaves fora do git

Mantenha as chaves em variáveis de ambiente ou nas configurações de segredos do seu host, nunca em código que você faz commit, e adicione seus arquivos .env ao .gitignore. Uma chave pública em uma página web é normal. Se uma chave secreta for parar no git, em uma página pública, em uma captura de tela ou em um chat, abra Chaves de API, clique em Criar uma nova chave secreta e cole a nova chave onde a antiga era usada: a chave antiga para de funcionar na hora.

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

6Captura manual e tentativas de login

As tentativas de login precisam da chave secreta: no servidor, inicialize com a chave secreta em vez da pública, ou a ingestão as recusa com 403 security_needs_secret_key. Plano Scale.

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);

7Confira se funciona

Abra Problemas em app.blipit.io. O primeiro evento aparece em alguns segundos, agrupado em um problema, e os responsáveis recebem um e-mail.

Blipit.captureMessage("Hello from Java");

1Instalar

dotnet add package Blipit

2Inicialize na inicialização

Mantenha o handle retornado vivo durante toda a vida do processo. Os dois valores estão na página de Chaves do projeto.

using Blipit;

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

3Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

4Mantenha a chave na configuração

Este SDK envia com a chave pública e o id do projeto. Mantenha-os em user secrets durante o desenvolvimento e em variáveis de ambiente em produção (Blipit__Key e Blipit__Project), e depois leia-os da configuração.

dotnet user-secrets set "Blipit:Key" "blipit_pk_your_public_key"
dotnet user-secrets set "Blipit:Project" "12"

using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = builder.Configuration["Blipit:Key"],
    Project = builder.Configuration["Blipit:Project"],
});

5Mantenha as chaves fora do git

Mantenha as chaves em variáveis de ambiente ou nas configurações de segredos do seu host, nunca em código que você faz commit, e adicione seus arquivos .env ao .gitignore. Uma chave pública em uma página web é normal. Se uma chave secreta for parar no git, em uma página pública, em uma captura de tela ou em um chat, abra Chaves de API, clique em Criar uma nova chave secreta e cole a nova chave onde a antiga era usada: a chave antiga para de funcionar na hora.

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

6ASP.NET Core e logging

Não há mais nada para adicionar: chame Init no topo do Program.cs. Exceções de endpoints, controllers e middleware são reportadas com a requisição, também quando UseExceptionHandler as trata, e com TracesSampleRate definido cada requisição amostrada é cronometrada no Pulse pela sua rota. BlipitLoggerProvider transforma Information e acima em breadcrumbs e Error e acima em eventos.

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());

7Captura manual e tentativas de login

As tentativas de login precisam da chave secreta: no servidor, inicialize com a chave secreta em vez da pública, ou a ingestão as recusa com 403 security_needs_secret_key. Plano Scale.

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);

8Confira se funciona

Abra Problemas em app.blipit.io. O primeiro evento aparece em alguns segundos, agrupado em um problema, e os responsáveis recebem um e-mail.

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

1Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

2React Native

O pacote vincula um pequeno módulo nativo que inicia os SDKs próprios do Blipit para Android e iOS para falhas nativas; o arquivo Gradle dele adiciona o repositório JitPack sozinho. Envolva o componente raiz para que erros de renderização também sejam reportados.

npm install @blipit/react-native
npx pod-install

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

Substitua runApp no main.dart por Blipit.init. O plugin inicia os SDKs próprios do Blipit para Android e iOS para falhas nativas, e erros do framework Flutter e erros assíncronos não capturados são reportados por conta própria.

flutter pub add blipit_flutter

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 e macOS (Swift Package)

No Xcode, File, Add Package Dependencies, e digite a URL do repositório; ou adicione-o ao Package.swift e adicione BlipitSwift ao seu target. Com CocoaPods, use o pod BlipitSwift. Depois chame start uma vez na abertura. Com uma chave ou um id de projeto vazio, start exibe um aviso e retorna false em vez de travar o app.

.package(url: "https://github.com/blipit-io/blipit-swift", from: "0.6.0")

pod "BlipitSwift", "~> 0.6.0"

import BlipitSwift

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

5Android

Adicione o JitPack aos repositories em settings.gradle.kts, a dependência ao módulo do app, e chame init em Application.onCreate.

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven("https://jitpack.io")
    }
}

implementation("com.github.blipit-io:blipit-android:v0.6.0")

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"
        }
    }
}

6Onde a chave fica em um app

Os apps levam a chave pública e o id do projeto dentro do app, e não há problema nisso: a chave pública só pode enviar eventos. Nunca coloque a chave secreta em um app. Passe-as no momento do build para que fiquem fora do seu repositório.

flutter run --dart-define=BLIPIT_KEY=blipit_pk_your_public_key --dart-define=BLIPIT_PROJECT=12

const key = String.fromEnvironment('BLIPIT_KEY');
const project = int.fromEnvironment('BLIPIT_PROJECT');

EXPO_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
EXPO_PUBLIC_BLIPIT_PROJECT=12

buildConfigField("String", "BLIPIT_KEY", ""${project.findProperty("blipitKey")}"")

BLIPIT_KEY = blipit_pk_your_public_key

7Relatórios de bugs em apps

Chame showReport a partir de um item de menu seu, ou ative o botão flutuante Reportar um bug. O relator pergunta primeiro como mostrar o problema: tirar uma captura, gravar a tela (iOS) ou só descrever. A captura abre em tela cheia com as ferramentas acima e abaixo, nunca por cima; faça pinça ou toque duas vezes para ampliar, marque o problema, adicione um título e o que aconteceu e envie. Os relatos chegam em Relatos de bugs com os dados do aparelho. React Native precisa de react-native-view-shot para capturas.

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

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

Blipit.showReport();

appRunner: () => runApp(const BlipitReporter(showButton: true, child: MyApp())),

Blipit.showReport();

Blipit.showReportButton()

Blipit.showReport()

Blipit.showReportButton()

Blipit.showReport()

8Reporte a partir da tela com o erro

Um item Reportar um erro num menu como Perfil captura o menu, não o problema. Ative as formas que começam na própria tela; todas vêm desativadas e não pedem permissão. shakeToReport abre o formulário quando o celular é sacudido. screenshotToReport pergunta "Reportar um erro com esta tela?" depois de uma captura de tela normal e anexa a captura própria do Blipit (iOS e Android 14 ou mais recente). twoFingerReport abre o formulário após um toque longo de cerca de um segundo com dois dedos, sem bloquear os toques do app. reportAfterCrash pergunta o que a pessoa estava fazendo na primeira abertura depois de uma falha e liga o relatório a essa falha. screenPicker, ativado por padrão, deixa quem abre o formulário por um menu escolher em qual das últimas telas está o erro: as capturas ficam na memória do aparelho e só a escolhida é enviada. Apps com Jetpack Compose e SwiftUI dão nome às telas com setScreen.

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")
}

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") }

Blipit.init({
  key: "<public key>",
  project: <project id>,
  shakeToReport: true,
  screenshotToReport: true,
  twoFingerReport: true,
  reportAfterCrash: true,
});

<NavigationContainer ref={navigation} onReady={() => Blipit.trackNavigation(navigation)}>

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()))),
);

9Botão flutuante só para testadores

No app.blipit.io, abra o projeto e, nas configurações do botão de relatório de erros, defina Botão flutuante nos apps de celular como Todos ou Somente testadores, com um ID de usuário ou e-mail por testador. O app envia a pessoa definida com setUser e o Blipit responde só sim ou não, então a lista de testadores nunca vai dentro do app. Chamar showReportButton (showButton no React Native e no Flutter) continua mostrando o botão para todos.

Blipit.setUser(id = user.id, email = user.email)

Blipit.setUser(id: user.id, email: user.email)

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

Blipit.setUser(BlipitUser(id: user.id, email: user.email));

10Detetar um app que fica travado

Algumas falhas nunca causam um crash: a tela de abertura continua girando ou o login nunca volta. Ative waitForReady e chame reportReady quando a primeira tela utilizável aparecer. Envolva fluxos como o login com startFlow e endFlow e marque os passos com flowStep. Se um deles não terminar a tempo, o Blipit abre um problema Travada com o último passo e o rastro anterior. Só conta o tempo na tela, e o Blipit define os limites de tempo. Os nomes são enviados como escritos, então use nomes fixos, nunca e-mails ou outros dados do usuário.

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")

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")

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");

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');

11Confira se funciona

Abra Problemas em app.blipit.io. O primeiro evento aparece em alguns segundos, agrupado em um problema, e os responsáveis recebem um e-mail.

1Instale o módulo

Baixe-o em apps.odoo.com (blipit_monitor, gratuito) para a sua versão do Odoo e instale como qualquer módulo: Aplicativos, Atualizar lista de aplicativos, instalar Blipit Error Monitoring. O Odoo Online não permite apps de terceiros; o Odoo.sh e o on-premise permitem.

2Obtenha suas chaves

Entre no app.blipit.io e abra Chaves de API na barra lateral, depois o seu projeto. Cada projeto tem duas chaves. A chave pública começa com blipit_pk_: ela vai no código do navegador e do app, só pode enviar eventos e é segura para qualquer pessoa ver. A chave secreta começa com blipit_sk_: ela fica no seu servidor ou no Odoo, nunca em um navegador, porque também pode ler e alterar problemas. A chave secreta é exibida uma única vez, logo depois de criada, então copie-a nesse momento; se você a perder, clique em Criar uma nova chave secreta, e a antiga para de funcionar na hora. Alguns SDKs também precisam do id do projeto, exibido na mesma página.

3Conecte

Configurações, Blipit: cole a chave secreta do projeto, marque o aceite dos Termos e da licença do módulo e pressione Salvar. Ele conecta sozinho e mostra Conectado a <project>. Uma chave pública ou uma chave já vinculada a outro banco de dados é recusada com o motivo.

4Responsáveis

Escolha quem recebe e-mail, por empresa se você tiver várias. Cada pessoa ocupa um assento do seu plano; o Blipit verifica a contagem quando você salva.

5Relatórios de bugs do Odoo

O módulo adiciona o botão Reportar erro ao Odoo para você; não há código para escrever. Em Configurações, Blipit, Relatórios de bugs, Exibido para, escolha quem o vê: Usuários internos, Visitantes do site, Ambos ou Ninguém, e, se quiser, limite os usuários internos a um grupo. Os relatórios trazem o modelo, o registro e o campo em que a pessoa estava, e o nome e o e-mail do usuário conectado já vêm preenchidos. Posição, cor, texto e estilo vêm do app.blipit.io, em Configurações do projeto, Widget de relatório de bugs. Veja o guia do botão de relatório de bug para todas as opções.

6Confira se funciona

Abra o app Blipit no Odoo. O próximo erro aparece lá e na caixa de entrada dos responsáveis. Clique em Atualizar do Blipit para conferir na hora.