Skip to content

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.

2 participants