Bug: Source map issue with latest Ionic/Angular/ Capacitor app

[Sampath-Lokuge]

Hi,

This is an Ionic/Angular/Capacitor native app.

package.json

{
  "name": "TaxiMate",
  "version": "1.5.0",
  "author": "TaxiMate",
  "homepage": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/cdk": "14.0.0",
    "@angular/common": "14.0.0",
    "@angular/core": "14.0.0",
    "@angular/forms": "14.0.0",
    "@angular/platform-browser": "14.0.0",
    "@angular/platform-browser-dynamic": "14.0.0",
    "@angular/router": "14.0.0",
    "@capacitor-community/sqlite": "4.2.2",
    "@capacitor-firebase/authentication": "1.2.0",
    "@capacitor/android": "4.4.0",
    "@capacitor/app": "4.1.0",
    "@capacitor/camera": "4.0.0",
    "@capacitor/core": "4.4.0",
    "@capacitor/haptics": "4.0.1",
    "@capacitor/ios": "4.2.0",
    "@capacitor/keyboard": "4.0.1",
    "@capacitor/network": "4.0.0",
    "@capacitor/preferences": "4.0.1",
    "@capacitor/splash-screen": "4.0.0",
    "@capacitor/status-bar": "4.0.1",
    "@ionic/angular": "6.1.9",
    "@sentry/angular": "7.13.0",
    "@sentry/capacitor": "0.10.1",
    "@types/lodash": "4.14.178",
    "dayjs": "1.10.7",
    "firebase": "9.6.10",
    "guid-typescript": "1.0.9",
    "lodash": "4.17.21",
    "rxjs": "6.6.0",
    "tslib": "2.2.0",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "14.0.0",
    "@angular-eslint/builder": "14.1.2",
    "@angular-eslint/eslint-plugin": "14.1.2",
    "@angular-eslint/eslint-plugin-template": "14.1.2",
    "@angular-eslint/template-parser": "14.1.2",
    "@angular/cli": "14.0.0",
    "@angular/compiler": "14.0.0",
    "@angular/compiler-cli": "14.0.0",
    "@angular/language-service": "14.0.0",
    "@capacitor/cli": "4.4.0",
    "@ionic/angular-toolkit": "6.0.0",
    "@sentry/cli": "2.8.1",
    "@types/node": "12.11.1",
    "@typescript-eslint/eslint-plugin": "5.42.0",
    "@typescript-eslint/parser": "5.42.0",
    "eslint": "7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "prettier": "2.5.1",
    "ts-node": "8.3.0",
    "typescript": "4.7.3"
  },
  "description": "TaxiMate"
}

This is the Sentry issue link on my project: Link

angular.json

"configurations": {
            "production": {
               "sourceMap": {
                "hidden": true,
                "scripts": true,
                "styles": true
              },
 }

But it doesn't show the ts details on the error. Any clue, please? Thanks!

explain cli shows this?

✔ Fetched data for event: 9f22b34e8e2d48df9baed6b3468bc4df
✔ Event has release name: taximate-mobile@1.5.0
✔ Event has a valid exception present
✔ Event has a valid stacktrace present
✖ Uploaded artifacts do not include entry: ~/src_app_modules_home_home_module_ts.js

What should I do to generate home_module_ts.js?

I use ionic build --prod with the above angular.json configurations. I have tried "sourceMap": true, also. But the Same error.

upload-sourcemaps

./node_modules/.bin/sentry-cli releases --org appthebusiness-ltd --project taximate-mobile files taximate-mobile@1.5.0 upload-sourcemaps ./www --dist 1

[lucas-zimerman]

Hi thanks for opening the issue.
On your error/exception, does it contain a tag called dist ? if so, is the value equals to 1?

Also: Does this link contains your release with the release number 1.5.0 and dist 1? https://sentry.io/settings/appthebusiness-ltd/projects/taximate-mobile/source-maps

[Sampath-Lokuge]

Hi @lucas-zimerman

Yes, Please let me know what else you need from us. Thanks!

app.module.ts

Sentry.init(
  {
    dsn: environment.production ? environment.urls.sentryDsn : '', //run only on prod mode
    //dsn: environment.urls.sentryDsn, //run only on local mode

    // Set your release version, such as "getsentry@1.0.0"
    release: `taximate-mobile@${environment.appVersion}`,
    // Set your dist version, such as "1"
    dist: '1',
  },
  // Forward the init method from @sentry/angular
  SentryAngular.init
);

And

./node_modules/.bin/sentry-cli releases --org appthebusiness-ltd --project taximate-mobile files taximate-mobile@1.5.0 upload-sourcemaps ./www --dist 1

[souredoutlook]

Hi @Sampath-Lokuge - I reviewed the event you shared 9f22b34e8e2d48df9baed6b3468bc4df and can confirm we don't have release artifacts for the .js files that are being shown in the abs_path of stacktrace.

For example, the stack trace is showing an abs_path of http://192.168.8.145:8100/vendor.js but there is no corresponding ~/vendor.js.map artifact. This seems to be the case for every filename in the stacktrace. It might be helpful to know more about how you're running/serving the application and if you are able to upload release artifacts such as vendor.js or vendor.js.map

Let us know

[Sampath-Lokuge]

Hi @souredoutlook

I have done like so:

ionic build --prod

npx cap sync android

./node_modules/.bin/sentry-cli releases --org appthebusiness-ltd --project taximate-mobile files taximate-mobile@1.5.0  upload-sourcemaps ./www --dist 1

After that run the app locally on my Android device like so and generate the runtime error:

ionic cap run android -l --host=0.0.0.0

Please let me know the issue with my workflow. Thanks.

[souredoutlook]

Because you're using the livereload option you're running a dev server, this is not serving the files from your production build (the files that you're sending to sentry).

[Sampath-Lokuge]

Yes, now it is working with the production build. Thanks.
Do you know how to do the same with the live reload option too? i.e. steps to test this feature with the dev server too.

[souredoutlook]

Glad to hear it's work as expected with the production build.

I was looking at ionic's CLI docs and it seems like there are ways to inline sourcemaps and output sourcemaps with live reload. You would need to upload those with each live reload presumably.

I believe we typically recommend testing with a production build though. I'll let @lucas-zimerman comment on that

[Sampath-Lokuge]

Hi @souredoutlook

Yes, it seems more work with the live reload option. So I'm very happy with the current production build workflow. Thanks a lot for the support.