diegomura / diegomura/react-pdf
Provide the actual component stack trace for exceptions
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
I am trying to debug an exception in a complex rendering of PDF based on templates, which uses recursive components. Think, nested report sections, column layouts, headers, fields, etc. It is unhelpful to get a console output like this:
```
/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@react-pdf-layout-npm-3.5.0-b32570275c-752e759737.zip/node_modules/@react-pdf/layout/lib/index.cjs.js:3158
var nodeHeight = child.box.height;
^
TypeError: Cannot read properties of undefined (reading 'height')
at splitNodes (/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@react-pdf-layout-npm-3.5.0-b32570275c-752e759737.zip/node_modules/@react-pdf/layout/lib/index.cjs.js:3158:32)
at splitPage (/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@react-pdf-layout-npm-3.5.0-b32570275c-752e759737.zip/node_modules/@react-pdf/layout/lib/index.cjs.js:3293:21)
at paginate (/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@react-pdf-layout-npm-3.5.0-b32570275c-752e759737.zip/node_modules/@react-pdf/layout/lib/index.cjs.js:3341:22)
at resolvePagination (/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@react-pdf-layout-npm-3.5.0-b32570275c-752e759737.zip/node_modules/@react-pdf/layout/lib/index.cjs.js:3365:20)
at _callee$ (/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@react-pdf-fns-npm-2.0.1-bc12617968-cc56f63286.zip/node_modules/@react-pdf/fns/lib/index.cjs.js:68:23)
at tryCatch (/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@babel-runtime-npm-7.21.0-c4ef698c89-7b33e25bfa.zip/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:44:17)
at Generator. (/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@babel-runtime-npm-7.21.0-c4ef698c89-7b33e25bfa.zip/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:125:22)
at Generator.next (/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@babel-runtime-npm-7.21.0-c4ef698c89-7b33e25bfa.zip/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:69:21)
at asyncGeneratorStep (/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@babel-runtime-npm-7.21.0-c4ef698c89-7b33e25bfa.zip/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (/Users/dustin.bortner/code/repos/RCG-Sirius/async-workers/.yarn/cache/@babel-runtime-npm-7.21.0-c4ef698c89-7b33e25bfa.zip/node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
```
**Which of _MY_ components was it rendering?**
With normal React for the web, errors encountered during rendering are accompanied with a component stack trace of the actual react functional components with their names, in the developer tools console. I can use the component stack trace to identify the component in which the error occurred. Without this, I have to guess!
** Other options considered **
- Go one-by-one and replace the rendering of each component with `null` and generate the PDF, until I don't get the error. What else can I do?
**Additional context**
Here is an example react component stack trace:
Contributor guide
Assessment
This issue has not been assessed yet.