Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReferenceError: talk is not defined

Hugo
September 06, 2019
Programming
1
43

ReferenceError: talk is not defined

Errar é humano. Mas o que fazer para evitar erros nos nossos apps React? Algumas boas práticas podem fazer toda a diferença para a experiência do usuário.

Hugo

September 06, 2019
Tweet

More Decks by Hugo

See All by Hugo
Você usa APIs do jeito errado
hugooliveirad
0
62
Três hábitos para escrever CSS escalável
hugooliveirad
0
590
Three habits to write scalable CSS
hugooliveirad
0
64
Mantendo webapps em produção, sem dor de cabeça
hugooliveirad
1
280
Minha webapp está em produção, e agora?
hugooliveirad
0
36

Other Decks in Programming

See All in Programming
CSC305 Lecture 26
javiergs
PRO
0
140
Jakarta EE meets AI
ivargrimstad
0
240
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
930
フロントエンドのディレクトリ構成どうしてる？　Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
Haze - Real time background blurring
chrisbanes
1
510
PHPとAPI Platformで作る本格的なWeb APIアプリケーション（入門編） / phpcon 2024 Intro to API Platform
ttskch
0
160
Recoilを剥がしている話
kirik
5
6.6k
たのしいparse.y
ydah
3
120
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
120
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
1
130
HTTP compression in PHP and Symfony apps
dunglas
2
1.7k
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
5
900

Featured

See All Featured
How STYLIGHT went responsive
nonsquared
95
5.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Producing Creativity
orderedlist
PRO
341
39k
Bash Introduction
62gerente
608
210k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Why Our Code Smells
bkeepers
PRO
335
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k

Transcript

  1. ReferenceError talk is not defined

  2. @hugobessaa

  3. Exception

  4. function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }

  5. function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }
  6. None

  7. getPage()

  8. render() getData() getPage()

  9. render() getData() getPage()

  10. render() getData() getPage()

  11. render() getData() getPage()

  12. render() getData() getPage()

  13. render() getData() getPage()

  14. Unhandled Exception

  15. Vão terminar toda a call stack

  16. function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }

  17. function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }

  18. function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }

  19. function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }

  20. function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }

  21. function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }

  22. async function render(user) { let data = await getData(user); let

    pageData = getPage(10, 1, data); return renderPage(pageData); }

  23. <body> <div id="root"></div> <script src="./script.js"></script> </body>

  24. Unhandled Exception

  25. async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }

  26. async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }

  27. function getPage(limit, page, data) { let firstIndex = (page -

    1) * limit; let lastIndex = firstIndex + limit; let pageData = data.slice(firstIndex, lastIndex); if (pageData.length === 0) { throw new Error(`Page ${page} does not exist`); } return pageData; }

  28. async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }

  29. async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }

  30. async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }

  31. async function render(user) { let data = await getData(user); try

    { let pageData = getPage(10, 1, data); return renderPage(pageData); } catch (e) { console.error(e); return renderEmptyPage(); } }

  32. <App> <Header /> <Body> <RocketDashboard data={monitoredRockets} layout='grid' /> </Body> </App>

  33. <App> <Header /> <Body> <RocketDashboard data={monitoredRockets} layout='grid' /> </Body> </App>

  34. <App> <Header /> <Body> try { <RocketDashboard data={monitoredRockets} layout='grid' />

    } catch (e) { <ErrorMessage /> } </Body> </App>

  35. <App> <Header /> <Body> <RocketDashboard data={monitoredRockets} layout='grid' /> </Body> </App>

    Declarativo

  36. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search

  37. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search

  38. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search

  39. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search

  40. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search

  41. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search

  42. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search

  43. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search

  44. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  45. None
  46. None
  47. None

  48. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search
  49. None
  50. None

  51. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search

  52. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search Unavailable

  53. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search

  54. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Soyuz-FG LEO 6,900 SSO 4,500 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800

  55. class RocketDetails extends Component { render() { let { title,

    info } = this.props; return ( <article> <h2>{title}</h2> <dl> <dt>{info[0].label}</dt> <dd>{info[0].value}</dd> <dt>{info[1].label}</dt> <dd>{info[1].value}</dd> </dl> </article> ); } }

  56. class RocketDetails extends Component { static getDerivedStateFromError(error) { return {

    error: true }; } render() { let { title, info } = this.props; return ( <article> <h2>{title}</h2> <dl> <dt>{info[0].label}</dt> <dd>{info[0].value}</dd> <dt>{info[1].label}</dt> <dd>{info[1].value}</dd> </dl> </article>

  57. if (this.state.error) { return <span>Unavailable</span> }

  58. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search Unavailable

  59. class Search extends Component { state = { value: ''

    }; render() { return ( <form onSubmit={this.handleSubmit}> <input name='search' value={this.state.value} onChange={ (e) => this.setState({ value: e.target.value }) } /> </form> );

  60. class Search extends Component { state = { value: ''

    }; render() { return ( <form onSubmit={this.handleSubmit}> <input name='search' value={this.state.value} onChange={ (e) => this.setState({ value: e.target.value }) } /> </form> );

  61. class Search extends Component { state = { value: ''

    }; render() { return ( <form onSubmit={this.handleSubmit}> <input name='search' value={this.state.value} onChange={ (e) => this.setState({ value: e.target.value }) } /> </form> );

  62. class Search extends Component { state = { value: ''

    }; render() { return ( <form onSubmit={this.handleSubmit}> <input name='search' value={this.state.value} onChange={ (e) => this.setState({ value: e.target.value }) } /> </form> );

  63. (e) => this.setState({ value: e.target.value }) } /> </form> );

    } handleSubmit = (e) => { e.preventDefault(); performSearch({ query: this.state.value }); }; }

  64. (e) => this.setState({ value: e.target.value }) } /> </form> );

    } handleSubmit = (e) => { e.preventDefault(); performSearch({ query: this.state.value }); }; }

  65. (e) => this.setState({ value: e.target.value }) } /> </form> );

    } handleSubmit = (e) => { e.preventDefault(); performSearch({ query: this.state.value }); }; }

  66. Exceções em event handlers precisam de try…catch

  67. render()

  68. render() onChange()

  69. handleSubmit = (e) => { e.preventDefault(); try { performSearch({ query:

    this.state.value }); } catch (e) { this.setState({ error: true }); } };

  70. Server-side rendering

  71. None
  72. None
  73. None

  74. try { return renderToString(<App />); } catch (e) { console.error(e);

    return undefined }

  75. É assim que fazemos em telnyx.com

  76. None

  77. Como monitorar?

  78. None

  79. Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' })

  80. None
  81. None

  82. class RocketDetails extends Component { static getDerivedStateFromError(error) { return {

    error: true }; } render() { let { title, info } = this.props; return ( <article> <h2>{title}</h2> <dl> <dt>{info[0].label}</dt> <dd>{info[0].value}</dd> <dt>{info[1].label}</dt> <dd>{info[1].value}</dd> </dl> </article>

  83. class RocketDetails extends Component { static getDerivedStateFromError(error) { return {

    error: true }; } componentDidCatch(error, info) { console.error(error, info); Sentry.captureException(err); } render() { let { title, info } = this.props; return ( <article> <h2>{title}</h2> <dl> <dt>{info[0].label}</dt>
  84. None

  85. Unhandled Exception

  86. Uma hora vai acontecer

  87. Nós podemos diminuir o impacto dos erros

  88. Rockets Falcon 9 LEO 22,800 GTO 8,300 Saturn V LEO

    140,000 TLI 48,600 Space Shuttle LEO 27,500 Electron SSO 225 Falcon Heavy LEO 63,800 Search Unavailable
  89. None

  90. static getDerivedStateFromError(error) { return { error: true }; } componentDidCatch(error,

    info) { console.error(error, info); Sentry.captureException(err); }

  91. Não deixe seu usuário ver uma tela branca

  92. None
  93. None

  94. telnyx.com/careers

  95. @hugobessaa