How to show the source code in Sentry's stack trace?

[axis-sato]

I am using Sentry for collecting JavaScript errors. Also, I do not use build tools like Webpack or Vite to transpile JavaScript.　Therefore, I am not outputting source maps.
In this case, is there a way to show JavaScript source code in Sentry's stack trace?

Here's an example.

In this case, I'd like to show the source code of somethingWrong.js in the Sentry's stack trace.

// somethingWrong.js

function somethingWrong() {
  throw new Error("somethingWrong");
}

somethingWrong();

<!-- index.html -->

<script src="path/to/somethingWrong.js"></script>

[lforst]

You can upload your source files to Sentry and it will show you the source code when an error happens. You would do this just like described here, minus the source maps. The command is unfortunately called sourcemaps but don't let that distract you.

[axis-sato]

@lforst
Thank you for your response.
I uploaded the source code as you instructed, but the following warning appeared and the source code was not shown.

Missing Source Map Reference
The source file for this stack frame is missing a source map reference. A source map reference is usually represented by a //# sourceMappingURL=... comment at the bottom of your source file.

You can fix this by configuring your build tool to emit a sourceMappingURL comment.

When I added //# sourceMappingURL=somethingWrong.js at the end of somethingWrong.js, I can show the source code in the stack trace. But I think it cumbersome to add //# sourceMappingURL to the end of all source code files. Is there a way to avoid this?

[lforst]

Hey, as soon as you see your source code in Sentry you are basically done. You can safely ignore the warning as this step indicates:

We need to show this because we can usually not determine whether people still do need to upload source maps or not. You specifically do not, so you can ignore it.

[axis-sato]

Thank you. My problem has been solved 😄