Getting a JS callstack in the debugger
Get WinDbg Preview from the store https://www.microsoft.com/store/productId/9PGJGD53TN86
Use WinDbg to launch your app with the debugger attached from the start. Use "File"->"Launch app package". You can use the search box in the top right to find your app (e.g. to debug React Native Gallery search for "gallery" and select from the list). When you find it, press "Launch".
Enable break on first chance C++ exceptions
sxe eh
Resume execution
g
You'll be broken in now with something like this:
(6948.aa04): C++ EH exception - code e06d7363 (first chance)
First chance exceptions are reported before any exception handling.
This exception may be expected and handled.
KERNELBASE!RaiseException+0x6c:
00007ffe`18d2071c 0f1f440000 nop dword ptr [rax+rax]
Load the JS debugger extension that matches your build (important if you're on a prerelease windows build). Get your branch/version information with this command:
vertarget
And plug it in to load the extension like so:
!load \\winbuilds\release\ni_asdf_mybranchname\23144.1000.230201-1554\amd64fre\bin\jscript\jd.dll
You can't run the debugger extension if you don't have symbols for chakra. So check if you have symbols for chakra:
lm vm chakra
How do you know if it's good or bad? Well, if it shows as "deferred", then you don't have them:
0:027> lm vm chakra
Browse full module list
start end module name
00007fff`15c10000 00007fff`163c9000 chakra (deferred)
Image path: C:\WINDOWS\SYSTEM32\chakra.dll
Image name: chakra.dll
But if you get something like this that shows a PDB, you're good:
0:027> lm vm chakra
Browse full module list
start end module name
00007fff`15c10000 00007fff`163c9000 chakra (private pdb symbols) C:\ProgramData\Dbg\sym\chakra.pdb\54C90C5E3AF4C536A9178720CBB3ECE41\chakra.pdb
Loaded symbol image file: C:\WINDOWS\SYSTEM32\chakra.dll
Image path: C:\WINDOWS\SYSTEM32\chakra.dll
This command should be able to fix your chakra symbols:
!ldsym
Enable verbose mode for symbols while you're digging into this. Let's start by taking a look at your symbol path (sympath):
!sym noisy
.sympath
It's likely lacking any reference for private symbols. Add the private symbol server:
.sympath+ SRV*https://symweb
Your symbol path should by updated now. Reload the chakra symbols:
.reload -f chakra
Once that's working (check using the steps above lm vm chakra, turn off all that symbol noise:
!sym quiet
Now you should be able to get a callstack with resolved symbols for chakra (note this is still the native stack, not the JS stack)
k
To get the JavaScript stack using the jd debugger extension:
!jstack
Use the args command to get the values passed to each method:
!jstack /args
Is your callstack all minified symbols (single letter names)? You need to disable minification of your build. You can edit your vcxproj and do this:
<PropertyGroup Label="ReactNativeWindowsProps">
<ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(MSBuildThisFileDirectory), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>
+ <BundlerExtraArgs>--minify false</BundlerExtraArgs>
</PropertyGroup>
Note that you will need to rebuild with this enabled, but once you've done this you can debug multiple instances and you're fine.
This developer extension has other stuff. Try:
!jd.help
(Needs validation) Some potentially helpful links for more information:
- https://www.osgwiki.com/wiki/Native_Debugging_with_JavaScript_Call_Stacks
- https://www.osgwiki.com/wiki/Rich_Input_Suggestions#Using_WinDbg_Javascript_debugging_extension
The above instructions are for debugging on Chakra. If you're on V8: Grab the v8windbg.dll from the same nuget version as the v8jsi.dll and load it up in windbg. There are some usage instructions here