1

I'm struggling to make sense of source map for a next.js app. My goal is to be able to remotely log a client error and determine where it came from in the source. I'm using the source-map npm library. I've created a page that forces a react error in production.

When I force the error in Chrome. I see this:

Error: render error
    at n4-test-error (test-error.tsx:7:11)

which is perfect. Clicking on the file name, I go right to the correct line in the source. But I need to be able to get that when it's another user, so I send the error information to our log server.

The logs show an error like this:

Error: render error
 at n4-test-error (https://www.my-domain.com/_next/static/chunks/pages/_app-4699402e2687df60.js:37:430129)
    at https://www.my-domain.com/_next/static/chunks/pages/_app-4699402e2687df60.js:63:14958
    at section
    at section
    at container (https://www.my-domain.com/_next/static/chunks/pages/_app-4699402e2687df60.js:37:289776)
    at https://www.my-domain.com/_next/static/chunks/pages/_app-4699402e2687df60.js:63:14958

_app-46999... is the same file that Chrome devtools indicates is the source map.

So I fetch that map and feed it to new sourceMap.SourceMapConsumer.

When I call getOriginalPositionFor({ line: 37, column: 430129 }), I get:

  source: 'webpack://_N_E/src/components/bloks/n4/test-error.tsx',
  line: 4,
  column: 38,
  name: 'React'
}

If I call consumer.sourceContentFor that file, I do see the full original source of it which matches what I see in Chrome. But the line number is wrong. It should be line 7.

Why does Chrome get the exact line number, but source-map is off? In this contrived example, it's close enough, but other real-world situations it sometimes isn't even in the right component file, despite the stack showing the name of the component.

I did the same test for an event error rather than a render one and in that case, I did get the exact line number. I'd just like to be able to programatically what Chrome seems to be able to given the same sourcemap.

Any ideas?

Update: I did some more research and it turns out I was logging the errorInfo passed to componentDidCatch, but that shows the component stack which has different line numbers than error.stack. Once I used the line and column from error.stack, my results matched Chrome.

1
  • 1
    Solved my own problem - see update. Commented Jan 14 at 2:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.