EXAMPLE 06 • errors.ts

Thrown Errors & Symbolized Stack Traces

An error thrown from inlined code inside an outlined block, called through a runtime helper, from an inlined caller. DevTools rebuilds the authored stack trace.

Inlined Ranges Inside an Outlined FunctionOutlined Function (isHidden + definition)Runtime Helper Without Definition (dropped)Outlined Owner Inlined Into Its Caller

OPEN CHROME DEVTOOLS (F12) FIRST, THEN TRIGGER:

Ready. Click "Throw Uncaught Error" with DevTools open.

How This Example Works

The RangeError is thrown in _outlinedUsingBlock (the outlined using block of reserveOrder, with reserveLine and assertValidQuantity inlined into it). It is called through the runtime helper __using, from submitOrder, which in turn has reserveOrder inlined.

The raw err.stack only knows the generated frames. DevTools should expand inlined frames, merge the outlined block into its owner, drop the helper, and show each authored frame once.

What to Try & Verify in DevTools

1. Caught error logged with console.error() Error Stack Traces

Try:Click Catch & console.error() and expand the error in the Console.

Stack: assertValidQuantity (6) → reserveLine (11) → reserveOrder (21) → submitOrder (27) → submitOrderAndReport (33), all linking to errors.ts.
No generated frames: _outlinedUsingBlock and __using are not shown, and reserveOrder shows up exactly once.
Raw vs. symbolized: the page readout shows the raw err.stack with bundle.js frames. Only DevTools symbolizes it.

2. Uncaught error thrown from a timer Error Stack Traces

Try:Click Throw Uncaught Error.

Stack: Uncaught RangeError with assertValidQuantity (6) → reserveLine (11) → reserveOrder (21) → submitOrder (27) → anonymous timer callback (41).
Async part: setTimeout → submitOrderLater (41). window.runExample06 is not shown.

3. Pause on exceptions Call Stack

Try:In Sources › Breakpoints, enable Pause on uncaught exceptions and click Throw Uncaught Error again (or enable Pause on caught exceptions and use the other button).

Paused on line 6 of errors.ts. The Call Stack matches the Console stack trace.
Select reserveOrder: Scope shows Block lock, and orderId <unavailable>, sku: "SKU-B", quantity: 0, reserved: 0.
Select submitOrder: units is <unavailable> (not assigned yet).

Other things to try

Right-click the stack trace in the Console or Call Stack › Copy stack trace.
Add bundle.js to the ignore list, or toggle the source map scopes experiment, and compare the stack traces.
Close DevTools, click both buttons, then open DevTools: the already-logged errors should still get symbolized.
While paused on the exception, use Restart frame on reserveOrder or submitOrder.

Not sure if it's a DevTools bug? Tab 4. Decoded Scopes shows what the source map actually encodes.

Try in the Console While Paused

While paused, select a frame and evaluate these in the Console (Esc opens the drawer) using the authored names:

`${sku} x ${quantity}`

Expected Result: "SKU-B x 0"

Paused on the throw (step 3), with any frame from assertValidQuantity to submitOrder selected.

orderId

Expected Result: ReferenceError with reserveOrder selected; "ORD-17" with submitOrder selected

The outlined block does not receive orderId (it is <unavailable> in the Scope pane), so there is nothing to evaluate. The submitOrder frame still has it.

        
        // Authored TypeScript: errors.ts
      
        declare function acquireLock(sku: string): Disposable;
      
        function assertValidQuantity(sku: string, quantity: number): void {
      
          if (quantity <= 0) {
      
            throw new RangeError(`Invalid quantity ${quantity} for ${sku}`);
      
          }
      
        }
      
        function reserveLine(sku: string, quantity: number): number {
      
          assertValidQuantity(sku, quantity);
      
          return quantity * 2;
      
        }
      
        function reserveOrder(orderId: string, sku: string, quantity: number): number {
      
          let reserved = 0;
      
          // `using` block: outlined into `_outlinedUsingBlock` and run through
      
          // the `__using` runtime helper in bundle.js.
      
          {
      
            using lock = acquireLock(sku);
      
            reserved = reserveLine(sku, quantity);
      
          }
      
          return reserved;
      
        }
      
        export function submitOrder(orderId: string, sku: string, quantity: number): string {
      
          const units = reserveOrder(orderId, sku, quantity);
      
          return `${orderId}: reserved ${units} units`;
      
        }
      
        export function submitOrderAndReport(): string {
      
          try {
      
            return submitOrder("ORD-17", "SKU-B", 0);
      
          } catch (err) {
      
            console.error(err);
      
            return String((err as Error).stack);
      
          }
      
        }
      
        export function submitOrderLater(): void {
      
          setTimeout(() => submitOrder("ORD-17", "SKU-B", 0), 0);
      
        }

        
        function __using(res, body, ...args) {
      
          try {
      
            return body(res, ...args);
      
          } finally {
      
            res[Symbol.dispose]();
      
          }
      
        }
      
        function __acquireLock(key) {
      
          return { key, [Symbol.dispose]() {} };
      
        }
      
        function _outlinedUsingBlock(lock, sku, qty) {
      
          if (qty <= 0) {
      
            throw new RangeError("Invalid quantity " + qty + " for " + sku);
      
          }
      
          const r = qty * 2;
      
          return r;
      
        }
      
        function submitOrder(id, sku, qty) {
      
          let n = 0;
      
          n = __using(__acquireLock(sku), _outlinedUsingBlock, sku, qty);
      
          return id + ": reserved " + n + " units";
      
        }
      
        function submitOrderAndReport() {
      
          try {
      
            return submitOrder("ORD-17", "SKU-B", 0);
      
          } catch (e) {
      
            console.error(e);
      
            return String(e.stack);
      
          }
      
        }
      
        function submitOrderLater() {
      
          setTimeout(() => submitOrder("ORD-17", "SKU-B", 0), 0);
      
        }
      
        window.runExample06 = function() {
      
          submitOrderLater();
      
          return "Scheduled submitOrder() in a timer. Check the Console for the uncaught RangeError.";
      
        };
      
        window.logStackExample06 = submitOrderAndReport;
      
        //# sourceMappingURL=bundle.js.map

        
        const builder = new SafeScopeInfoBuilder();
      
        // 1. Original Scopes (abbreviated: positions come from TextLocator).
      
        builder
      
          .startSource()
      
          .startScope(0, 0, { kind: "Module", key: "module", variables: [
      
            "acquireLock", "assertValidQuantity", "reserveLine", "reserveOrder",
      
            "submitOrder", "submitOrderAndReport", "submitOrderLater",
      
          ] })
      
          .startScope(..., { name: "assertValidQuantity", kind: "Function", isStackFrame: true,
      
                             key: "assertValidQuantity", variables: ["sku", "quantity"] }).endScope(...)
      
          .startScope(..., { name: "reserveLine", kind: "Function", isStackFrame: true,
      
                             key: "reserveLine", variables: ["sku", "quantity"] }).endScope(...)
      
          .startScope(..., { name: "reserveOrder", kind: "Function", isStackFrame: true,
      
                             key: "reserveOrder", variables: ["orderId", "sku", "quantity", "reserved"] })
      
            .startScope(..., { kind: "Block", key: "usingBlock", variables: ["lock"] }).endScope(...)
      
          .endScope(...)
      
          .startScope(..., { name: "submitOrder", kind: "Function", isStackFrame: true,
      
                             key: "submitOrder", variables: ["orderId", "sku", "quantity", "units"] }).endScope(...)
      
          .startScope(..., { name: "submitOrderAndReport", kind: "Function", isStackFrame: true,
      
                             key: "submitOrderAndReport", variables: [] })
      
            .startScope(..., { kind: "Block", key: "catchBlock", variables: ["err"] }).endScope(...)
      
          .endScope(...)
      
          .startScope(..., { name: "submitOrderLater", kind: "Function", isStackFrame: true,
      
                             key: "submitOrderLater", variables: [] })
      
            .startScope(..., { kind: "Function", isStackFrame: true, key: "timerCallback", variables: [] }).endScope(...)
      
          .endScope(...)
      
          .endScope(...)
      
          .endSource();
      
        // 2. Generated Ranges.
      
        builder
      
          .startRange(0, 0, { scopeKey: "module", values: [
      
            "__acquireLock", null, null, null, "submitOrder", "submitOrderAndReport", "submitOrderLater",
      
          ] })
      
          // __using: runtime helper WITHOUT definition -> dropped from stack traces.
      
          .startRange(..., { isStackFrame: true, isHidden: true }).endRange(...)
      
          // __acquireLock (+ its [Symbol.dispose] method): helpers without definition.
      
          .startRange(..., { isStackFrame: true })
      
            .startRange(..., { isStackFrame: true }).endRange(...)
      
          .endRange(...)
      
          // _outlinedUsingBlock: outlined (isHidden + definition "reserveOrder")
      
          // -> merged with the caller that owns reserveOrder.
      
          .startRange(..., { scopeKey: "reserveOrder", isStackFrame: true, isHidden: true,
      
                             values: [null /* orderId is not passed */, "sku", "qty", "0"] })
      
            .startRange(..., { scopeKey: "usingBlock", values: ["lock"] })
      
              // reserveLine and assertValidQuantity are inlined INTO the outlined block.
      
              .startRange(..., { scopeKey: "reserveLine", callSite: reserveLineCall, values: ["sku", "qty"] })
      
                .startRange(..., { scopeKey: "assertValidQuantity", callSite: assertCall, values: ["sku", "qty"] })
      
                .endRange(...)
      
              .endRange(...)
      
            .endRange(...)
      
          .endRange(...)
      
          // submitOrder, with reserveOrder (the owner of the outlined block) inlined into it.
      
          .startRange(..., { scopeKey: "submitOrder", isStackFrame: true,
      
                             values: ["id", "sku", "qty", availableFrom(start, afterUsingCall, end, "n")] })
      
            .startRange(..., { scopeKey: "reserveOrder", callSite: reserveOrderCall,
      
                               values: ["id", "sku", "qty", availableFrom(start, afterLetN, end, "n")] })
      
            .endRange(...)
      
          .endRange(...)
      
          .startRange(..., { scopeKey: "submitOrderAndReport", isStackFrame: true, values: [] })
      
            .startRange(..., { scopeKey: "catchBlock", values: ["e"] }).endRange(...)
      
          .endRange(...)
      
          .startRange(..., { scopeKey: "submitOrderLater", isStackFrame: true, values: [] })
      
            .startRange(..., { scopeKey: "timerCallback", isStackFrame: true, values: [] }).endRange(...)
      
          .endRange(...)
      
          // window.runExample06: generated-only glue.
      
          .startRange(..., { isStackFrame: true }).endRange(...)
      
          .endRange(...);

Decoded OriginalScope Tree (errors.ts)
      Module
      (anonymous)
      [0:0 → 42:0)
      
    
variables: [acquireLock, assertValidQuantity, reserveLine, reserveOrder, submitOrder, submitOrderAndReport, submitOrderLater]

      Function
      assertValidQuantity
      [3:28 → 7:1)
      isStackFrame
    
variables: [sku, quantity]

      Function
      reserveLine
      [9:20 → 12:1)
      isStackFrame
    
variables: [sku, quantity]

      Function
      reserveOrder
      [14:21 → 23:1)
      isStackFrame
    
variables: [orderId, sku, quantity, reserved]

      Block
      (anonymous)
      [18:2 → 21:3)
      
    
variables: [lock]

      Function
      submitOrder
      [25:27 → 28:1)
      isStackFrame
    
variables: [orderId, sku, quantity, units]

      Function
      submitOrderAndReport
      [30:36 → 37:1)
      isStackFrame
    
variables: []

      Block
      (anonymous)
      [33:10 → 36:3)
      
    
variables: [err]

      Function
      submitOrderLater
      [39:32 → 41:1)
      isStackFrame
    
variables: []

      Function
      (anonymous)
      [40:13 → 40:52)
      isStackFrame
    
variables: []
Decoded GeneratedRange & Binding Tree (bundle.js)
      Range [0:0 → 39:0)
      → Module
      isStackFrame: false
      
      
    

          bindings: acquireLock → __acquireLock, assertValidQuantity → <unavailable>, reserveLine → <unavailable>, reserveOrder → <unavailable>, submitOrder → submitOrder, submitOrderAndReport → submitOrderAndReport, submitOrderLater → submitOrderLater
        

      Range [0:16 → 6:1)
      → unmapped range
      isStackFrame
      isHidden: true
      
    

      Range [7:22 → 9:1)
      → unmapped range
      isStackFrame
      
      
    

      Range [8:32 → 8:37)
      → unmapped range
      isStackFrame
      
      
    

      Range [10:28 → 16:1)
      → Function(reserveOrder)
      isStackFrame
      isHidden: true
      
    

          bindings: orderId → <unavailable>, sku → sku, quantity → qty, reserved → 0
        

      Range [11:2 → 15:11)
      → Block
      isStackFrame: false
      
      
    

          bindings: lock → lock
        

      Range [11:2 → 14:20)
      → Function(reserveLine)
      isStackFrame: false
      
      callSite @ 21:16
    

          bindings: sku → sku, quantity → qty
        

      Range [11:2 → 13:3)
      → Function(assertValidQuantity)
      isStackFrame: false
      
      callSite @ 11:3
    

          bindings: sku → sku, quantity → qty
        

      Range [17:20 → 21:1)
      → Function(submitOrder)
      isStackFrame
      
      
    

          bindings: orderId → id, sku → sku, quantity → qty, units → SubRanges([17:20-19:65]: unavailable | [19:65-21:1]: n)
        

      Range [18:2 → 19:65)
      → Function(reserveOrder)
      isStackFrame: false
      
      callSite @ 27:17
    

          bindings: orderId → id, sku → sku, quantity → qty, reserved → SubRanges([18:2-18:12]: unavailable | [18:12-19:65]: n)
        

      Range [22:29 → 29:1)
      → Function(submitOrderAndReport)
      isStackFrame
      
      
    

      Range [25:10 → 28:3)
      → Block
      isStackFrame: false
      
      
    

          bindings: err → e
        

      Range [30:25 → 32:1)
      → Function(submitOrderLater)
      isStackFrame
      
      
    

      Range [31:13 → 31:52)
      → Function
      isStackFrame
      
      
    

      Range [33:30 → 36:1)
      → unmapped range
      isStackFrame
      
      
    

              Raw Source Map JSON (bundle.js.map)
              {
  "version": 3,
  "file": "bundle.js",
  "sources": [
    "errors.ts"
  ],
  "sourcesContent": [
    "// Authored TypeScript: errors.ts\ndeclare function acquireLock(sku: string): Disposable;\n\nfunction assertValidQuantity(sku: string, quantity: number): void {\n  if (quantity <= 0) {\n    throw new RangeError(`Invalid quantity ${quantity} for ${sku}`);\n  }\n}\n\nfunction reserveLine(sku: string, quantity: number): number {\n  assertValidQuantity(sku, quantity);\n  return quantity * 2;\n}\n\nfunction reserveOrder(orderId: string, sku: string, quantity: number): number {\n  let reserved = 0;\n  // `using` block: outlined into `_outlinedUsingBlock` and run through\n  // the `__using` runtime helper in bundle.js.\n  {\n    using lock = acquireLock(sku);\n    reserved = reserveLine(sku, quantity);\n  }\n  return reserved;\n}\n\nexport function submitOrder(orderId: string, sku: string, quantity: number): string {\n  const units = reserveOrder(orderId, sku, quantity);\n  return `${orderId}: reserved ${units} units`;\n}\n\nexport function submitOrderAndReport(): string {\n  try {\n    return submitOrder(\"ORD-17\", \"SKU-B\", 0);\n  } catch (err) {\n    console.error(err);\n    return String((err as Error).stack);\n  }\n}\n\nexport function submitOrderLater(): void {\n  setTimeout(() => submitOrder(\"ORD-17\", \"SKU-B\", 0), 0);\n}\n"
  ],
  "names": [
    "submitOrder",
    "reserved",
    "acquireLock",
    "submitOrderAndReport",
    "submitOrderLater",
    "Module",
    "assertValidQuantity",
    "reserveLine",
    "reserveOrder",
    "Function",
    "sku",
    "quantity",
    "orderId",
    "Block",
    "lock",
    "units",
    "err",
    "__acquireLock",
    "qty",
    "0",
    "id",
    "n",
    "e"
  ],
  "mappings": ";;;;;;;;;;;EAIE;IACE,MAAM;;EAMR;;;AAcFA;EAVEC;EAIE,YAAaC,kBAAb;EAQF;;AAGFC;EACE;IACE;;IAEA;IACA;;;AAIJC;EACE,iBAAiB;;;;;;;;",
  "scopes": [
    "BCAAK,DEICCRGC,BHDcMI,DMC,CEB,BHCUCA,DDC,CDB,BHCVCA,DCFCV,BCECI,Da,CDD,CCB,BHCbRJ,DFFCI,CDB,BHCkBGA,BCDKI,DC,CDD,CBB,BHCgBCJ,BGBNA,CAnB,CBB,CBA"
  ],
  "ranges": [
    "ECAAA,GSAAABEF,EMQ,FGB,EFBW,EFBgB,FF,FBB,EPBcAG,GALTU,EDBCAC,GP,ECAAF,GLT,IAUP,ECAAD,GLT,IAKC,FCD,FBU,FBL,FBB,EHBUAI,GVLTA,HDChCW,EDBCAF,GVLTA,HDAKW,IAaQ,FBhC,FCB,EHBdAG,EDDKAC,GX,FDD,FBB,EHBZAC,EHBNAC,FnB,FBB,EFBe,FDB,FDA"
  ]
}
            

1	// Authored TypeScript: errors.ts
2	declare function acquireLock(sku: string): Disposable;
3
4	function assertValidQuantity(sku: string, quantity: number): void {
5	if (quantity <= 0) {
6	throw new RangeError(`Invalid quantity ${quantity} for ${sku}`);
7	}
8	}
9
10	function reserveLine(sku: string, quantity: number): number {
11	assertValidQuantity(sku, quantity);
12	return quantity * 2;
13	}
14
15	function reserveOrder(orderId: string, sku: string, quantity: number): number {
16	let reserved = 0;
17	// `using` block: outlined into `_outlinedUsingBlock` and run through
18	// the `__using` runtime helper in bundle.js.
19	{
20	using lock = acquireLock(sku);
21	reserved = reserveLine(sku, quantity);
22	}
23	return reserved;
24	}
25
26	export function submitOrder(orderId: string, sku: string, quantity: number): string {
27	const units = reserveOrder(orderId, sku, quantity);
28	return `${orderId}: reserved ${units} units`;
29	}
30
31	export function submitOrderAndReport(): string {
32	try {
33	return submitOrder("ORD-17", "SKU-B", 0);
34	} catch (err) {
35	console.error(err);
36	return String((err as Error).stack);
37	}
38	}
39
40	export function submitOrderLater(): void {
41	setTimeout(() => submitOrder("ORD-17", "SKU-B", 0), 0);
42	}

1	function __using(res, body, ...args) {
2	try {
3	return body(res, ...args);
4	} finally {
5	res[Symbol.dispose]();
6	}
7	}
8	function __acquireLock(key) {
9	return { key, [Symbol.dispose]() {} };
10	}
11	function _outlinedUsingBlock(lock, sku, qty) {
12	if (qty <= 0) {
13	throw new RangeError("Invalid quantity " + qty + " for " + sku);
14	}
15	const r = qty * 2;
16	return r;
17	}
18	function submitOrder(id, sku, qty) {
19	let n = 0;
20	n = __using(__acquireLock(sku), _outlinedUsingBlock, sku, qty);
21	return id + ": reserved " + n + " units";
22	}
23	function submitOrderAndReport() {
24	try {
25	return submitOrder("ORD-17", "SKU-B", 0);
26	} catch (e) {
27	console.error(e);
28	return String(e.stack);
29	}
30	}
31	function submitOrderLater() {
32	setTimeout(() => submitOrder("ORD-17", "SKU-B", 0), 0);
33	}
34	window.runExample06 = function() {
35	submitOrderLater();
36	return "Scheduled submitOrder() in a timer. Check the Console for the uncaught RangeError.";
37	};
38	window.logStackExample06 = submitOrderAndReport;
39	//# sourceMappingURL=bundle.js.map

1	const builder = new SafeScopeInfoBuilder();
2
3	// 1. Original Scopes (abbreviated: positions come from TextLocator).
4	builder
5	.startSource()
6	.startScope(0, 0, { kind: "Module", key: "module", variables: [
7	"acquireLock", "assertValidQuantity", "reserveLine", "reserveOrder",
8	"submitOrder", "submitOrderAndReport", "submitOrderLater",
9	] })
10	.startScope(..., { name: "assertValidQuantity", kind: "Function", isStackFrame: true,
11	key: "assertValidQuantity", variables: ["sku", "quantity"] }).endScope(...)
12	.startScope(..., { name: "reserveLine", kind: "Function", isStackFrame: true,
13	key: "reserveLine", variables: ["sku", "quantity"] }).endScope(...)
14	.startScope(..., { name: "reserveOrder", kind: "Function", isStackFrame: true,
15	key: "reserveOrder", variables: ["orderId", "sku", "quantity", "reserved"] })
16	.startScope(..., { kind: "Block", key: "usingBlock", variables: ["lock"] }).endScope(...)
17	.endScope(...)
18	.startScope(..., { name: "submitOrder", kind: "Function", isStackFrame: true,
19	key: "submitOrder", variables: ["orderId", "sku", "quantity", "units"] }).endScope(...)
20	.startScope(..., { name: "submitOrderAndReport", kind: "Function", isStackFrame: true,
21	key: "submitOrderAndReport", variables: [] })
22	.startScope(..., { kind: "Block", key: "catchBlock", variables: ["err"] }).endScope(...)
23	.endScope(...)
24	.startScope(..., { name: "submitOrderLater", kind: "Function", isStackFrame: true,
25	key: "submitOrderLater", variables: [] })
26	.startScope(..., { kind: "Function", isStackFrame: true, key: "timerCallback", variables: [] }).endScope(...)
27	.endScope(...)
28	.endScope(...)
29	.endSource();
30
31	// 2. Generated Ranges.
32	builder
33	.startRange(0, 0, { scopeKey: "module", values: [
34	"__acquireLock", null, null, null, "submitOrder", "submitOrderAndReport", "submitOrderLater",
35	] })
36	// __using: runtime helper WITHOUT definition -> dropped from stack traces.
37	.startRange(..., { isStackFrame: true, isHidden: true }).endRange(...)
38	// __acquireLock (+ its [Symbol.dispose] method): helpers without definition.
39	.startRange(..., { isStackFrame: true })
40	.startRange(..., { isStackFrame: true }).endRange(...)
41	.endRange(...)
42	// _outlinedUsingBlock: outlined (isHidden + definition "reserveOrder")
43	// -> merged with the caller that owns reserveOrder.
44	.startRange(..., { scopeKey: "reserveOrder", isStackFrame: true, isHidden: true,
45	values: [null /* orderId is not passed */, "sku", "qty", "0"] })
46	.startRange(..., { scopeKey: "usingBlock", values: ["lock"] })
47	// reserveLine and assertValidQuantity are inlined INTO the outlined block.
48	.startRange(..., { scopeKey: "reserveLine", callSite: reserveLineCall, values: ["sku", "qty"] })
49	.startRange(..., { scopeKey: "assertValidQuantity", callSite: assertCall, values: ["sku", "qty"] })
50	.endRange(...)
51	.endRange(...)
52	.endRange(...)
53	.endRange(...)
54	// submitOrder, with reserveOrder (the owner of the outlined block) inlined into it.
55	.startRange(..., { scopeKey: "submitOrder", isStackFrame: true,
56	values: ["id", "sku", "qty", availableFrom(start, afterUsingCall, end, "n")] })
57	.startRange(..., { scopeKey: "reserveOrder", callSite: reserveOrderCall,
58	values: ["id", "sku", "qty", availableFrom(start, afterLetN, end, "n")] })
59	.endRange(...)
60	.endRange(...)
61	.startRange(..., { scopeKey: "submitOrderAndReport", isStackFrame: true, values: [] })
62	.startRange(..., { scopeKey: "catchBlock", values: ["e"] }).endRange(...)
63	.endRange(...)
64	.startRange(..., { scopeKey: "submitOrderLater", isStackFrame: true, values: [] })
65	.startRange(..., { scopeKey: "timerCallback", isStackFrame: true, values: [] }).endRange(...)
66	.endRange(...)
67	// window.runExample06: generated-only glue.
68	.startRange(..., { isStackFrame: true }).endRange(...)
69	.endRange(...);