How to view original source filenames when debugging ionic capacitor android app

Issue

I've been working with a customer's existing ionic capacitor app for a few months now, and been able to get around this problem up until now by using other techniques to debug the software, but I have an issue where I just need to see a stack trace for a common function call, and I can not figure out how to view that with Ionic Capacitor.

The problem is that in logcat, the filenames are showing as the bundled webpack chunk.js files, instead of the source code. e.g.:

with my real app:
http://localhost/static/js/main.3e1e2d46.chunk.js - Line 1 - Msg: SELECT * FROM...
or with my test app:
https://localhost/assets/index-5e189f50.js - Line 98 - Msg: hello world`

I am running this on a Mac M1 Pro Max.

To debug, I am running the latest versions of Ionic (7.0.0) and Capacitor (5.2.3), have created a bare bones new application using "ionic start", and added a single "console.trace('hello world');" line to the source code.

That looks something like this:

ionic start
use cmd line tool (not wizard) to create a React app
ionic cap add android
ionic cap build android (opens android studio up)
ionic cap sync android --source-map
ionic cap build android --no-open
Rebuild within android studio and run on either my device or emulator (neither work)

The printouts in logcat are the bundled webpack static chunk files. I've spent hours for several days trying to figure out how to get this to show the actual source filename. I've read countless articles online that sound like a similar issue but don't address the problem.

The result in logcat is: 2023-08-20 15:35:36.734 30285-30285 Capacitor/Console io.ionic.starter I File: https://localhost/assets/index-5e189f50.js - Line 98 - Msg: hello world

I also have these issues in my app if I print a stack track or send a stack trace to crashlytics.

The source file is src/components/ExploreContainer.tsx. Is there any way to see this file in logcat?

I've also run an emulator with the same results. There, I also tried accessing chrome://inspect/devices#devices, and the console output is the same.

The only solutions I've comes across relate to the source mappings not being copied or something. Supposedly this is fixed by adding --source-map with the sync cmd, but that doesn't seem to work for me.

If I run this app with "npm run dev" for the web version, the filenames are correct (what I would expect) in the console output. However, I can't debug this app with the web version. It uses some native elements in Android that I am trying to debug.

I tried adding craco to the build script in package.json also. I noticed whenever I run ionic cap build android, it still prints out:

react-scripts build Creating an optimized production build...

Solution

there is no real way of solving this (yet). because the code get bundled as a chunk anyways and that data is lost. I suggest writing a more descriptive log that contains the data from the source file inside the log itself, that's what I do.

Answered By - AmirAli Saghaei