Git Product home page Git Product logo

sourcemap-cljs's Introduction

Instructions

This is a very specific tool designed to take two source maps and map a position in react native bundled js back to cljs source code. It helped us find a specific production bug at a specific time, when using the sentry error tracker - your mileage may vary...

To build the js script

shadow-cljs release script

To run the js script

node sourcemap.js <options>

Options

Required:

  • --js sourcemap to advance compiled js <path/to/js.map>
  • --cljs sourcemap to clojurescript <path/to/cljs.map>

Optional:

  • --locations comma separated list of locations e.g. 11:90000, 11: 20000
  • --stacktrace stacktrace copied from sentry <path/to/stacktrace.txt>
  • --match filter only sources containing text e.g. some-ns

Basic use

Where main.ios.map is the sourcemap that maps from the final bundled js to the advanced compiled js, and index.js.map is the sourcemap that maps from the advanced compiled js to the original cljs.

You can get main.ios.map from e.g. expo's post publish hook (see using expo with sentry in the expo docs), and index.js.map will be output by shadow-cljs into the target directory alongside index.js, so long as :compiler-options {:sourcemap true} is set in shadow-cljs.edn.

  1. Download main.ios.map and index.js.map from e.g. sentry
  2. Run node sourcemap.js --js ~/Downloads/main.ios.map --cljs ~/Downloads/index.js.map --locations 11:90000

Typical process (with stacktrace)

Follow step 1 as above, but then copy the stacktrace string into a file. Stacktrace will be parsed for <line>:<column> pairs.

app:///main.ios.bundle at line 11:935705
app:///main.ios.bundle in Mf at line 11:28521
app:///main.ios.bundle in D at line 11:31231
app:///main.ios.bundle in e at line 11:61222
app:///main.ios.bundle in u at line 11:61158
app:///main.ios.bundle in vw at line 11:149747
...

  1. pbpaste > stacktrace.txt
  2. node sourcemap.js --js ~/Downloads/main.ios.map --cljs ~/Downloads/index.js.map --stacktrace stacktrace.txt

Which should give an output like the following - which is not pretty, but hopefully enough to avoid despair:

11:935705
{:source riverford/mobile_app_orders/util.cljs, :line 222, :column 80, :name s}
11:28521
{:source cljs/core.cljs, :line 3901, :column 18, :name a0}
11:31231
{:source cljs/core.cljs, :line 3931, :column 29, :name args}
11:61222
{:source cljs/core.cljs, :line 10789, :column 29, :name args}
11:61158
{:source cljs/core.cljs, :line 10786, :column 11, :name args}
11:149747
{:source riverford/mobile_app_orders/util.cljs, :line 599, :column 56, :name t}
11:420016
{:source riverford/mobile_app_orders/subs/your_account.cljs, :line 74, :column 76, :name me}

sourcemap-cljs's People

Stargazers

Sébastien Béal avatar David Walker avatar Michael Salihi avatar Александар Симић avatar Dima Novotochinov avatar Ullrich Schäfer avatar Amarjeet Yadav avatar

Watchers

Mike Doherty avatar James Cloos avatar Daniel Neal avatar Dan Stone avatar Tom Willcocks avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.