Voltar para a HomePage
SDK browser para host e remotes
Documentação do SDK

Primeiro valor em até 15 minutos com uma integração pequena e verificável.

Instale o pacote, inicialize o cliente no host principal e gere um evento real de runtime para ver a primeira timeline na console. Sem PoC longa e sem depender de instrumentação manual em toda a plataforma.

Começar trialVer instalação
Tempo até valor1 host instrumentado + 1 fluxo crítico observado
Sinais automáticos`window.message`, `error` e `unhandledrejection` já entram no fluxo
Leitura finalTimeline com release, ambiente e contexto de autenticação
Wizard de instalação

O caminho mais curto até a primeira sessão ingerida.

15 minutos
Passo 1

Instale o SDK no host principal

Adicione o pacote no shell ou host que orquestra a navegação entre remotes.

Passo 2

Cole a chave e inicie a sessão

Use a chave criada no onboarding para começar a enviar eventos para ingestão.

Passo 3

Gere um evento real do runtime

Capture postMessage, erro de runtime ou validação de token para ver a primeira timeline sem depender de apoio comercial.

1. Instale

Adicione o pacote ao host ou shell principal

npm install @mfe-debugger/sdk

Comece pelo host que orquestra remotes e autenticação. Isso já captura bastante contexto antes de expandir a instrumentação.

2. Inicialize

Suba o cliente com projeto, ambiente e release

import { createMfeDebugger } from "@mfe-debugger/sdk";

const debuggerClient = await createMfeDebugger({
  apiUrl: "https://mfe-debugger.com",
  ingestUrl: "https://mfe-debugger.com",
  apiKey: "cole-sua-api-key",
  project: "seu-projeto",
  environment: "production",
  title: "host shell",
  flushIntervalMs: 2000,
  release: {
    version: "2026.04.08"
  },
  manifest: {
    name: "host-shell",
    version: "1.0.0",
    origin: window.location.origin
  }
});
3. Observe o remote

Conecte mensagens recebidas e validação de token

window.addEventListener("message", (event) => {
  debuggerClient.trackMessageReceived({
    event,
    channel: "checkout.auth",
    sourceMfe: "host-shell"
  });
});

const token = sessionStorage.getItem("token");

debuggerClient.validateJwt({
  token,
  expectedIssuer: "https://auth.sua-plataforma.dev",
  expectedAudience: "checkout"
});

O host e o remote passam a compartilhar evidências sobre contrato, origem e autenticação dentro da mesma sessão.

Primeiro valor

Checklist para sair da instalação e cair na console

  • Criar ou reutilizar uma chave de API do projeto prioritário.
  • Inicializar o SDK no host shell com createMfeDebugger.
  • Abrir um fluxo crítico e provocar uma interação entre host e remote.
  • Conferir a sessão ingerida na console e inspecionar evidências.

Assim que a primeira sessão aparecer, a visão geral da console já passa a refletir score, sinais críticos e evidências acionáveis.

Quickstarts

Exemplos prontos para copiar por runtime

Next, Vite, Federation
  • `packages/sdk/examples/next-host.ts` para host shell em Next.js.
  • `packages/sdk/examples/vite-host.ts` para apps Vite.
  • `packages/sdk/examples/module-federation-host.ts` para host com remotes federados.
  • `packages/sdk/examples/remote-runtime.ts` para evidencias no remote.

O runbook completo vive em `docs/sdk-quickstarts.md` e acompanha o pacote publicado no npm.

Publicacao

Checklist npm antes de abrir o pacote

npm run build --workspace @mfe-debugger/sdk
npm pack --workspace @mfe-debugger/sdk --dry-run
npm publish --workspace @mfe-debugger/sdk --access public --provenance

Atualize versao, changelog e compatibilidade antes do `publish`. O pacote usa `publishConfig.provenance`.

Compatibilidade

Contrato entre SDK e backend

0.1.x
  • SDK 0.1.x fala com ingest API 0.1.x.
  • O backend aceita campos opcionais desconhecidos e o SDK nao depende deles sem changelog.
  • Novos event kinds podem entrar em minor; remocao fica reservada para major depois do 1.0.
  • Payloads customizados devem ser sanitizados pela aplicacao antes de envio.
Changelog

O que muda em cada release

`packages/sdk/CHANGELOG.md` documenta APIs adicionadas, notas operacionais e possiveis quebras enquanto o SDK estiver em `0.x`.

`packages/sdk/COMPATIBILITY.md` define suporte de browsers, event kinds e politica de deprecacao.

Próximo passo

Use o onboarding da console para copiar uma chave real e finalizar a ativação.

Se você já está autenticado, o wizard interno mostra o projeto prioritário, a chave disponível e o snippet pronto para colar no runtime.

Entrar para configurar
MFE Debugger