Skip to content

Commit 2a8e864

Browse files
allansrcallansrc
committed
Add debugging guide and error handling improvements
- Create DEBUG.md with a comprehensive debugging guide for common issues and solutions. - Implement ErrorBoundary component to catch and display errors in the React app. - Enhance main.jsx to check for the root element and handle rendering errors gracefully. - Add a custom 404.html for SPA routing to improve user experience on missing pages. - Update GitHub Actions workflow to verify build output and ensure proper deployment.
1 parent 1b55034 commit 2a8e864

File tree

5 files changed

+266
-7
lines changed

5 files changed

+266
-7
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@ on:
5858
branches:
5959
- main
6060

61+
permissions:
62+
contents: write
63+
pages: write
64+
id-token: write
65+
6166
jobs:
6267
build-and-deploy:
6368
runs-on: ubuntu-latest
@@ -70,18 +75,30 @@ jobs:
7075
uses: actions/setup-node@v4
7176
with:
7277
node-version: "20"
78+
cache: "npm"
7379

7480
- name: Install dependencies
7581
run: npm ci
7682

7783
- name: Build site
7884
run: npm run build
7985

80-
# - name: Copy 404.html for SPA routing
81-
# run: cp dist/index.html dist/404.html
86+
- name: Verify build output
87+
run: |
88+
echo "Build output:"
89+
ls -la dist/
90+
echo "Assets:"
91+
ls -la dist/assets/ || echo "No assets folder"
92+
echo "Files in dist:"
93+
find dist -type f | head -20
94+
95+
- name: Copy 404.html for SPA routing
96+
run: cp dist/index.html dist/404.html
8297

8398
- name: Deploy to GitHub Pages
8499
uses: peaceiris/actions-gh-pages@v4
85100
with:
86101
github_token: ${{ secrets.GITHUB_TOKEN }}
87102
publish_dir: ./dist
103+
cname: duckdevlabs.com
104+
keep_files: false

‎DEBUG.md‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
# Guia de Debug - Tela Branca
2+
3+
## Como identificar o problema
4+
5+
### 1. Abra o Console do Navegador
6+
1. Acesse o site: `https://duckdevlabs.com`
7+
2. Pressione `F12` ou `Cmd+Option+I` (Mac)
8+
3. Vá na aba **Console**
9+
4. Procure por erros em vermelho
10+
11+
### 2. Verifique os Erros Comuns
12+
13+
#### Erro: "Failed to fetch dynamically imported module"
14+
- **Causa**: Assets não estão sendo encontrados
15+
- **Solução**: Verifique se os arquivos estão em `/assets/` no servidor
16+
17+
#### Erro: "Uncaught SyntaxError"
18+
- **Causa**: JavaScript malformado ou CSP bloqueando
19+
- **Solução**: Verifique se o build foi feito corretamente
20+
21+
#### Erro: "ReactDOM is not defined" ou "React is not defined"
22+
- **Causa**: Dependências não carregadas
23+
- **Solução**: Verifique se o `index.js` está sendo carregado
24+
25+
#### Erro: "Root element not found"
26+
- **Causa**: HTML não tem `<div id="root">`
27+
- **Solução**: Verifique o `dist/index.html`
28+
29+
### 3. Verifique a Aba Network
30+
1. Na aba **Network** do DevTools
31+
2. Recarregue a página (`Ctrl+R` ou `Cmd+R`)
32+
3. Procure por arquivos com status **404** ou **Failed**
33+
4. Verifique se estão sendo carregados:
34+
- `index.html`
35+
- `assets/index.[hash].js`
36+
- `assets/index.[hash].css`
37+
- `assets/duck-avatar.jpeg`
38+
- `assets/duckdev-banner.jpeg`
39+
40+
### 4. Verifique o GitHub Actions
41+
1. Vá na aba **Actions** do repositório
42+
2. Veja se o último workflow foi executado com sucesso
43+
3. Clique no workflow e veja os logs
44+
4. Procure por erros no build
45+
46+
### 5. Teste Localmente
47+
```bash
48+
# Build local
49+
npm run build
50+
51+
# Preview local
52+
npm run preview
53+
54+
# Acesse http://localhost:4173
55+
# Se funcionar localmente, o problema é no deploy
56+
```
57+
58+
## Problemas Conhecidos e Soluções
59+
60+
### Problema: Site funciona localmente mas não no GitHub Pages
61+
**Solução:**
62+
1. Verifique se o GitHub Pages está usando **"GitHub Actions"** como source
63+
2. Verifique se o arquivo `.nojekyll` está sendo criado no build
64+
3. Verifique os logs do workflow
65+
66+
### Problema: Assets não carregam (404)
67+
**Solução:**
68+
1. Verifique se o `base: '/'` está correto no `vite.config.js`
69+
2. Verifique se os arquivos estão em `dist/assets/`
70+
3. Verifique se o CNAME está correto
71+
72+
### Problema: JavaScript não executa
73+
**Solução:**
74+
1. Verifique o CSP no `index.html`
75+
2. Verifique se há erros de sintaxe no console
76+
3. Desabilite extensões do navegador que possam interferir (AdBlock, etc.)
77+
78+
## Ferramentas de Debug
79+
80+
### Verificar Build Local
81+
```bash
82+
npm run build
83+
ls -la dist/
84+
cat dist/index.html
85+
```
86+
87+
### Verificar Assets
88+
```bash
89+
ls -la dist/assets/
90+
```
91+
92+
### Testar Build
93+
```bash
94+
npm run preview
95+
# Abra http://localhost:4173
96+
```
97+
98+
## Se Nada Funcionar
99+
100+
1. **Limpe o cache do navegador**: `Ctrl+Shift+Delete` ou `Cmd+Shift+Delete`
101+
2. **Teste em modo anônimo**: `Ctrl+Shift+N` ou `Cmd+Shift+N`
102+
3. **Teste em outro navegador**: Chrome, Firefox, Safari
103+
4. **Verifique o DNS**: Use `nslookup duckdevlabs.com`
104+
5. **Verifique o certificado SSL**: Clique no cadeado na barra de endereços
105+
106+
## Logs Úteis
107+
108+
Execute no console do navegador:
109+
```javascript
110+
// Verificar se React está carregado
111+
console.log(window.React)
112+
113+
// Verificar se o root existe
114+
console.log(document.getElementById('root'))
115+
116+
// Verificar erros carregados
117+
console.error
118+
```
119+

‎public/404.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>DuckDevLabs</title>
7+
<script>
8+
// Redirect to index.html for SPA routing
9+
sessionStorage.redirect = location.href;
10+
location.replace(location.pathname.split('/').slice(0, -1).join('/') + '/index.html');
11+
</script>
12+
</head>
13+
<body>
14+
<noscript>
15+
<meta http-equiv="refresh" content="0; url=/index.html" />
16+
</noscript>
17+
</body>
18+
</html>
19+

‎src/components/ErrorBoundary.jsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from 'react'
2+
3+
class ErrorBoundary extends React.Component {
4+
constructor(props) {
5+
super(props)
6+
this.state = { hasError: false, error: null }
7+
}
8+
9+
static getDerivedStateFromError(error) {
10+
return { hasError: true, error }
11+
}
12+
13+
componentDidCatch(error, errorInfo) {
14+
console.error('Error caught by boundary:', error, errorInfo)
15+
}
16+
17+
render() {
18+
if (this.state.hasError) {
19+
return (
20+
<div style={{
21+
padding: '40px',
22+
textAlign: 'center',
23+
color: '#eceff4',
24+
fontFamily: 'system-ui',
25+
minHeight: '100vh',
26+
display: 'flex',
27+
flexDirection: 'column',
28+
justifyContent: 'center',
29+
alignItems: 'center',
30+
background: '#0f1012'
31+
}}>
32+
<h1 style={{ color: '#f5b000', marginBottom: '20px' }}>Ops! Algo deu errado</h1>
33+
<p style={{ marginBottom: '20px', color: '#a6adbb' }}>
34+
Ocorreu um erro ao carregar o site.
35+
</p>
36+
<button
37+
onClick={() => window.location.reload()}
38+
style={{
39+
padding: '12px 24px',
40+
background: '#f5b000',
41+
color: '#111',
42+
border: 'none',
43+
borderRadius: '8px',
44+
cursor: 'pointer',
45+
fontWeight: 'bold'
46+
}}
47+
>
48+
Recarregar Página
49+
</button>
50+
{process.env.NODE_ENV === 'development' && (
51+
<details style={{ marginTop: '20px', textAlign: 'left', maxWidth: '600px' }}>
52+
<summary style={{ cursor: 'pointer', color: '#a6adbb' }}>Detalhes do erro</summary>
53+
<pre style={{
54+
background: '#1a1c21',
55+
padding: '15px',
56+
borderRadius: '8px',
57+
overflow: 'auto',
58+
color: '#eceff4',
59+
marginTop: '10px'
60+
}}>
61+
{this.state.error?.toString()}
62+
</pre>
63+
</details>
64+
)}
65+
</div>
66+
)
67+
}
68+
69+
return this.props.children
70+
}
71+
}
72+
73+
export default ErrorBoundary
74+

‎src/main.jsx‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,41 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom/client'
33
import App from './App'
4+
import ErrorBoundary from './components/ErrorBoundary'
45
import './index.css'
56

6-
ReactDOM.createRoot(document.getElementById('root')).render(
7-
<React.StrictMode>
8-
<App />
9-
</React.StrictMode>,
10-
)
7+
// Verificar se o root existe
8+
const rootElement = document.getElementById('root')
9+
if (!rootElement) {
10+
console.error('Root element not found!')
11+
document.body.innerHTML = `
12+
<div style="padding: 40px; text-align: center; color: #eceff4; font-family: system-ui; background: #0f1012; min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column;">
13+
<h1 style="color: #f5b000;">Erro: Elemento root não encontrado</h1>
14+
<p style="color: #a6adbb;">Por favor, verifique se o HTML está correto.</p>
15+
</div>
16+
`
17+
} else {
18+
// Renderizar com error boundary
19+
try {
20+
const root = ReactDOM.createRoot(rootElement)
21+
root.render(
22+
<React.StrictMode>
23+
<ErrorBoundary>
24+
<App />
25+
</ErrorBoundary>
26+
</React.StrictMode>
27+
)
28+
} catch (error) {
29+
console.error('Failed to render React app:', error)
30+
rootElement.innerHTML = `
31+
<div style="padding: 40px; text-align: center; color: #eceff4; font-family: system-ui;">
32+
<h1 style="color: #f5b000;">Erro ao carregar a aplicação</h1>
33+
<p style="color: #a6adbb;">Erro: ${error.message}</p>
34+
<button onclick="window.location.reload()" style="padding: 12px 24px; background: #f5b000; color: #111; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; margin-top: 20px;">
35+
Recarregar
36+
</button>
37+
</div>
38+
`
39+
}
40+
}
1141

0 commit comments

Comments
 (0)