Capítulo 222 de 456

instrumentationClientInject

Core Idea

Lista de módulos importados no cliente por seus side effects antes do arquivo instrumentation-client.{js,ts} do usuário rodar (antes da hidratação React) — feito para plugins de next.config.js (ex.: withSentry) injetarem instrumentação sem exigir que cada projeto edite instrumentation-client.

Key Concepts

  • instrumentationClientInject: array de entradas, cada uma um nome de pacote npm (resolvido em node_modules) ou um path relativo à raiz do projeto.
  • onRouterTransitionStart(url, navigationType): hook opcional exportado por cada módulo injetado; Next.js compõe todos em um único hook, chamado em ordem do array, com o hook do arquivo do usuário rodando por último.
  • Ordem de execução: 1) cada entrada de instrumentationClientInject em ordem, 2) instrumentation-client.{js,ts} do projeto, 3) hidratação React.

Code Examples

module.exports = function withMyInstrumentation(nextConfig = {}) {
  return {
    ...nextConfig,
    instrumentationClientInject: [
      ...(nextConfig.instrumentationClientInject ?? []),
      'my-instrumentation-package/client',
    ],
  }
}
  • O que demonstra: padrão de plugin que anexa seu próprio módulo de instrumentação sem sobrescrever o já configurado.

Reference Tables

VersionChanges
v16.3.0instrumentationClientInject introduzido

Key Takeaways

  1. Voltado principalmente para autores de plugins/wrappers de next.config.js, não para código de aplicação comum (use instrumentation-client direto nesse caso).
  2. Cada entrada roda por seus side effects, antes da hidratação.
  3. Módulos sem onRouterTransitionStart são simplesmente ignorados na navegação.

Connects To

  • instrumentation-client.{js,ts}: convenção de arquivo que roda depois de todas as entradas injetadas.
AnteriorinlineCssPróximologging