O Que É um Source Map? Depurando Código Minificado
Um source map é um arquivo JSON que mapeia posições na saída transformada e minificada de volta às linhas e colunas exatas da sua fonte original.
O JavaScript de produção é transpilado, empacotado e minificado até mal se parecer com o que você escreveu. Quando um erro dispara, o stack trace aponta para aquela saída deformada, o que é inútil para depurar. Um source map restaura a conexão, permitindo que as dev tools do browser e os rastreadores de erro mostrem sua fonte real. Como e onde você gera e faz upload dos maps é uma decisão de CI.
O que um source map contém
Um source map é um documento JSON com os nomes dos arquivos originais, o conteúdo da fonte original (opcionalmente) e um conjunto compacto de mapeamentos de cada posição gerada para sua posição na fonte. A ferramenta de build o emite junto do arquivo de saída.
Como o browser o usa
Um comentário no fim do arquivo de saída aponta para o map. Quando as dev tools estão abertas, o browser busca o map e exibe a fonte original no depurador e nos stack traces, mesmo que o código em execução esteja minificado.
O trade-off de privacidade
- Maps públicos tornam o código de produção fácil de ler e fazer engenharia reversa.
- Muitos times fazem upload dos maps para um rastreador de erros em vez de servi-los publicamente.
- Source maps ocultos emitem o arquivo sem o comentário de referência público.
Source maps e rastreamento de erros
Ferramentas como o Sentry simbolizam stack traces minificados usando os maps enviados. O pipeline faz o build com os maps, faz upload deles para o serviço de erros e então faz o deploy sem servi-los aos usuários, de modo que os traces permanecem legíveis sem vazar a fonte.
Source maps no CI/CD
Gerar maps adiciona tempo de build e tamanho de saída, então os builds de produção muitas vezes os emitem como artifacts separados que são enviados e depois excluídos do deploy. Uma etapa de CI faz upload dos maps vinculados ao commit do build, para que os erros mapeiem de volta ao release exato.
Principais conclusões
- Um source map mapeia a saída minificada de volta às posições da fonte original.
- Maps públicos expõem a fonte; muitos times fazem upload deles para um rastreador de erros.
- O CI normalmente gera os maps, faz upload deles por release e depois os mantém fora do deploy.