Naar inhoud

Observeerbaarheid van productiefouten

a.js:1:4523 weer bruikbaar maken

Productiefouten diagnosticeerbaar maken met geüploade sourcemaps, een same-origin-tunnel voor Sentry, fouten met context, filtering en replay.

4 min. leestijdDoor

Alle artikelen

Twee manieren om een fout kwijt te raken

We hadden twee afzonderlijke blinde vlekken. Ontvangen fouten wezen naar verkleinde code zoals a.js:1:4523 omdat sourcemaps ontbraken. Andere gebeurtenissen kwamen nooit aan omdat rechtstreekse aanvragen naar sentry.io konden worden geblokkeerd.

Dit waren onafhankelijke fouten. Sourcemaps bepalen of een ontvangen stacktrace naar de broncode kan worden herleid. Het transport bepaalt of de gebeurtenis Sentry überhaupt bereikt. Als slechts één probleem wordt opgelost, blijft het incident onleesbaar of onzichtbaar.

Upload sourcemaps zonder ze te publiceren

@sentry/nextjs verpakte de build met withSentryConfig. CI leverde SENTRY_AUTH_TOKEN, SENTRY_ORG en SENTRY_PROJECT. De buildplug-in uploadde de maps, breidde de upload van clientbestanden uit voor betere traces en gebruikte deleteSourcemapsAfterUpload, zodat die maps niet vanuit de openbare uitvoer werden aangeboden.

export default withSentryConfig(nextConfig, {
  org: process.env.SENTRY_ORG,
  project: process.env.SENTRY_PROJECT,
  authToken: process.env.SENTRY_AUTH_TOKEN,
  sourcemaps: {
    disable: process.env.NODE_ENV === 'development',
    deleteSourcemapsAfterUpload: true
  },
  widenClientFileUpload: true,
  disableLogger: true,
  tunnelRoute: '/t'
})

Zo bleef het herleiden naar broncode onderdeel van de normale implementatiebuild. Er was geen afzonderlijke uploadopdracht met sentry-cli die een engineer na de release moest onthouden.

Gebruik de oorsprong van de toepassing als transport

Het eerste same-origin-eindpunt was /monitoring, maar blokkeerders herkenden het nog steeds. Ik verkortte de route tot /t. Browsergebeurtenissen gingen daarna naar de oorsprong van de toepassing en de Next.js-server stuurde ze door naar Sentry.

Tijdens de oorspronkelijke uitrol werd na die wijziging volledige registratie vastgelegd. Dat was een resultaat uit het uitrolvenster, geen belofte dat elke blokkeerder of elk netwerk altijd elke gebeurtenis zal leveren.

Een stille mismatch in de toolchain vereiste een eigen oplossing

Next.js 15 verplaatste de browserconfiguratie naar instrumentation-client.ts. Met Turbopack ingeschakeld bleef het project op Sentry v9 en stopte de sourcemapupload zonder duidelijke toepassingsfout. De overstap naar Sentry v10 herstelde het compatibele uploadpad.

De toepassing initialiseerde Sentry ook in browser-, server- en edgeruntimes en voegde foutgrenzen op route- en algemeen niveau toe. Het herleiden naar broncode was een buildaangelegenheid; het registreren van React-, aanvraag- en runtimefouten was een afzonderlijke toepassingsaangelegenheid.

Leesbaar betekent niet automatisch bruikbaar

Een beforeSend-hook voegde het paginapad, browserinformatie, viewport en een toepassingsversietag toe. De hook categoriseerde API-, time-out- en netwerkfouten en filterde bekende Twilio-belbeperkingen vóór opname in Sentry uit.

Session Replay bemonsterde 5% van de normale sessies en elke foutsessie in productie. Tracing draaide aanvankelijk op 100% in staging en 10% in productie en werd daarna uitgeschakeld toen het te veel quotum verbruikte. Bemonstering is een operationele instelling, geen waarde om klakkeloos te kopiëren.

  • Upload besloten sourcemaps tijdens de build.
  • Stuur browsergebeurtenissen door een same-origin-tunnel.
  • Scheid verwachte productbeperkingen van toepassingsfouten.
  • Voeg route- en replaycontext toe, zodat een leesbaar regelnummer ook context over het gebruikersproces heeft.