SourceMap no front-end. Aprendi isso no meu trabalho #2 💻

Incrível como coisas simples a gente só aprende com experiências, né? Recentemente, eu estava no trabalho e me perguntaram se o SourceMap para tal coisa estava ativado em tal ambiente. Logo, pensei: o que é isso? 🤔 Me perguntaram em uma videochamada enquanto eu estava resolvendo alguns problemas.

É mais simples do que você imagina, caso não saiba o que é. E o curioso é que eu sabia o que era na prática, mas não conhecia o termo técnico e nem como ativar/desativar.

🗺️ Afinal, o que é o SourceMap?

Pra adiantar: já abriu o DevTools, entrou na aba "Sources" e, apertando Ctrl + P, conseguiu procurar algum arquivo que você construiu? Por exemplo, um componente, um helper, um util, entre outros. Se você conseguiu fazer isto, parabéns, você se deparou com o sourcemap ativado! ✨ Pois sem ele, seu código fica ilegível e minimificado. 😵

Para você entender a importância do SourceMap, é preciso entender que o seu código, que era algo legível como:

// Calcula o preço final de um produto com base no desconto percentual
function calcularPrecoFinal(precoBase, descontoPercentual) {
  // Calcula o valor real do desconto
  const valorDoDesconto = precoBase * (descontoPercentual / 100);

  // Subtrai o desconto do preço original
  const precoComDesconto = precoBase - valorDoDesconto;

  return precoComDesconto;
}

// Exemplo de uso
const precoFinal = calcularPrecoFinal(150, 10); // Deve retornar 135

Quando passa pela fase de build, irá ficar mais ou menos assim:

function c(t,e){return t-t*(e/100)}const n=c(150,10);

Ficaria bem difícil de conseguir entender isso pelo DevTools, né?

Basicamente, durante o processo de build, a ferramenta (Webpack, Vite, etc.) irá gerar seus arquivos que irão para produção, fazendo com que, por exemplo, MeuComponent.tsx seja renomeado para algo como meu-componente-a1bc234.js. Se o sourcemap estiver ativado, vai ser gerado também um arquivo extra, como meu-componente-a1bc234.js.map, e isso acontece para todos os arquivos que passam pelo build.

Esse arquivo .map extra serve para "traduzir" o código otimizado de volta para o original. Ele diz ao navegador que a função C no arquivo minificado, por exemplo, corresponde à sua função calcularPrecoFinal no arquivo original.

Este arquivo extra contém diversas informações que o DevTools usa para que você consiga ter uma tradução fiel dos seus arquivos. Assim, se o seu código é algo como:

const minhaVariavel = 29

Quando você procurar por ela em produção, encontrará exatamente o mesmo código, sem estar todo bagunçado.

⚙️ Como Ativar ou Desativar?

Depende de como está sendo feito o build da sua aplicação: se é o tradicional Create React App (CRA), Vite, Webpack, enfim. Em versões recentes do Next.js, por exemplo, você consegue controlar isso no arquivo next.config.js, adicionando a linha productionBrowserSourceMaps: false. Por padrão, no Next.js, ao rodar em modo de desenvolvimento, o sourcemap já vem ativo. Já no build para produção, ele vem desativado.

🚨 Quando deixar ativado?

A resposta é simples: quando você quer ter clareza nos relatórios de erros de serviços de monitoramento como Sentry, DataDog, LogRocket, entre outros.

❌ Sem SourceMap, seu Sentry receberia algo assim:

TypeError: Cannot read properties of null (reading 'value')
  at t (chunk-d2a8b3c.js:1:5840)
  at onClick (chunk-e9f1a7d.js:1:12910)
  ...

✅ Mas com o SourceMap configurado, o erro fica claro como cristal:

TypeError: Cannot read properties of null (reading 'value')
  at handlePaymentSubmit (components/forms/PaymentForm.tsx:85:22)
  at onClick (components/shared/SubmitButton.tsx:15:5)
  ...

E aí, já passou por isso?

Agora, para você que está lendo: já precisou mexer com isso ou te perguntaram se está ativo ou não em uma aplicação que você está mexendo? Provavelmente você já usou o DevTools para adicionar algum breakpoint no seu código e não sabia, assim como eu, que aquilo só era possível por conta do SourceMap. Mais um termo técnico pra conta! 🤓

Achei interessante que, apesar de ser algo simples com que todo mundo acaba se deparando, eu não sabia explicar tecnicamente como acontecia. Então, resolvi trazer aqui para vocês mais este relato do meu dia a dia de trabalho.