[Flutter Web] Wrong source code for issues after uploading source maps #318
Description
Environment
Flutter: 3.29.3
Sentry Dart Plugin: 2.4.1
Steps to Reproduce
Basically, I set my sentry.properties like so:
project=redacted
org=redacted
auth_token=redacted
upload_debug_symbols=true
upload_source_context=true
upload_source_maps=true
My index.html looks like this: (I have altered it to set a loading during Flutter bootstrap, and some Meta + Google trackers:
<!DOCTYPE html>
<html>
<head>
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description"
content="...">
<!-- iOS meta tags & icons -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="medalhei">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Medalhei</title>
<link rel="manifest" href="manifest.json">
<!-- Facebook Pixel -->
<script>
...........
</script>
<noscript>
......
</noscript>
<script async src="https://www.googletagmanager.com/gtag/js?id=...></script>
</head>
<body>
<script src="flutter_bootstrap.js" async></script>
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=......."
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<div id="loading"
style="position: fixed; top: 0; left: 0; bottom: 0; right: 0;
display: flex; justify-content: center; align-items: center;
flex-direction: column; background-color: #131C3C;">
<div style="margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 20px;">
<img src="..." alt="Loading Logo">
<span class="loader"></span>
</div>
</div>
<style>
.loader {
transform: rotateZ(45deg);
perspective: 1000px;
border-radius: 50%;
width: 48px;
height: 48px;
color: #fff;
}
.loader:before, .loader:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
border-radius: 50%;
transform: rotateX(70deg);
animation: 1s spin linear infinite;
}
.loader:after {
color: #FF3D00;
transform: rotateY(70deg);
animation-delay: .4s;
}
@keyframes spin {
0%, 100% { box-shadow: .2em 0px 0 0px currentcolor; }
12% { box-shadow: .2em .2em 0 0 currentcolor; }
25% { box-shadow: 0 .2em 0 0px currentcolor; }
37% { box-shadow: -.2em .2em 0 0 currentcolor; }
50% { box-shadow: -.2em 0 0 0 currentcolor; }
62% { box-shadow: -.2em -.2em 0 0 currentcolor; }
75% { box-shadow: 0px -.2em 0 0 currentcolor; }
87% { box-shadow: .2em -.2em 0 0 currentcolor; }
}
</style>
<script>
window.addEventListener('flutter-first-frame', function () {
document.getElementById('loading')?.remove();
});
</script>
</body>
</html>
I ran the following commands:
flutter build web --release --source-maps --dart-define=API_URL=redacted
flutter pub run sentry_dart_plugin
Both were successful. I then deployed my application.
Expected Result
I expected to see in the issues tab of Sentry the problematic source code.
Actual Result
Instead of showing the actual line of error, it just shows some random line of the index.html file:
