时间戳

首页 > 解决方案 > 正确打印 exception.stack 直到尝试在 ReactJS 中解析字符串

reactjs - 正确打印 exception.stack 直到尝试在 ReactJS 中解析字符串

问题描述

我正在做一个项目，我试图解析一个异常对象，该对象是我从 catch 中创建的异常对象中检索的，使用exception.stack.

下面是解析堆栈跟踪的代码

getLineNoFromStacktrace(stack)
    {
        console.log("The stack is");
        console.log(stack);
        const stackSplit = stack.split(/\r?\n/);

        console.log(stackSplit);

        console.log("Stack line 1: ");
        console.log(stack);

        /*stack = stack.replace("http://");
        stack = stack.replace("https://");
        //Get the first colon (:), after this is the line number)*/
        const lineInfo = stack.substring(stack.indexOf(":")+1);

        console.log("Line info: " + lineInfo);
        //Now what we have left, the colon next is the end of the line number

        return lineInfo.substring(0, lineInfo.indexOf(":"));
    }

上面的方法我打印了正确打印的堆栈，如下所示：

The stack is
index.js:199 TypeError: Cannot read property 'toString' of null
    at sendHandledException (Home.js:18)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

下一行是我对新行字符 \r 和 \n 执行拆分，然后注销创建的数组

0: "TypeError: Cannot read property 'toString' of null"
1: "    at sendHandledException (http://localhost:3000/static/js/main.chunk.js:642:24)"
2: "    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:8078:18)"
3: "    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:8127:20)"
4: "    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:8187:35)"
5: "    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/0.chunk.js:8202:29)"
6: "    at executeDispatch (http://localhost:3000/static/js/0.chunk.js:12437:7)"
7: "    at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/0.chunk.js:12469:11)"
8: "    at processDispatchQueue (http://localhost:3000/static/js/0.chunk.js:12482:9)"
9: "    at dispatchEventsForPlugins (http://localhost:3000/static/js/0.chunk.js:12493:7)"
10: "    at http://localhost:3000/static/js/0.chunk.js:12704:16"
11: "    at batchedEventUpdates$1 (http://localhost:3000/static/js/0.chunk.js:26389:16)"
12: "    at batchedEventUpdates (http://localhost:3000/static/js/0.chunk.js:7876:16)"
13: "    at dispatchEventForPluginEventSystem (http://localhost:3000/static/js/0.chunk.js:12703:7)"
14: "    at attemptToDispatchEvent (http://localhost:3000/static/js/0.chunk.js:10186:7)"
15: "    at dispatchEvent (http://localhost:3000/static/js/0.chunk.js:10104:23)"
16: "    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:37465:16)"
17: "    at runWithPriority$1 (http://localhost:3000/static/js/0.chunk.js:15484:14)"
18: "    at discreteUpdates$1 (http://localhost:3000/static/js/0.chunk.js:26406:18)"
19: "    at discreteUpdates (http://localhost:3000/static/js/0.chunk.js:7888:16)"
20: "    at dispatchDiscreteEvent (http://localhost:3000/static/js/0.chunk.js:10070:7)"

正如您在上面看到的，当我注销按行拆分的堆栈时，输出完全不同，因此我不再拥有第一次打印控制台时最初拥有的数据。

我如何解析这个 exception.stack 并保持原始在方法开始时首先记录的内容。

标签： reactjsexceptionstack-trace

解决方案

我已经知道这里发生了什么。

它在构建最小化时与 ReactJS 有关，因此堆栈跟踪变得非人类可读。在 static/js 文件夹中进行生产构建时，有 main...map 文件，它是允许您将堆栈跟踪解码为人类可读并具有任何用途的源映射。

这里发生了什么，当我打印异常对象时，浏览器可以访问源映射（尽管它没有存储在文件系统中，我认为 Node 开发服务器使其可用），因此 chrome 控制台能够像我一样显示堆栈跟踪期待，但是当我尝试将堆栈放入一个变量来解析它时，它只有可以访问源映射的 chrome 控制台，而不是代码本身，所以我最终解析了编码的堆栈跟踪。

推荐阅读