diegomura / diegomura/react-pdf

Provide the actual component stack trace for exceptions

Open
#2,233 0 comments 0 reactions 0 assignees View on GitHub
new feature
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:

Screenshot 2023-03-08 at 9 01 40 PM

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.