Stack Trace Analysis

Master stack trace analysis to quickly identify and fix JavaScript errors in your application.

Understanding Stack Traces

Anatomy of a Stack Trace

TypeError: Cannot read property 'email' of undefined
    at getUserEmail (user-service.js:45:12)    ← Error location
    at validateForm (form-handler.js:123:8)    ← Called from here
    at HTMLFormElement.<anonymous> (form.js:67:5) ← Event handler
    at HTMLFormElement.dispatch (jquery.min.js:3:10456)
    at HTMLFormElement.v.handle (jquery.min.js:3:8765)

Stack Frame Components

Each line contains:

Component	Example	Description
Function	getUserEmail	Function name
File	user-service.js	Source file
Line	45	Line number
Column	12	Column position

Reading Direction

Read stack traces top to bottom:

1. Top frame: Where error occurred
2. Middle frames: Call chain
3. Bottom frames: Entry point

Stack Trace Viewer

Full Stack View

In the error detail page:

Error: User not found

► user-service.js:45:12 - getUserById
    43 |  async function getUserById(id) {
    44 |    const user = await db.users.find(id);
  → 45 |    if (!user) throw new Error('User not found');
    46 |    return user;
    47 |  }

► api-handler.js:78:5 - handleGetUser
    76 |  async function handleGetUser(req, res) {
    77 |    const userId = req.params.id;
  → 78 |    const user = await getUserById(userId);
    79 |    res.json(user);
    80 |  }

► router.js:23:3 - <anonymous>

Frame Navigation

• Click frame: Expand/collapse source preview
• Copy: Copy stack trace text
• Open in editor: Open file in configured IDE

Source Context

For each frame, see:

• 3 lines before error
• Error line (highlighted)
• 3 lines after error
• Variable values (when available)

Source Maps

Without Source Maps

Minified code produces cryptic traces:

TypeError: a is not a function
    at e (main.abc123.js:1:34567)
    at t.handleClick (main.abc123.js:1:45678)
    at Object.onClick (main.abc123.js:1:56789)

With Source Maps

Same error, readable:

TypeError: processPayment is not a function
    at handleCheckout (checkout.tsx:89:12)
    at CheckoutButton.handleClick (CheckoutButton.tsx:45:8)
    at onClick (form-events.ts:23:5)

Uploading Source Maps

Manual Upload via Dashboard:

1. Go to Settings → Error Tracking → Source Maps
2. Click Upload Source Map
3. Fill in the details:
   • Website: Select your website
   • Release version: e.g., 1.2.3
   • Source map file: Select dist/main.js.map
   • JavaScript URL: https://example.com/assets/main.js
4. Click Upload

Build Tool Integration

After your build generates source maps, upload them to Zenovay through the dashboard. For CI/CD pipelines, you can automate this by uploading source maps as part of your deployment process:

1. Generate hidden source maps during build
2. After deployment, upload the .map files via the dashboard at Settings → Error Tracking → Source Maps
3. Tag each upload with the release version for proper error correlation

Webpack - generate hidden source maps:

// webpack.config.js
module.exports = {
  devtool: 'hidden-source-map',
  // Source maps generated but not referenced in output
  // Upload them to Zenovay via the API after build
};

Vite - generate hidden source maps:

// vite.config.js
export default {
  build: {
    sourcemap: 'hidden'
  }
};

Rollup - generate hidden source maps:

// rollup.config.js
export default {
  output: {
    sourcemap: 'hidden'
  }
};

Analyzing Common Patterns

Undefined Property Access

TypeError: Cannot read property 'name' of undefined
    at renderUser (user-card.js:23:15)

Analysis:

• Object expected at line 23 is undefined
• Check data flow to renderUser
• Likely missing null check

Fix pattern:

// Before
const name = user.name;

// After
const name = user?.name ?? 'Unknown';

Function Not Defined

ReferenceError: processPayment is not defined
    at handleSubmit (checkout.js:45:5)

Analysis:

• Function called but not in scope
• Check imports/exports
• Verify module loading order

Type Errors

TypeError: users.map is not a function
    at renderUserList (list.js:12:20)

Analysis:

• users is not an array
• Check API response format
• Verify data type assumptions

Advanced Analysis

Async Stack Traces

Modern JavaScript includes async context:

Error: API request failed
    at fetchUser (api.js:34:11)
    at async loadUserData (user-loader.js:56:18)
    at async initApp (app.js:12:5)

Cross-Origin Frames

Third-party scripts show limited info:

Error: Script error.
    at <anonymous> (https://third-party.com/widget.js:1:1)

Solution: Add CORS headers to third-party scripts:

<script src="https://third-party.com/widget.js" crossorigin="anonymous"></script>

Minified Third-Party Code

For libraries without source maps:

• Identify library from URL pattern
• Check library version
• Search for known issues
• Consider alternatives

Debugging Workflow

Step 1: Identify Error Location

1. Look at top stack frame
2. Note file, line, column
3. Understand what code is doing

Step 2: Trace the Call Path

1. Follow frames down the stack
2. Identify data flow
3. Find where bad data originates

Step 3: Check Context

1. View error occurrence timeline
2. Check affected browsers/devices
3. Look for patterns (time, user type)

Step 4: Reproduce

1. Use session replay (if available)
2. Check user actions before error
3. Test with same browser/conditions

Step 5: Fix and Verify

1. Implement fix
2. Deploy new version
3. Mark error as resolved
4. Monitor for regressions

IDE Integration

Open in VS Code

Configure external editor:

1. Go to Settings → Integrations
2. Select VS Code
3. Enable "Open in Editor"
4. Click stack frames to open

VS Code Extension

Install Zenovay extension:

1. Install from VS Code marketplace
2. Connect your account
3. See errors inline in editor
4. Click to view in dashboard

JetBrains IDEs

1. Install Zenovay plugin
2. Configure project mapping
3. Navigate from errors to code

Release Correlation

Tag Releases

<script
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js"
></script>

Release Comparison

Compare errors between releases:

1. Select two releases
2. See new errors introduced
3. See errors resolved
4. Track regression rate

Suspect Commits

With Git integration:

1. Error links to release
2. Release links to commits
3. Identify likely cause

Best Practices

Source Map Management

• Upload source maps during CI/CD
• Use hidden source maps in production
• Keep source maps organized by release
• Set retention policy

Stack Trace Quality

• Use meaningful function names
• Avoid anonymous functions
• Keep call stacks reasonable depth
• Add error context where needed

Debugging Efficiency

• Start with most impacted errors
• Use filters to focus analysis
• Document findings
• Share with team

Troubleshooting

Missing Source Maps

Check:

• Source maps uploaded for this release
• URL patterns match deployed files
• Release version matches

Incomplete Stack Traces

Causes:

• Async code not properly traced
• Errors from eval() or dynamic code
• Browser limitations

"Script error" Messages

Solutions:

• Add CORS headers
• Use crossorigin attribute
• Self-host third-party scripts

Next Steps

• JavaScript Error Tracking
• Session Replay
• Performance Monitoring