sentry-dart-plugin
sentry-dart-plugin copied to clipboard
[Flutter Web] Wrong source code for issues after uploading source maps
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:
hey thanks for the issue, that is odd
Could you send your event link to me at [email protected] so I can have a closer look
hey we've recently released Sentry Flutter 9.1.0 and the Sentry Dart Plugin 3.0.0 which enhances the symbolication process, can you try it out and see if it improves for you
Nice! I will upgrade the version and let you know ASAP. Thank you for your work.
Hey there. Sadly, the issue persists :/ Even after updating sentry flutter + sentry dart plugin to the latest version:
@GugaLincon have you tried checking the latest event? could it be that this event is the one symbolicated through the old dart plugin version? just wanna rule out some things
Yes, I can confirm it is using: Sentry Dart Plugin 3.1.0, Sentry Flutter: 9.2.0
Strangely enough, it seems to identify the problematic files correctly