Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add source map support for stack traces #459

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

tornqvist
Copy link
Member

This is a 🙋 feature

Add support for stack traces (in Chrome) using source-map-support.

Checklist

  • tests pass

Context

Error stack traces would reference line numbers in the bundled javascript making it a hassle to track down where an error was thrown.

Before

Error: Wut?
    at home (https://localhost:8080/a5a979a6e87a19a2/bundle.js:12343:9)
    at Choo._handler (https://localhost:8080/a5a979a6e87a19a2/bundle.js:1014:53)
    at Choo._prerender (https://localhost:8080/a5a979a6e87a19a2/bundle.js:4520:18)
    at Choo.start (https://localhost:8080/a5a979a6e87a19a2/bundle.js:4424:21)
    at https://localhost:8080/a5a979a6e87a19a2/bundle.js:4462:24

After

Error: Wut?
    at home (https://localhost:8080/87ff141e6fbaf70d/views/home.js:32:1)
    at Choo._handler (https://localhost:8080/87ff141e6fbaf70d/components/view/index.js:27:1)
    at Choo._prerender (https://localhost:8080/87ff141e6fbaf70d/node_modules/choo/index.js:241:1)
    at Choo.start (https://localhost:8080/87ff141e6fbaf70d/node_modules/choo/index.js:145:1)
    at https://localhost:8080/87ff141e6fbaf70d/node_modules/choo/index.js:183:1

Note: brfs couldn't handle source-map-support checks for methods on fs so I had to exclude it from the transform.

Semver Changes

Minor

@goto-bus-stop
Copy link
Member

Hmm I'm not sure I understand, source maps appear to work in stack traces in Chromium for me with the "Enable JavaScript source maps" option enabled in Devtools settings

@tornqvist
Copy link
Member Author

Hmm, that's odd. I do ofc get proper file references in in the server rendered response but any error created in the browser will just reference bundle.js in the stack trace.

This minimal set up:

// index.js
var choo = require('choo')
var html = require('choo/html')
var app = choo()

app.route('/', main)
app.use(store)
module.exports = app.mount('body')

function store (state) {
  state.error = new Error('Something happened')
}

function main (state) {
  return html`
    <body>
      <pre>${state.error.stack}</pre>
    </body>
  `
}

when ran with bankai start index.js renders this:

Error: Something happened
    at store (https://localhost:8080/68728b3e63878977/bundle.js:17:17)
    at https://localhost:8080/68728b3e63878977/bundle.js:643:5
    at https://localhost:8080/68728b3e63878977/bundle.js:693:5
    at Array.forEach (<anonymous>)
    at Choo.start (https://localhost:8080/68728b3e63878977/bundle.js:692:16)
    at https://localhost:8080/68728b3e63878977/bundle.js:735:24

@goto-bus-stop
Copy link
Member

ow, i see. I tried it with an uncaught error in devtools, and devtools in FF and chrome do support source maps. I kinda feel like printing the stack trace to the page rather than devtools is a rare use case?

@tornqvist
Copy link
Member Author

It might be an edge case but what I usually do is that I have a wrapper function for all my views which does a try/catch when rendering. If there's an error in development I print the stack trace to the DOM for debugging.

To be clear; this is what my view wrappers usually look like

module.exports = createView
function createView (view) {
  return function (state, emit) {
    var children, title
    try {
      children = view(state, emit)
    } catch (err) {
      children = html`
        <main>
          <h1>Something went wrong!</h1>
          ${process.env.NODE_ENV === 'development' ? html`
            <pre>${err.stack}</pre>
          ` : null}
        </main>
      `
    }

    return html`
      <body>
        ${state.cache(Header, 'header')}
        ${children}
        ${state.cache(Footer, 'footer')}
      </body>
    `
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants