Redwood application debugging issues

Caveat: As I did not get any " Your topic is similar to…" message from this Forum’s manager, I am proceeding with this discussion, despite my fear that I am writing too much. Anyone feeling that I should write less, please do let me know :blush:


This discussion topic could be a part of Immediate feedback from RedwoodJS beginners - #2 by forresthayes, however, I am starting it here expecting that this would be a more serious/deep discussion.

I really need to figure out how to get the debugger running !! I am 1st time user of RW and am trying to replace the boilerplate calls to db with calls to my AWS lambda’s

I have found the RW VSCode extensions but can either be in dev mode where everything starts and I can code & go /OR/ I can start the debugger but not run the web app – I pray that a tutorial on getting the debugger running is high on the list

Welcome to RWJS, @ajoslin103

Like you, I am new to RWJS, but not to the general debugging topics. So, unless someone who already solved your problems joins us here, I would be happy to try to help you. DO you have a small sample code to start with?

Hi @ajoslin103 even outside using a debugger (which I confess I don’t know how to/don’t use in VSCode) there are a few things you can do to make writing services (and effectively Prisma db queries easier):

  1. Seed you data
  2. Use a db tool like TablePlus and write your SQL and test it
  3. Create your services and GraphQL api (ie, services and sdl) and then test your queries and/or mutations in GraphQL Playground or Insomnia (what I use)
  4. For the moment, in your services use console.trace, debug, info etc to log to the api side in your dev server output
  5. Logging is coming :crossed_fingers: in next release (PR is soon to be merged in canary for v28) and then you can switch out to use the logger and then replace console with logger
  6. You can also add Prisma logging to see what it is doing (this will enabled in logging too).
  7. You’ll be able specify only log warns an errors etc

If you are testing custom functions, then the same applies about:

  1. Logging
  2. Making the api function request to via Insomnia to test

Also, did you know Redwood has a console? That can help you having seeded data and then test out basic Prisma queries, updates:

yarn rw console

> db.user.findMany({take: 3})
[
  {
    id: 1,
    email: 'Leola47@yahoo.com',
    name: 'Anthony Dicki',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/herbigt/128.jpg'
  },
  {
    id: 2,
    email: 'Dagmar1@yahoo.com',
    name: 'Diane Hahn V',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/desastrozo/128.jpg'
  },
  {
    id: 3,
    email: 'Adell46@hotmail.com',
    name: 'Rosie Gaylord DVM',
    avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/algunsanabria/128.jpg'
  }
]

(note this is faker data)

Yes, I think there is a way to use the debugger, but these old ways still can be helpful.

Thank you @dthyresson - you certainly helped me with this post, proving that nothing is better than relevant experience. Regardless of @ajoslin103 case, I will try all of your recipes as they perfectly match the response I hoped to get to my previous post Immediate feedback from RedwoodJS beginners :smiley:

Thanks @dthyresson – were I talking to a database I would certainly use those tips

But I’m afraid I’ve dug a rather deep hole for myself by grabbing Redwood and attempting to replace the boilerplate Cell = graphql + prisma + database with Cell = graphql + restful calls to my AWS Lambdas

I need the debugger to see the shape & content of the things I’m trying to swap out

I did get the debugger running by: 1. starting a new workspace with only this one RW project in it; 2. installing all the RW extensions I could find [,] 3. aliasing my default nvm version to the one I am using for this project; 4. opening the debugger and clicking start (since the launch.json is delivered w/the RW app template)

But I can’t get it to break into the api code yet, breakpoints are not working & even putting debugger in the code doesn’t do it

1 Like

I’ve backed off a bit and setup some functions to do the tasks - gotta get this demo out the door.

When I have 2mins to rub together I will implement these functions as part of the GQL as suggested in the cookbook

It’s a wonderous thing !!

Breakpoints are working – I was just in too deep and where I thought the code was going with the GQL was not being reached

:rocket:

This is great! How did you do it?

I saw your earlier post:

  1. Is starting a new workspace any different to just starting VS Code from within the RW project directory? Like ~/dev/redwood/rwblog (main) $ code .
  2. I don’t think it’s necessary to install any extensions, but please correct me if I’m wrong
  3. I only have one node version installed, so this shouldn’t be needed for me, right?
  4. Sounds too easy to be true :astonished:

Too easy to be true

It certainly seemed that way to me, for all of the projects I’ve tried to debug over the years it’s the first one that has worked so completely. It’s hard for me to say if there is something about my environment that is special, I don’t know if VSCode has a ‘start without extensions’ mode that I could use to start from scratch and turn on one thing at a time. I installed 2 redwood extensions (I thought) but only one is there now: https://marketplace.visualstudio.com/items?itemName=redwoodjs.redwood – I see there are two in the marketplace, but only one is current.

Redwood has my vote for best framework ever. I loved it a year ago but it wasn’t where I needed it to be. I can’t wait for Typescript support to be baked in. I will go nutz when someone better than me marries Redwood w/Electron!

I’m running Mac, I don’t know if that matters - I do remember seeing somewhere that the extension works best (or at all?) when there is only one Redwood project in the workspace.

It’s been a battle to get nvm to work inside of VSCode, but they have made strides in the last year and it works a lot better now. I’m always surprised when someone isn’t using it. Being able to pin the node version has been more and more helpful for me over the years. The first time I went back to an old project and Node had changed enough to invalidate the old code I had to reinstall node to get the old project to build and then I couldn’t work on the current project… I have an extension installed for nvm: vsc-nvm - Visual Studio Marketplace

Anyway, all of this to say, I’ve opened VSCode in my project folder with: open . and clicked debug after selecting ‘launch development’ and it just works - I couldn’t be happier

If your project is older than you might want to scaffold a new one and copy the launch.json from the .vscode folder (or just the whole .vscode folder) – it looks like v19.3 is the threshold to success Search results for 'launch.json' - RedwoodJS Community

Cheers !

1 Like

Thank you again @ajoslin103 for a well-documented problem you seemingly solved. I made a very feeble attempt offering help, and when I saw what your issue was (alternative cells implementation), I realized that it is me who needs help and learn a lot more.

Nevertheless, I am now more than ever interested in documenting the techniques and “tricks” typical in the Redwood debugging context. The advices from @dthyresson are also a welcome addition to my collection in the process of being organized.

@adriatic you are certainly very welcome

note that I am able to use VSCode to debug the api folder this way, while I still use Chrome to debug the web folder – I don’t know how to get VSCode to work to debug the web folder in my Redwood project yet

Thanks for this statement Allen - I will make sure to show how to debug full-stack apps using (two instances of) VSCode. The existing topic Development tools usage poll, is really a manual discourse poll, collecting tools of developers trade. It will also collect the debugging techniques.

It is great to see that some people still put in an effort into managing their websites.

hey @adriatic! I’m trying to implement logging on the Web side of my application.

I’m a new Redwood developer.

I’m coming into a project that is running Redwood 4. It uses a lot of custom configs. I’m pretty confused by it. The team also had the habit of ignoring warnings on startup. I’m undertaking the process of upgrading packages and introducing logging.

My current hurdle is on the Web portion. When I run ‘yarn rw dev’ everything seems to start up fine with no warnings BUT, I am not able to see any content on my ‘/’ page. I even made the page just an simple h1 tag and it won’t load. I can’t get any ‘web’ logs to run. I tried adding logs to the entry client and the App.tsx.

Do you have any recommendations for getting logging going?

Like, where could I get ‘Starting web app’ to log? Why would Redwood seemingly start with no errors but then not work at all? Am I missing something?

Web apps run within the browser — not the dev or api server.

Any “logs” so to speak would be client side via console and wild show up in the browser’s console.

1 Like

Thanks. I got it working now!

Working through so many issues, the issue was that we use firebase-analytics and it was being blocked by my AdBlocker… so nothing loaded at all and not even the first log came through. :exploding_head:

1 Like