Source Maps & Debug Symbols - Traceback

When code is bundled and minified for production, errors point to single-line minified files. Uploading source maps maps errors back to original TypeScript/JavaScript source files.

Automated Upload via CI/CD

GitHub Actions

.github/workflows/deploy.yml

name: Deploy and Upload Source Maps

on:
  push:
    branches: [main]

jobs:
  build-and-upload:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - run: npm ci
      - run: npm run build

      - name: Upload Source Maps to Traceback
        run: |
          npx @traceback/cli sourcemaps upload \
            --project="frontend-app" \
            --release="${{ github.sha }}" \
            ./dist
        env:
          TRACEBACK_AUTH_TOKEN: ${{ secrets.TRACEBACK_AUTH_TOKEN }}

Vite Plugin

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { tracebackVitePlugin } from "@traceback/vite-plugin";

export default defineConfig({
  build: {
    sourcemap: true, // Output source maps during build
  },
  plugins: [
    react(),
    tracebackVitePlugin({
      authToken: process.env.TRACEBACK_AUTH_TOKEN,
      project: "web-client",
      release: process.env.npm_package_version,
      cleanSourcemapsAfterUpload: true, // Deletes sourcemap files from dist before deploy
    }),
  ],
});

⌘I